@uiw/react-pagination - npm Package Compare versions

Comparing version 4.10.5 to 4.10.6

cjs/index.d.ts

@@ -7,2 +7,3 @@ import { IProps, HTMLUlProps } from '@uiw/utils';
     size?: 'default' | 'small';
+    pageSizeOptions?: number[];
     total?: number;
@@ -13,2 +14,3 @@ pageSize?: number;
     onChange?: (current: number, total: number, pageSize: number) => void;
+    onShowSizeChange?: (current: number, pageSize: number) => void;
 }
@@ -15,0 +17,0 @@ export interface PaginationState {

cjs/index.js

@@ -20,5 +20,7 @@ "use strict";
 
+var _reactSelect = _interopRequireDefault(require("@uiw/react-select"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["className", "style", "prefixCls", "alignment", "size", "total", "pageSize", "current", "onChange", "divider"];
+var _excluded = ["className", "style", "prefixCls", "alignment", "size", "total", "pageSize", "pageSizeOptions", "current", "onChange", "onShowSizeChange", "divider"];
 
@@ -38,2 +40,4 @@ function Pagination(props) {
       pageSize = _props$pageSize === void 0 ? 10 : _props$pageSize,
+      _props$pageSizeOption = props.pageSizeOptions,
+      pageSizeOptions = _props$pageSizeOption === void 0 ? [] : _props$pageSizeOption,
       _props$current = props.current,
@@ -45,2 +49,3 @@ currentNumber = _props$current === void 0 ? 1 : _props$current,
   } : _props$onChange,
+      onShowSizeChange = props.onShowSizeChange,
       divider = props.divider,
@@ -173,3 +178,10 @@ other = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+  var onSizeChange = function onSizeChange(e) {
+    var sizeCount = Number(e.target.value);
+    var count = Math.ceil(total / sizeCount);
+    var newCurrent = current > count ? count : current;
+    onShowSizeChange && onShowSizeChange(newCurrent, sizeCount);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     className: cls,
@@ -180,3 +192,3 @@ style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
   }, other), {}, {
-    children: initPageSoure.map(function (item, idx) {
+    children: [initPageSoure.map(function (item, idx) {
       // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -201,3 +213,16 @@ var label = /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       }, idx);
-    })
+    }), pageSizeOptions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: "".concat(prefixCls, "-options"),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect["default"], {
+        size: size,
+        defaultValue: pageSize,
+        onChange: onSizeChange,
+        children: pageSizeOptions.map(function (item, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSelect["default"].Option, {
+            value: item,
+            children: [item, "\u6761/\u9875"]
+          }, index);
+        })
+      })
+    })]
   }));
@@ -204,0 +229,0 @@ }

esm/index.d.ts

@@ -7,2 +7,3 @@ import { IProps, HTMLUlProps } from '@uiw/utils';
     size?: 'default' | 'small';
+    pageSizeOptions?: number[];
     total?: number;
@@ -13,2 +14,3 @@ pageSize?: number;
     onChange?: (current: number, total: number, pageSize: number) => void;
+    onShowSizeChange?: (current: number, pageSize: number) => void;
 }
@@ -15,0 +17,0 @@ export interface PaginationState {

esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "prefixCls", "alignment", "size", "total", "pageSize", "current", "onChange", "divider"];
+var _excluded = ["className", "style", "prefixCls", "alignment", "size", "total", "pageSize", "pageSizeOptions", "current", "onChange", "onShowSizeChange", "divider"];
 import React, { useEffect, useMemo, useState } from 'react';
+import Select from '@uiw/react-select';
 import "./style/index.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Pagination(props) {
@@ -17,4 +19,6 @@ var {
     // The number of pages displayed.
+    pageSizeOptions = [],
     current: currentNumber = 1,
     onChange = () => null,
+    onShowSizeChange,
     divider
@@ -142,3 +146,10 @@ } = props,
 
