Pagination.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof3 = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  11. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  12. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  13. var _classnames = _interopRequireDefault(require("classnames"));
  14. var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
  15. var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
  16. var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
  17. var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
  18. var _react = _interopRequireWildcard(require("react"));
  19. var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
  20. var _Options = _interopRequireDefault(require("./Options"));
  21. var _Pager = _interopRequireDefault(require("./Pager"));
  22. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
  23. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  24. var defaultItemRender = function defaultItemRender(page, type, element) {
  25. return element;
  26. };
  27. function noop() {}
  28. function isInteger(v) {
  29. var value = Number(v);
  30. return typeof value === 'number' && !Number.isNaN(value) && isFinite(value) && Math.floor(value) === value;
  31. }
  32. function calculatePage(p, pageSize, total) {
  33. var _pageSize = typeof p === 'undefined' ? pageSize : p;
  34. return Math.floor((total - 1) / _pageSize) + 1;
  35. }
  36. var Pagination = function Pagination(props) {
  37. var _props$prefixCls = props.prefixCls,
  38. prefixCls = _props$prefixCls === void 0 ? 'rc-pagination' : _props$prefixCls,
  39. _props$selectPrefixCl = props.selectPrefixCls,
  40. selectPrefixCls = _props$selectPrefixCl === void 0 ? 'rc-select' : _props$selectPrefixCl,
  41. className = props.className,
  42. currentProp = props.current,
  43. _props$defaultCurrent = props.defaultCurrent,
  44. defaultCurrent = _props$defaultCurrent === void 0 ? 1 : _props$defaultCurrent,
  45. _props$total = props.total,
  46. total = _props$total === void 0 ? 0 : _props$total,
  47. pageSizeProp = props.pageSize,
  48. _props$defaultPageSiz = props.defaultPageSize,
  49. defaultPageSize = _props$defaultPageSiz === void 0 ? 10 : _props$defaultPageSiz,
  50. _props$onChange = props.onChange,
  51. onChange = _props$onChange === void 0 ? noop : _props$onChange,
  52. hideOnSinglePage = props.hideOnSinglePage,
  53. align = props.align,
  54. _props$showPrevNextJu = props.showPrevNextJumpers,
  55. showPrevNextJumpers = _props$showPrevNextJu === void 0 ? true : _props$showPrevNextJu,
  56. showQuickJumper = props.showQuickJumper,
  57. showLessItems = props.showLessItems,
  58. _props$showTitle = props.showTitle,
  59. showTitle = _props$showTitle === void 0 ? true : _props$showTitle,
  60. _props$onShowSizeChan = props.onShowSizeChange,
  61. onShowSizeChange = _props$onShowSizeChan === void 0 ? noop : _props$onShowSizeChan,
  62. _props$locale = props.locale,
  63. locale = _props$locale === void 0 ? _zh_CN.default : _props$locale,
  64. style = props.style,
  65. _props$totalBoundaryS = props.totalBoundaryShowSizeChanger,
  66. totalBoundaryShowSizeChanger = _props$totalBoundaryS === void 0 ? 50 : _props$totalBoundaryS,
  67. disabled = props.disabled,
  68. simple = props.simple,
  69. showTotal = props.showTotal,
  70. _props$showSizeChange = props.showSizeChanger,
  71. showSizeChanger = _props$showSizeChange === void 0 ? total > totalBoundaryShowSizeChanger : _props$showSizeChange,
  72. sizeChangerRender = props.sizeChangerRender,
  73. pageSizeOptions = props.pageSizeOptions,
  74. _props$itemRender = props.itemRender,
  75. itemRender = _props$itemRender === void 0 ? defaultItemRender : _props$itemRender,
  76. jumpPrevIcon = props.jumpPrevIcon,
  77. jumpNextIcon = props.jumpNextIcon,
  78. prevIcon = props.prevIcon,
  79. nextIcon = props.nextIcon;
  80. var paginationRef = _react.default.useRef(null);
  81. var _useMergedState = (0, _useMergedState5.default)(10, {
  82. value: pageSizeProp,
  83. defaultValue: defaultPageSize
  84. }),
  85. _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
  86. pageSize = _useMergedState2[0],
  87. setPageSize = _useMergedState2[1];
  88. var _useMergedState3 = (0, _useMergedState5.default)(1, {
  89. value: currentProp,
  90. defaultValue: defaultCurrent,
  91. postState: function postState(c) {
  92. return Math.max(1, Math.min(c, calculatePage(undefined, pageSize, total)));
  93. }
  94. }),
  95. _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
  96. current = _useMergedState4[0],
  97. setCurrent = _useMergedState4[1];
  98. var _React$useState = _react.default.useState(current),
  99. _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
  100. internalInputVal = _React$useState2[0],
  101. setInternalInputVal = _React$useState2[1];
  102. (0, _react.useEffect)(function () {
  103. setInternalInputVal(current);
  104. }, [current]);
  105. var hasOnChange = onChange !== noop;
  106. var hasCurrent = ('current' in props);
  107. if (process.env.NODE_ENV !== 'production') {
  108. (0, _warning.default)(hasCurrent ? hasOnChange : true, 'You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.');
  109. }
  110. var jumpPrevPage = Math.max(1, current - (showLessItems ? 3 : 5));
  111. var jumpNextPage = Math.min(calculatePage(undefined, pageSize, total), current + (showLessItems ? 3 : 5));
  112. function getItemIcon(icon, label) {
  113. var iconNode = icon || /*#__PURE__*/_react.default.createElement("button", {
  114. type: "button",
  115. "aria-label": label,
  116. className: "".concat(prefixCls, "-item-link")
  117. });
  118. if (typeof icon === 'function') {
  119. iconNode = /*#__PURE__*/_react.default.createElement(icon, (0, _objectSpread2.default)({}, props));
  120. }
  121. return iconNode;
  122. }
  123. function getValidValue(e) {
  124. var inputValue = e.target.value;
  125. var allPages = calculatePage(undefined, pageSize, total);
  126. var value;
  127. if (inputValue === '') {
  128. value = inputValue;
  129. } else if (Number.isNaN(Number(inputValue))) {
  130. value = internalInputVal;
  131. } else if (inputValue >= allPages) {
  132. value = allPages;
  133. } else {
  134. value = Number(inputValue);
  135. }
  136. return value;
  137. }
  138. function isValid(page) {
  139. return isInteger(page) && page !== current && isInteger(total) && total > 0;
  140. }
  141. var shouldDisplayQuickJumper = total > pageSize ? showQuickJumper : false;
  142. /**
  143. * prevent "up arrow" key reseting cursor position within textbox
  144. * @see https://stackoverflow.com/a/1081114
  145. */
  146. function handleKeyDown(event) {
  147. if (event.keyCode === _KeyCode.default.UP || event.keyCode === _KeyCode.default.DOWN) {
  148. event.preventDefault();
  149. }
  150. }
  151. function handleKeyUp(event) {
  152. var value = getValidValue(event);
  153. if (value !== internalInputVal) {
  154. setInternalInputVal(value);
  155. }
  156. switch (event.keyCode) {
  157. case _KeyCode.default.ENTER:
  158. handleChange(value);
  159. break;
  160. case _KeyCode.default.UP:
  161. handleChange(value - 1);
  162. break;
  163. case _KeyCode.default.DOWN:
  164. handleChange(value + 1);
  165. break;
  166. default:
  167. break;
  168. }
  169. }
  170. function handleBlur(event) {
  171. handleChange(getValidValue(event));
  172. }
  173. function changePageSize(size) {
  174. var newCurrent = calculatePage(size, pageSize, total);
  175. var nextCurrent = current > newCurrent && newCurrent !== 0 ? newCurrent : current;
  176. setPageSize(size);
  177. setInternalInputVal(nextCurrent);
  178. onShowSizeChange === null || onShowSizeChange === void 0 || onShowSizeChange(current, size);
  179. setCurrent(nextCurrent);
  180. onChange === null || onChange === void 0 || onChange(nextCurrent, size);
  181. }
  182. function handleChange(page) {
  183. if (isValid(page) && !disabled) {
  184. var currentPage = calculatePage(undefined, pageSize, total);
  185. var newPage = page;
  186. if (page > currentPage) {
  187. newPage = currentPage;
  188. } else if (page < 1) {
  189. newPage = 1;
  190. }
  191. if (newPage !== internalInputVal) {
  192. setInternalInputVal(newPage);
  193. }
  194. setCurrent(newPage);
  195. onChange === null || onChange === void 0 || onChange(newPage, pageSize);
  196. return newPage;
  197. }
  198. return current;
  199. }
  200. var hasPrev = current > 1;
  201. var hasNext = current < calculatePage(undefined, pageSize, total);
  202. function prevHandle() {
  203. if (hasPrev) handleChange(current - 1);
  204. }
  205. function nextHandle() {
  206. if (hasNext) handleChange(current + 1);
  207. }
  208. function jumpPrevHandle() {
  209. handleChange(jumpPrevPage);
  210. }
  211. function jumpNextHandle() {
  212. handleChange(jumpNextPage);
  213. }
  214. function runIfEnter(event, callback) {
  215. if (event.key === 'Enter' || event.charCode === _KeyCode.default.ENTER || event.keyCode === _KeyCode.default.ENTER) {
  216. for (var _len = arguments.length, restParams = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
  217. restParams[_key - 2] = arguments[_key];
  218. }
  219. callback.apply(void 0, restParams);
  220. }
  221. }
  222. function runIfEnterPrev(event) {
  223. runIfEnter(event, prevHandle);
  224. }
  225. function runIfEnterNext(event) {
  226. runIfEnter(event, nextHandle);
  227. }
  228. function runIfEnterJumpPrev(event) {
  229. runIfEnter(event, jumpPrevHandle);
  230. }
  231. function runIfEnterJumpNext(event) {
  232. runIfEnter(event, jumpNextHandle);
  233. }
  234. function renderPrev(prevPage) {
  235. var prevButton = itemRender(prevPage, 'prev', getItemIcon(prevIcon, 'prev page'));
  236. return /*#__PURE__*/_react.default.isValidElement(prevButton) ? /*#__PURE__*/_react.default.cloneElement(prevButton, {
  237. disabled: !hasPrev
  238. }) : prevButton;
  239. }
  240. function renderNext(nextPage) {
  241. var nextButton = itemRender(nextPage, 'next', getItemIcon(nextIcon, 'next page'));
  242. return /*#__PURE__*/_react.default.isValidElement(nextButton) ? /*#__PURE__*/_react.default.cloneElement(nextButton, {
  243. disabled: !hasNext
  244. }) : nextButton;
  245. }
  246. function handleGoTO(event) {
  247. if (event.type === 'click' || event.keyCode === _KeyCode.default.ENTER) {
  248. handleChange(internalInputVal);
  249. }
  250. }
  251. var jumpPrev = null;
  252. var dataOrAriaAttributeProps = (0, _pickAttrs.default)(props, {
  253. aria: true,
  254. data: true
  255. });
  256. var totalText = showTotal && /*#__PURE__*/_react.default.createElement("li", {
  257. className: "".concat(prefixCls, "-total-text")
  258. }, showTotal(total, [total === 0 ? 0 : (current - 1) * pageSize + 1, current * pageSize > total ? total : current * pageSize]));
  259. var jumpNext = null;
  260. var allPages = calculatePage(undefined, pageSize, total);
  261. // ================== Render ==================
  262. // When hideOnSinglePage is true and there is only 1 page, hide the pager
  263. if (hideOnSinglePage && total <= pageSize) {
  264. return null;
  265. }
  266. var pagerList = [];
  267. var pagerProps = {
  268. rootPrefixCls: prefixCls,
  269. onClick: handleChange,
  270. onKeyPress: runIfEnter,
  271. showTitle: showTitle,
  272. itemRender: itemRender,
  273. page: -1
  274. };
  275. var prevPage = current - 1 > 0 ? current - 1 : 0;
  276. var nextPage = current + 1 < allPages ? current + 1 : allPages;
  277. var goButton = showQuickJumper && showQuickJumper.goButton;
  278. // ================== Simple ==================
  279. // FIXME: ts type
  280. var isReadOnly = (0, _typeof2.default)(simple) === 'object' ? simple.readOnly : !simple;
  281. var gotoButton = goButton;
  282. var simplePager = null;
  283. if (simple) {
  284. // ====== Simple quick jump ======
  285. if (goButton) {
  286. if (typeof goButton === 'boolean') {
  287. gotoButton = /*#__PURE__*/_react.default.createElement("button", {
  288. type: "button",
  289. onClick: handleGoTO,
  290. onKeyUp: handleGoTO
  291. }, locale.jump_to_confirm);
  292. } else {
  293. gotoButton = /*#__PURE__*/_react.default.createElement("span", {
  294. onClick: handleGoTO,
  295. onKeyUp: handleGoTO
  296. }, goButton);
  297. }
  298. gotoButton = /*#__PURE__*/_react.default.createElement("li", {
  299. title: showTitle ? "".concat(locale.jump_to).concat(current, "/").concat(allPages) : null,
  300. className: "".concat(prefixCls, "-simple-pager")
  301. }, gotoButton);
  302. }
  303. simplePager = /*#__PURE__*/_react.default.createElement("li", {
  304. title: showTitle ? "".concat(current, "/").concat(allPages) : null,
  305. className: "".concat(prefixCls, "-simple-pager")
  306. }, isReadOnly ? internalInputVal : /*#__PURE__*/_react.default.createElement("input", {
  307. type: "text",
  308. "aria-label": locale.jump_to,
  309. value: internalInputVal,
  310. disabled: disabled,
  311. onKeyDown: handleKeyDown,
  312. onKeyUp: handleKeyUp,
  313. onChange: handleKeyUp,
  314. onBlur: handleBlur,
  315. size: 3
  316. }), /*#__PURE__*/_react.default.createElement("span", {
  317. className: "".concat(prefixCls, "-slash")
  318. }, "/"), allPages);
  319. }
  320. // ====================== Normal ======================
  321. var pageBufferSize = showLessItems ? 1 : 2;
  322. if (allPages <= 3 + pageBufferSize * 2) {
  323. if (!allPages) {
  324. pagerList.push( /*#__PURE__*/_react.default.createElement(_Pager.default, (0, _extends2.default)({}, pagerProps, {
  325. key: "noPager",
  326. page: 1,
  327. className: "".concat(prefixCls, "-item-disabled")
  328. })));
  329. }
  330. for (var i = 1; i <= allPages; i += 1) {
  331. pagerList.push( /*#__PURE__*/_react.default.createElement(_Pager.default, (0, _extends2.default)({}, pagerProps, {
  332. key: i,
  333. page: i,
  334. active: current === i
  335. })));
  336. }
  337. } else {
  338. var prevItemTitle = showLessItems ? locale.prev_3 : locale.prev_5;
  339. var nextItemTitle = showLessItems ? locale.next_3 : locale.next_5;
  340. var jumpPrevContent = itemRender(jumpPrevPage, 'jump-prev', getItemIcon(jumpPrevIcon, 'prev page'));
  341. var jumpNextContent = itemRender(jumpNextPage, 'jump-next', getItemIcon(jumpNextIcon, 'next page'));
  342. if (showPrevNextJumpers) {
  343. jumpPrev = jumpPrevContent ? /*#__PURE__*/_react.default.createElement("li", {
  344. title: showTitle ? prevItemTitle : null,
  345. key: "prev",
  346. onClick: jumpPrevHandle,
  347. tabIndex: 0,
  348. onKeyDown: runIfEnterJumpPrev,
  349. className: (0, _classnames.default)("".concat(prefixCls, "-jump-prev"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-jump-prev-custom-icon"), !!jumpPrevIcon))
  350. }, jumpPrevContent) : null;
  351. jumpNext = jumpNextContent ? /*#__PURE__*/_react.default.createElement("li", {
  352. title: showTitle ? nextItemTitle : null,
  353. key: "next",
  354. onClick: jumpNextHandle,
  355. tabIndex: 0,
  356. onKeyDown: runIfEnterJumpNext,
  357. className: (0, _classnames.default)("".concat(prefixCls, "-jump-next"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-jump-next-custom-icon"), !!jumpNextIcon))
  358. }, jumpNextContent) : null;
  359. }
  360. var left = Math.max(1, current - pageBufferSize);
  361. var right = Math.min(current + pageBufferSize, allPages);
  362. if (current - 1 <= pageBufferSize) {
  363. right = 1 + pageBufferSize * 2;
  364. }
  365. if (allPages - current <= pageBufferSize) {
  366. left = allPages - pageBufferSize * 2;
  367. }
  368. for (var _i = left; _i <= right; _i += 1) {
  369. pagerList.push( /*#__PURE__*/_react.default.createElement(_Pager.default, (0, _extends2.default)({}, pagerProps, {
  370. key: _i,
  371. page: _i,
  372. active: current === _i
  373. })));
  374. }
  375. if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
  376. pagerList[0] = /*#__PURE__*/_react.default.cloneElement(pagerList[0], {
  377. className: (0, _classnames.default)("".concat(prefixCls, "-item-after-jump-prev"), pagerList[0].props.className)
  378. });
  379. pagerList.unshift(jumpPrev);
  380. }
  381. if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
  382. var lastOne = pagerList[pagerList.length - 1];
  383. pagerList[pagerList.length - 1] = /*#__PURE__*/_react.default.cloneElement(lastOne, {
  384. className: (0, _classnames.default)("".concat(prefixCls, "-item-before-jump-next"), lastOne.props.className)
  385. });
  386. pagerList.push(jumpNext);
  387. }
  388. if (left !== 1) {
  389. pagerList.unshift( /*#__PURE__*/_react.default.createElement(_Pager.default, (0, _extends2.default)({}, pagerProps, {
  390. key: 1,
  391. page: 1
  392. })));
  393. }
  394. if (right !== allPages) {
  395. pagerList.push( /*#__PURE__*/_react.default.createElement(_Pager.default, (0, _extends2.default)({}, pagerProps, {
  396. key: allPages,
  397. page: allPages
  398. })));
  399. }
  400. }
  401. var prev = renderPrev(prevPage);
  402. if (prev) {
  403. var prevDisabled = !hasPrev || !allPages;
  404. prev = /*#__PURE__*/_react.default.createElement("li", {
  405. title: showTitle ? locale.prev_page : null,
  406. onClick: prevHandle,
  407. tabIndex: prevDisabled ? null : 0,
  408. onKeyDown: runIfEnterPrev,
  409. className: (0, _classnames.default)("".concat(prefixCls, "-prev"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-disabled"), prevDisabled)),
  410. "aria-disabled": prevDisabled
  411. }, prev);
  412. }
  413. var next = renderNext(nextPage);
  414. if (next) {
  415. var nextDisabled, nextTabIndex;
  416. if (simple) {
  417. nextDisabled = !hasNext;
  418. nextTabIndex = hasPrev ? 0 : null;
  419. } else {
  420. nextDisabled = !hasNext || !allPages;
  421. nextTabIndex = nextDisabled ? null : 0;
  422. }
  423. next = /*#__PURE__*/_react.default.createElement("li", {
  424. title: showTitle ? locale.next_page : null,
  425. onClick: nextHandle,
  426. tabIndex: nextTabIndex,
  427. onKeyDown: runIfEnterNext,
  428. className: (0, _classnames.default)("".concat(prefixCls, "-next"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-disabled"), nextDisabled)),
  429. "aria-disabled": nextDisabled
  430. }, next);
  431. }
  432. var cls = (0, _classnames.default)(prefixCls, className, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-start"), align === 'start'), "".concat(prefixCls, "-center"), align === 'center'), "".concat(prefixCls, "-end"), align === 'end'), "".concat(prefixCls, "-simple"), simple), "".concat(prefixCls, "-disabled"), disabled));
  433. return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
  434. className: cls,
  435. style: style,
  436. ref: paginationRef
  437. }, dataOrAriaAttributeProps), totalText, prev, simple ? simplePager : pagerList, next, /*#__PURE__*/_react.default.createElement(_Options.default, {
  438. locale: locale,
  439. rootPrefixCls: prefixCls,
  440. disabled: disabled,
  441. selectPrefixCls: selectPrefixCls,
  442. changeSize: changePageSize,
  443. pageSize: pageSize,
  444. pageSizeOptions: pageSizeOptions,
  445. quickGo: shouldDisplayQuickJumper ? handleChange : null,
  446. goButton: gotoButton,
  447. showSizeChanger: showSizeChanger,
  448. sizeChangerRender: sizeChangerRender
  449. }));
  450. };
  451. if (process.env.NODE_ENV !== 'production') {
  452. Pagination.displayName = 'Pagination';
  453. }
  454. var _default = exports.default = Pagination;