rc-pagination - npm Package Compare versions

Comparing version 4.2.0 to 4.3.0

es/interface.d.ts

 import type React from 'react';
+import type { SelectProps } from 'rc-select';
 export interface PaginationLocale {
@@ -28,3 +29,3 @@ items_per_page?: string;
     align: 'start' | 'center' | 'end';
-    showSizeChanger: boolean;
+    showSizeChanger: boolean | SelectProps;
     showLessItems: boolean;
@@ -31,0 +32,0 @@ showPrevNextJumpers: boolean;

es/Options.d.ts

 import type { SelectProps } from 'rc-select';
 import type { OptionProps } from 'rc-select/es/Option';
 import React from 'react';
-import type { PaginationLocale } from './interface';
+import type { PaginationLocale, PaginationProps } from './interface';
 interface InternalSelectProps extends SelectProps {
@@ -25,4 +25,5 @@ /**
     };
+    showSizeChanger: PaginationProps['showSizeChanger'];
 }
 declare const Options: React.FC<OptionsProps>;
 export default Options;

es/Options.js

@@ -0,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import KEYCODE from "rc-util/es/KeyCode";
+import classNames from 'classnames';
 import React from 'react';
@@ -17,3 +20,4 @@ var defaultPageSizeOptions = ['10', '20', '50', '100'];
     disabled = props.disabled,
-    buildOptionText = props.buildOptionText;
+    buildOptionText = props.buildOptionText,
+    showSizeChanger = props.showSizeChanger;
   var _React$useState = React.useState(''),
@@ -29,4 +33,8 @@ _React$useState2 = _slicedToArray(_React$useState, 2),
   };
-  var changeSizeHandle = function changeSizeHandle(value) {
+  var changeSizeHandle = function changeSizeHandle(value, option) {
     changeSize === null || changeSize === void 0 || changeSize(Number(value));
+    if (_typeof(showSizeChanger) === 'object') {
+      var _showSizeChanger$onCh;
+      (_showSizeChanger$onCh = showSizeChanger.onChange) === null || _showSizeChanger$onCh === void 0 || _showSizeChanger$onCh.call(showSizeChanger, value, option);
+    }
   };
@@ -72,3 +80,3 @@ var handleChange = function handleChange(e) {
 
-  if (!changeSize && !quickGo) {
+  if (!showSizeChanger && !quickGo) {
     return null;
@@ -79,4 +87,8 @@ }
   var gotoButton = null;
-  if (changeSize && Select) {
-    var options = getPageSizeOptions().map(function (opt, i) {
+  if (showSizeChanger && Select) {
+    var _ref = _typeof(showSizeChanger) === 'object' ? showSizeChanger : {},
+      showSizeChangerOptions = _ref.options,
+      showSizeChangerClassName = _ref.className;
+    // use showSizeChanger.options if existed, otherwise use pageSizeOptions
+    var options = showSizeChangerOptions ? undefined : getPageSizeOptions().map(function (opt, i) {
       return /*#__PURE__*/React.createElement(Select.Option, {
@@ -87,11 +99,9 @@ key: i,
     });
-    changeSelect = /*#__PURE__*/React.createElement(Select, {
+    changeSelect = /*#__PURE__*/React.createElement(Select, _extends({
       disabled: disabled,
       prefixCls: selectPrefixCls,
       showSearch: false,
-      className: "".concat(prefixCls, "-size-changer"),
-      optionLabelProp: "children",
+      optionLabelProp: showSizeChangerOptions ? 'label' : 'children',
       popupMatchSelectWidth: false,
       value: (pageSize || pageSizeOptions[0]).toString(),
-      onChange: changeSizeHandle,
       getPopupContainer: function getPopupContainer(triggerNode) {
@@ -102,3 +112,7 @@ return triggerNode.parentNode;
       defaultOpen: false
-    }, options);
+    }, _typeof(showSizeChanger) === 'object' ? showSizeChanger : null, {
+      className: classNames("".concat(prefixCls, "-size-changer"), showSizeChangerClassName),
+      options: showSizeChangerOptions,
+      onChange: changeSizeHandle
+    }), options);
   }
@@ -105,0 +119,0 @@ if (quickGo) {

es/Pager.js

@@ -6,3 +6,2 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var Pager = function Pager(props) {
-  var _classNames;
   var rootPrefixCls = props.rootPrefixCls,
@@ -17,3 +16,3 @@ page = props.page,
   var prefixCls = "".concat(rootPrefixCls, "-item");
-  var cls = classNames(prefixCls, "".concat(prefixCls, "-").concat(page), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-active"), active), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), !page), _classNames), className);
+  var cls = classNames(prefixCls, "".concat(prefixCls, "-").concat(page), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-active"), active), "".concat(prefixCls, "-disabled"), !page), className);
   var handleClick = function handleClick() {
@@ -20,0 +19,0 @@ onClick(page);

es/Pagination.js

@@ -28,3 +28,2 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var Pagination = function Pagination(props) {
-  var _classNames5;
   var _props$prefixCls = props.prefixCls,
@@ -64,3 +63,4 @@ prefixCls = _props$prefixCls === void 0 ? 'rc-pagination' : _props$prefixCls,
     showTotal = props.showTotal,
-    showSizeChangerProp = props.showSizeChanger,
+    _props$showSizeChange = props.showSizeChanger,
+    showSizeChanger = _props$showSizeChange === void 0 ? total > totalBoundaryShowSizeChanger : _props$showSizeChange,
     pageSizeOptions = props.pageSizeOptions,
@@ -196,3 +196,2 @@ _props$itemRender = props.itemRender,
   var hasNext = current < calculatePage(undefined, pageSize, total);
-  var showSizeChanger = showSizeChangerProp !== null && showSizeChangerProp !== void 0 ? showSizeChangerProp : total > totalBoundaryShowSizeChanger;
   function prevHandle() {
@@ -430,3 +429,3 @@ if (hasPrev) handleChange(current - 1);
   }
-  var cls = classNames(prefixCls, className, (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-start"), align === 'start'), _defineProperty(_classNames5, "".concat(prefixCls, "-center"), align === 'center'), _defineProperty(_classNames5, "".concat(prefixCls, "-end"), align === 'end'), _defineProperty(_classNames5, "".concat(prefixCls, "-simple"), simple), _defineProperty(_classNames5, "".concat(prefixCls, "-disabled"), disabled), _classNames5));
+  var cls = classNames(prefixCls, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-start"), align === 'start'), "".concat(prefixCls, "-center"), align === 'center'), "".concat(prefixCls, "-end"), align === 'end'), "".concat(prefixCls, "-simple"), simple), "".concat(prefixCls, "-disabled"), disabled));
   return /*#__PURE__*/React.createElement("ul", _extends({
@@ -442,7 +441,8 @@ className: cls,
     selectPrefixCls: selectPrefixCls,
-    changeSize: showSizeChanger ? changePageSize : null,
+    changeSize: changePageSize,
     pageSize: pageSize,
     pageSizeOptions: pageSizeOptions,
     quickGo: shouldDisplayQuickJumper ? handleChange : null,
-    goButton: gotoButton
+    goButton: gotoButton,
+    showSizeChanger: showSizeChanger
   }));
@@ -449,0 +449,0 @@ };

lib/interface.d.ts

 import type React from 'react';
+import type { SelectProps } from 'rc-select';
 export interface PaginationLocale {
@@ -28,3 +29,3 @@ items_per_page?: string;
     align: 'start' | 'center' | 'end';
-    showSizeChanger: boolean;
+    showSizeChanger: boolean | SelectProps;
     showLessItems: boolean;
@@ -31,0 +32,0 @@ showPrevNextJumpers: boolean;

lib/Options.d.ts

 import type { SelectProps } from 'rc-select';
 import type { OptionProps } from 'rc-select/es/Option';
 import React from 'react';
-import type { PaginationLocale } from './interface';
+import type { PaginationLocale, PaginationProps } from './interface';
 interface InternalSelectProps extends SelectProps {
@@ -25,4 +25,5 @@ /**
     };
+    showSizeChanger: PaginationProps['showSizeChanger'];
 }
 declare const Options: React.FC<OptionsProps>;
 export default Options;

lib/Options.js

@@ -8,4 +8,7 @@ "use strict";
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
@@ -25,3 +28,4 @@ var defaultPageSizeOptions = ['10', '20', '50', '100'];
     disabled = props.disabled,
-    buildOptionText = props.buildOptionText;
+    buildOptionText = props.buildOptionText,
+    showSizeChanger = props.showSizeChanger;
   var _React$useState = _react.default.useState(''),
@@ -37,4 +41,8 @@ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
   };
-  var changeSizeHandle = function changeSizeHandle(value) {
+  var changeSizeHandle = function changeSizeHandle(value, option) {
     changeSize === null || changeSize === void 0 || changeSize(Number(value));
+    if ((0, _typeof2.default)(showSizeChanger) === 'object') {
+      var _showSizeChanger$onCh;
+      (_showSizeChanger$onCh = showSizeChanger.onChange) === null || _showSizeChanger$onCh === void 0 || _showSizeChanger$onCh.call(showSizeChanger, value, option);
+    }
   };
@@ -80,3 +88,3 @@ var handleChange = function handleChange(e) {
 
-  if (!changeSize && !quickGo) {
+  if (!showSizeChanger && !quickGo) {
     return null;
@@ -87,4 +95,8 @@ }
   var gotoButton = null;
-  if (changeSize && Select) {
-    var options = getPageSizeOptions().map(function (opt, i) {
+  if (showSizeChanger && Select) {
+    var _ref = (0, _typeof2.default)(showSizeChanger) === 'object' ? showSizeChanger : {},
+      showSizeChangerOptions = _ref.options,
+      showSizeChangerClassName = _ref.className;
+    // use showSizeChanger.options if existed, otherwise use pageSizeOptions
+    var options = showSizeChangerOptions ? undefined : getPageSizeOptions().map(function (opt, i) {
       return /*#__PURE__*/_react.default.createElement(Select.Option, {
@@ -95,11 +107,9 @@ key: i,
     });
-    changeSelect = /*#__PURE__*/_react.default.createElement(Select, {
+    changeSelect = /*#__PURE__*/_react.default.createElement(Select, (0, _extends2.default)({
       disabled: disabled,
       prefixCls: selectPrefixCls,
       showSearch: false,
-      className: "".concat(prefixCls, "-size-changer"),
-      optionLabelProp: "children",
+      optionLabelProp: showSizeChangerOptions ? 'label' : 'children',
       popupMatchSelectWidth: false,
       value: (pageSize || pageSizeOptions[0]).toString(),
-      onChange: changeSizeHandle,
       getPopupContainer: function getPopupContainer(triggerNode) {
@@ -110,3 +120,7 @@ return triggerNode.parentNode;
       defaultOpen: false
-    }, options);
+    }, (0, _typeof2.default)(showSizeChanger) === 'object' ? showSizeChanger : null, {
+      className: (0, _classnames.default)("".concat(prefixCls, "-size-changer"), showSizeChangerClassName),
+      options: showSizeChangerOptions,
+      onChange: changeSizeHandle
+    }), options);
   }
@@ -113,0 +127,0 @@ if (quickGo) {

lib/Pager.js

@@ -14,3 +14,2 @@ "use strict";
 var Pager = function Pager(props) {
-  var _classNames;
   var rootPrefixCls = props.rootPrefixCls,
@@ -25,3 +24,3 @@ page = props.page,
   var prefixCls = "".concat(rootPrefixCls, "-item");
-  var cls = (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(page), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-active"), active), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), !page), _classNames), className);
+  var cls = (0, _classnames.default)(prefixCls, "".concat(prefixCls, "-").concat(page), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(prefixCls, "-active"), active), "".concat(prefixCls, "-disabled"), !page), className);
   var handleClick = function handleClick() {
@@ -28,0 +27,0 @@ onClick(page);

lib/Pagination.js

@@ -38,3 +38,2 @@ "use strict";
 var Pagination = function Pagination(props) {
-  var _classNames5;
   var _props$prefixCls = props.prefixCls,
@@ -74,3 +73,4 @@ prefixCls = _props$prefixCls === void 0 ? 'rc-pagination' : _props$prefixCls,
     showTotal = props.showTotal,
-    showSizeChangerProp = props.showSizeChanger,
+    _props$showSizeChange = props.showSizeChanger,
+    showSizeChanger = _props$showSizeChange === void 0 ? total > totalBoundaryShowSizeChanger : _props$showSizeChange,
     pageSizeOptions = props.pageSizeOptions,
@@ -206,3 +206,2 @@ _props$itemRender = props.itemRender,
   var hasNext = current < calculatePage(undefined, pageSize, total);
-  var showSizeChanger = showSizeChangerProp !== null && showSizeChangerProp !== void 0 ? showSizeChangerProp : total > totalBoundaryShowSizeChanger;
   function prevHandle() {
@@ -440,3 +439,3 @@ if (hasPrev) handleChange(current - 1);
   }
-  var cls = (0, _classnames.default)(prefixCls, className, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-start"), align === 'start'), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-center"), align === 'center'), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-end"), align === 'end'), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-simple"), simple), (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-disabled"), disabled), _classNames5));
+  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));
   return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
@@ -452,7 +451,8 @@ className: cls,
     selectPrefixCls: selectPrefixCls,
-    changeSize: showSizeChanger ? changePageSize : null,
+    changeSize: changePageSize,
     pageSize: pageSize,
     pageSizeOptions: pageSizeOptions,
     quickGo: shouldDisplayQuickJumper ? handleChange : null,
-    goButton: gotoButton
+    goButton: gotoButton,
+    showSizeChanger: showSizeChanger
   }));
@@ -459,0 +459,0 @@ };

package.json

 {
   "name": "rc-pagination",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "pagination ui component for react",
@@ -42,3 +42,3 @@ "keywords": [
     "now-build": "npm run docs:build",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
@@ -53,3 +53,4 @@ "dependencies": {
     "@testing-library/jest-dom": "^6.1.5",
-    "@testing-library/react": "^15.0.4",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.2.2",
@@ -64,3 +65,3 @@ "@types/react": "^18.0.0",
     "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-unicorn": "^52.0.0",
+    "eslint-plugin-unicorn": "^55.0.0",
     "father": "^4.0.0",
@@ -92,6 +93,5 @@ "gh-pages": "^6.1.0",
     "**/*.{js,jsx,tsx,ts,md,json}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   }
 }

README.md

@@ -55,31 +55,32 @@ # rc-pagination
 
-| Parameter                    | Description                                               | Type                                                                                                                                                 | Default                                                                                |
-| ---------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| disabled                     | disable pagination                                        | Bool                                                                                                                                                 | -                                                                                      |
-| align                        | align of pagination                                       | start \| center \| end                                                                                                                               | undefined                                                                              |
-| defaultCurrent               | uncontrolled current page                                 | Number                                                                                                                                               | 1                                                                                      |
-| current                      | current page                                              | Number                                                                                                                                               | undefined                                                                              |
-| total                        | items total count                                         | Number                                                                                                                                               | 0                                                                                      |
-| defaultPageSize              | default items per page                                    | Number                                                                                                                                               | 10                                                                                     |
-| pageSize                     | items per page                                            | Number                                                                                                                                               | 10                                                                                     |
-| onChange                     | page change callback                                      | Function(current, pageSize)                                                                                                                          | -                                                                                      |
-| showSizeChanger              | show pageSize changer                                     | Bool                                                                                                                                                 | `false` when total less then `totalBoundaryShowSizeChanger`, `true` when otherwise     |
-| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number                                                                                                                                               | 50                                                                                     |
-| pageSizeOptions              | specify the sizeChanger selections                        | Array<String>                                                                                                                                        | ['10', '20', '50', '100']                                                              |
-| onShowSizeChange             | pageSize change callback                                  | Function(current, size)                                                                                                                              | -                                                                                      |
-| hideOnSinglePage             | hide on single page                                       | Bool                                                                                                                                                 | false                                                                                  |
-| showPrevNextJumpers          | show jump-prev, jump-next                                 | Bool                                                                                                                                                 | true                                                                                   |
-| showQuickJumper              | show quick goto jumper                                    | Bool / Object                                                                                                                                        | false / {goButton: true}                                                               |
-| showTotal                    | show total records and range                              | Function(total, [from, to])                                                                                                                          | -                                                                                      |
-| className                    | className of pagination                                   | String                                                                                                                                               | -                                                                                      |
-| simple                       | when set, show simple pager                               | Bool / { readOnly?: boolean; }                                                                                                                       | -                                                                                      |
-| locale                       | to set l10n config                                        | Object                                                                                                                                               | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
-| style                        | the style of pagination                                   | Object                                                                                                                                               | {}                                                                                     |
-| showLessItems                | show less page items                                      | Bool                                                                                                                                                 | false                                                                                  |
-| showTitle                    | show page items title                                     | Bool                                                                                                                                                 | true                                                                                   |
-| itemRender                   | custom page item renderer                                 | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` |                                                                                        |
-| prevIcon                     | specify the default previous icon                         | ReactNode \| (props: PaginationProps) => ReactNode                                                                                                   |                                                                                        |
-| nextIcon                     | specify the default next icon                             | ReactNode \| (props: PaginationProps) => ReactNode                                                                                                   |                                                                                        |
-| jumpPrevIcon                 | specify the default previous icon                         | ReactNode \| (props: PaginationProps) => ReactNode                                                                                                   |                                                                                        |
-| jumpNextIcon                 | specify the default next icon                             | ReactNode \| (props: PaginationProps) => ReactNode                                                                                                   |                                                                                        |
+// prettier-ignore
+| Parameter | Description | Type | Default |
+| --- | --- | --- | --- |
+| disabled | disable pagination | Bool | - |
+| align | align of pagination | start \| center \| end | undefined |
+| defaultCurrent | uncontrolled current page | Number | 1 |
+| current | current page | Number | undefined |
+| total | items total count | Number | 0 |
+| defaultPageSize | default items per page | Number | 10 |
+| pageSize | items per page | Number | 10 |
+| onChange | page change callback | Function(current, pageSize) | - |
+| showSizeChanger | show pageSize changer | boolean \| [SelectProps](https://github.com/react-component/select/blob/561f8b7d69fd5dd2cd7d917c88976cca4e539a9d/src/Select.tsx#L112) | `false` when total less than `totalBoundaryShowSizeChanger`, `true` when otherwise |
+| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
+| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
+| onShowSizeChange | pageSize change callback | Function(current, size) | - |
+| hideOnSinglePage | hide on single page | Bool | false |
+| showPrevNextJumpers | show jump-prev, jump-next | Bool | true |
+| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
+| showTotal | show total records and range | Function(total, [from, to]) | - |
+| className | className of pagination | String | - |
+| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
+| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
+| style | the style of pagination | Object | {} |
+| showLessItems | show less page items | Bool | false |
+| showTitle | show page items title | Bool | true |
+| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | |
+| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
+| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
+| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
+| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
 
@@ -86,0 +87,0 @@ ## License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

4723

increased by0.6%

Number of lines in readme file

89

increased by1.14%

Worsened metrics

Total package byte prevSize

168820

decreased by-3.07%

Dev dependency count

27

increased by3.85%

No dependency changes