-  return /*#__PURE__*/_jsx("ul", _extends({
+  var onSizeChange = e => {
+    var sizeCount = Number(e.target.value);
+    var count = Math.ceil(total / sizeCount);
+    var newCurrent = current > count ? count : current;
+    onShowSizeChange && onShowSizeChange(newCurrent, sizeCount);
+  };
+
+  return /*#__PURE__*/_jsxs("ul", _extends({
     className: cls,
@@ -149,3 +160,3 @@ style: _extends({}, style, {
   }, other, {
-    children: initPageSoure.map((item, idx) => {
+    children: [initPageSoure.map((item, idx) => {
       // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -168,5 +179,16 @@ var label = /*#__PURE__*/_jsx("a", {
       }, idx);
-    })
+    }), pageSizeOptions.length > 0 && /*#__PURE__*/_jsx("li", {
+      className: prefixCls + "-options",
+      children: /*#__PURE__*/_jsx(Select, {
+        size: size,
+        defaultValue: pageSize,
+        onChange: onSizeChange,
+        children: pageSizeOptions.map((item, index) => /*#__PURE__*/_jsxs(Select.Option, {
+          value: item,
+          children: [item, "\u6761/\u9875"]
+        }, index))
+      })
+    })]
   }));
 }
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@uiw/react-pagination",
-  "version": "4.10.5",
+  "version": "4.10.6",
   "description": "Pagination component",
@@ -47,3 +47,4 @@ "author": "Kenny Wong <[e-mail]>",
   "dependencies": {
-    "@uiw/utils": "^4.10.5"
+    "@uiw/react-select": "^4.10.6",
+    "@uiw/utils": "^4.10.6"
   },
@@ -50,0 +51,0 @@ "devDependencies": {

README.md

@@ -16,19 +16,41 @@ Pagination 分页
 ```jsx
+import React from 'react';
 import ReactDOM from 'react-dom';
 import { Pagination, Divider } from 'uiw';
 
+
+const Demo = () => {
+  const [pageObj, setPageObj] = React.useState({
+    current: 2,
+    pageSize: 10
+  });
+  return (
+    <div>
+      <Pagination
+        current={pageObj.current}
+        pageSize={pageObj.pageSize}
+        total={30}
+        divider
+        pageSizeOptions={[5, 10, 20, 30]}
+        onShowSizeChange={(current, pageSize) => setPageObj({
+          current: current,
+          pageSize: pageSize
+        })}
+      />
+      <Divider />
+      <Pagination current={2} pageSize={10} total={38} divider />
+      <Divider />
+      <Pagination current={1} pageSize={5} total={249} pageSizeOptions={[5, 10, 20, 30]} />
+      <Divider />
+      <Pagination current={1} alignment="center" pageSize={10} total={50} />
+      <Divider />
+      <Pagination current={1} pageSize={10} total={60} divider />
+      <Divider />
+      <Pagination current={1} pageSize={10} total={70} divider />
+    </div>
+  )
+}
+
 ReactDOM.render(
-  <div>
-    <Pagination current={2} pageSize={10} total={30} divider />
-    <Divider />
-    <Pagination current={2} pageSize={10} total={38} divider />
-    <Divider />
-    <Pagination current={1} pageSize={5} total={249} />
-    <Divider />
-    <Pagination current={1} alignment="center" pageSize={10} total={50} />
-    <Divider />
-    <Pagination current={1} pageSize={10} total={60} divider />
-    <Divider />
-    <Pagination current={1} pageSize={10} total={70} divider />
-  </div>,
+  <Demo />,
   _mount_
@@ -47,3 +69,3 @@ );
   <div>
-    <Pagination size="small" current={1} pageSize={5} total={249} />
+    <Pagination size="small" current={1} pageSize={5} pageSizeOptions={[5, 10, 20, 30]} total={249} />
     <Divider />
@@ -104,5 +126,7 @@ <Pagination size="small" current={1} pageSize={10} total={50} />
 | pageSize | 每页条数 | Number | 10 |
+| pageSizeOptions | 指定每页可以显示多少条 | Number[] | - |
 | divider | 页码之间是否间隔 | Boolean | - |
 | size | 当为 `small` 时，是小尺寸分页 | Enum{`small`, `default`} | - |
 | alignment | 对齐 | Enum{`left`, `center`, `right`} | `left` |
-| onChange | 页码改变的回调，返回改变后的页码 | Function(current, total, pageSize) | - |
+| onChange | 页码改变的回调，返回改变后的页码 | Function(current, total, pageSize) | - |
+| onShowSizeChange | pageSize 变化的回调 | Function(current, pageSize) | - |

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

Total package byte prevSize

60849

increased by16.5%

Lines of code

822

increased by12.3%

Number of lines in readme file

129

increased by22.86%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@uiw/react-select@^4.10.6

• + Added@uiw/react-select@4.22.3(transitive)

• Updated@uiw/utils@^4.10.6