Options.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  2. import KEYCODE from "rc-util/es/KeyCode";
  3. import React from 'react';
  4. var defaultPageSizeOptions = [10, 20, 50, 100];
  5. var Options = function Options(props) {
  6. var _props$pageSizeOption = props.pageSizeOptions,
  7. pageSizeOptions = _props$pageSizeOption === void 0 ? defaultPageSizeOptions : _props$pageSizeOption,
  8. locale = props.locale,
  9. changeSize = props.changeSize,
  10. pageSize = props.pageSize,
  11. goButton = props.goButton,
  12. quickGo = props.quickGo,
  13. rootPrefixCls = props.rootPrefixCls,
  14. disabled = props.disabled,
  15. buildOptionText = props.buildOptionText,
  16. showSizeChanger = props.showSizeChanger,
  17. sizeChangerRender = props.sizeChangerRender;
  18. var _React$useState = React.useState(''),
  19. _React$useState2 = _slicedToArray(_React$useState, 2),
  20. goInputText = _React$useState2[0],
  21. setGoInputText = _React$useState2[1];
  22. var getValidValue = function getValidValue() {
  23. return !goInputText || Number.isNaN(goInputText) ? undefined : Number(goInputText);
  24. };
  25. var mergeBuildOptionText = typeof buildOptionText === 'function' ? buildOptionText : function (value) {
  26. return "".concat(value, " ").concat(locale.items_per_page);
  27. };
  28. var handleChange = function handleChange(e) {
  29. setGoInputText(e.target.value);
  30. };
  31. var handleBlur = function handleBlur(e) {
  32. if (goButton || goInputText === '') {
  33. return;
  34. }
  35. setGoInputText('');
  36. if (e.relatedTarget && (e.relatedTarget.className.indexOf("".concat(rootPrefixCls, "-item-link")) >= 0 || e.relatedTarget.className.indexOf("".concat(rootPrefixCls, "-item")) >= 0)) {
  37. return;
  38. }
  39. quickGo === null || quickGo === void 0 || quickGo(getValidValue());
  40. };
  41. var go = function go(e) {
  42. if (goInputText === '') {
  43. return;
  44. }
  45. if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
  46. setGoInputText('');
  47. quickGo === null || quickGo === void 0 || quickGo(getValidValue());
  48. }
  49. };
  50. var getPageSizeOptions = function getPageSizeOptions() {
  51. if (pageSizeOptions.some(function (option) {
  52. return option.toString() === pageSize.toString();
  53. })) {
  54. return pageSizeOptions;
  55. }
  56. return pageSizeOptions.concat([pageSize]).sort(function (a, b) {
  57. var numberA = Number.isNaN(Number(a)) ? 0 : Number(a);
  58. var numberB = Number.isNaN(Number(b)) ? 0 : Number(b);
  59. return numberA - numberB;
  60. });
  61. };
  62. // ============== cls ==============
  63. var prefixCls = "".concat(rootPrefixCls, "-options");
  64. // ============== render ==============
  65. if (!showSizeChanger && !quickGo) {
  66. return null;
  67. }
  68. var changeSelect = null;
  69. var goInput = null;
  70. var gotoButton = null;
  71. // >>>>> Size Changer
  72. if (showSizeChanger && sizeChangerRender) {
  73. changeSelect = sizeChangerRender({
  74. disabled: disabled,
  75. size: pageSize,
  76. onSizeChange: function onSizeChange(nextValue) {
  77. changeSize === null || changeSize === void 0 || changeSize(Number(nextValue));
  78. },
  79. 'aria-label': locale.page_size,
  80. className: "".concat(prefixCls, "-size-changer"),
  81. options: getPageSizeOptions().map(function (opt) {
  82. return {
  83. label: mergeBuildOptionText(opt),
  84. value: opt
  85. };
  86. })
  87. });
  88. }
  89. // >>>>> Quick Go
  90. if (quickGo) {
  91. if (goButton) {
  92. gotoButton = typeof goButton === 'boolean' ? /*#__PURE__*/React.createElement("button", {
  93. type: "button",
  94. onClick: go,
  95. onKeyUp: go,
  96. disabled: disabled,
  97. className: "".concat(prefixCls, "-quick-jumper-button")
  98. }, locale.jump_to_confirm) : /*#__PURE__*/React.createElement("span", {
  99. onClick: go,
  100. onKeyUp: go
  101. }, goButton);
  102. }
  103. goInput = /*#__PURE__*/React.createElement("div", {
  104. className: "".concat(prefixCls, "-quick-jumper")
  105. }, locale.jump_to, /*#__PURE__*/React.createElement("input", {
  106. disabled: disabled,
  107. type: "text",
  108. value: goInputText,
  109. onChange: handleChange,
  110. onKeyUp: go,
  111. onBlur: handleBlur,
  112. "aria-label": locale.page
  113. }), locale.page, gotoButton);
  114. }
  115. return /*#__PURE__*/React.createElement("li", {
  116. className: prefixCls
  117. }, changeSelect, goInput);
  118. };
  119. if (process.env.NODE_ENV !== 'production') {
  120. Options.displayName = 'Options';
  121. }
  122. export default Options;