feat(pagination): added for support layout on Pagination (#1533)

* refactor(pagination): replace `a` with button

* feat(pagination): added for support `layout` on Pagination

* fix(panel): fix: Property 'Pagination' does not exist on type 'Table'

* feat(pagination): support router for PaginationButton

* docs(pagination): update docs for pagination

* docs(table): update example for table pagination

README.md

@@ -22,7 +22,7 @@ React Suite supports the latest, stable releases of all major browsers and platf
 
 | IE   | Edge | Firefox | Chrome | Safari |
 | ---- | ---- | ------- | ------ | ------ |
-| >=10 | >=14 | >= 45   | >= 49  | >= 10  |
+| >=11 | >=14 | >= 45   | >= 49  | >= 10  |
 
 ### Server
 

README_zh.md

@@ -22,7 +22,7 @@ React Suite 支持最新的，稳定版的全部主流浏览器和平台。 从
 
 | IE   | Edge | Firefox | Chrome | Safari |
 | ---- | ---- | ------- | ------ | ------ |
-| >=10 | >=14 | >= 45   | >= 49  | >= 10  |
+| >=11 | >=14 | >= 45   | >= 49  | >= 10  |
 
 ### 服务端
 

docs/package.json

@@ -7,7 +7,7 @@
     "predev": "rimraf ./node_modules/react && rimraf ./node_modules/react-dom",
     "dev": "concurrently -n \"server,theme-server\" -c \"bgMagentaBright.bold,bgGreenBright.bold\" \"npm run dev:server\" \"npm run dev:theme-server\"",
     "dev:styles": "cross-env STYLE_DEBUG=STYLE npm run dev",
-    "dev:server": "cross-env NODE_ENV=development node server.js",
+    "dev:server": "cross-env NODE_ENV=development NODE_OPTIONS=--max_old_space_size=8192 node server.js",
     "dev:theme-server": "webpack serve --config webpack.theme.config.js",
     "build": "npm run build:theme && next build && next export",
     "build:next": "NODE_OPTIONS=--max_old_space_size=8192 next build",

docs/pages/components/pagination/en-US/index.md

@@ -20,27 +20,41 @@ Paging navigation, used to assist long lists to load only part of the data, you
 
 <!--{include:`disabled.md`}-->
 
+### Used with Link in next/link
+
+<!--{include:`with-router.md`}-->
+
 ### Advanced
 
+> The `layout` prop can customize the layout of a paging component. It receives an array parameter and renders according to the order of the values in the array. The default value of `layout` is `['pager']`, and the optional values include: `total` (total entry input area), `pager` (page area), `limit` (entry option area), `skip` (quick jump page area), `-` (area placeholder, fill up the remaining space) , `|` (vertical separator).
+
 <!--{include:`advanced.md`}-->
 
 ## Props
 
 ### `<Pagination>`
 
-| Property      | Type `(Default)`                              | Description                                                               |
-| ------------- | --------------------------------------------- | ------------------------------------------------------------------------- |
-| activePage \* | number `(1)`                                  | Current page number                                                       |
-| boundaryLinks | boolean                                       | Show border paging buttons 1 and pages                                    |
-| classPrefix   | string `('pagination')`                       | The prefix of the component CSS class                                     |
-| disabled      | boolean &#124; (eventKey: number) => boolean  | Disabled component                                                        |
-| ellipsis      | boolean                                       | Displays the ellipsis                                                     |
-| first         | boolean                                       | Displays the first page                                                   |
-| last          | boolean                                       | Displays the last page                                                    |
-| linkAs        | ElementType `(a)`                             | Customizes the element type for the component                             |
-| linkProps     | object                                        | Additional props passed as-is to the underlying link for non-active items |
-| maxButtons    | number `(0)`                                  | Page buttons display the maximum number of                                |
-| next          | boolean                                       | Displays the next page                                                    |
-| onSelect      | (eventKey:number, event: MouseEvent) => void; | Callback fired when the page is changed                                   |
-| pages \*      | number `(1)`                                  | Total pages                                                               |
-| prev          | boolean                                       | Displays the previous page                                                |
+```ts
+type LayoutType = 'total' | '-' | 'pager' | '|' | 'limit' | 'skip';
+```
+
+| Property      | Type `(Default)`                             | Description                                                                               |
+| ------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| activePage \* | number `(1)`                                 | Current page number                                                                       |
+| boundaryLinks | boolean                                      | Show border paging buttons 1 and pages                                                    |
+| classPrefix   | string `('pagination')`                      | The prefix of the component CSS class                                                     |
+| disabled      | boolean &#124; (eventKey: number) => boolean | Disabled component                                                                        |
+| ellipsis      | boolean                                      | Displays the ellipsis                                                                     |
+| first         | boolean                                      | Displays the first page                                                                   |
+| last          | boolean                                      | Displays the last page                                                                    |
+| layout        | LayoutType[] `(['pager'])`                   | Customize the layout of a paging component                                                |
+| limit         | number `(30)`                                | The number of rows per page.Will use `total` and `limit` to calculate the number of pages |
+| limitOptions  | number[] `([30,50,100])`                     | Customizes the options of the rows per page select field.                                 |
+| linkAs        | ElementType `(button)`                       | Customizes the element type for the component                                             |
+| linkProps     | object                                       | Additional props passed as-is to the underlying link for non-active items                 |
+| maxButtons    | number                                       | Page buttons display the maximum number of                                                |
+| next          | boolean                                      | Displays the next page                                                                    |
+| onChangeLimit | (limit:number) => void;                      | Callback fired when the number of rows per page is changed                                |
+| onChangePage  | (page:number) => void;                       | Callback fired when the page is changed                                                   |
+| prev          | boolean                                      | Displays the previous page                                                                |
+| total \*      | number                                       | The total number of rows. Generally obtained through the server                           |

docs/pages/components/pagination/fragments/advanced.md

@@ -10,6 +10,8 @@ const MyToggle = ({ label, checked, onChange }) => {
   );
 };
 
+const limitOptions = [30, 50, 100];
+
 const App = () => {
   const [prev, setPrev] = React.useState(true);
   const [next, setNext] = React.useState(true);
@@ -18,15 +20,11 @@ const App = () => {
   const [ellipsis, setEllipsis] = React.useState(true);
   const [boundaryLinks, setBoundaryLinks] = React.useState(true);
   const [activePage, setActivePage] = React.useState(1);
-
-  const renderToggle = (prop, setProp) => {
-    return (
-      <span>
-        {prop}：
-        <Toggle checked={prop} onChange={setProp} />
-      </span>
-    );
-  };
+  const [size, setSize] = React.useState('xs');
+  const [maxButtons, setMaxButtons] = React.useState(5);
+  const [total, setTotal] = React.useState(200);
+  const [layout, setLayout] = React.useState(['total', '-', 'limit', '|', 'pager', 'skip']);
+  const [limit, setLimit] = React.useState(50);
 
   return (
     <div>
@@ -35,24 +33,99 @@ const App = () => {
         <MyToggle label="last" checked={last} onChange={setLast} />
         <MyToggle label="prev" checked={prev} onChange={setPrev} />
         <MyToggle label="next" checked={next} onChange={setNext} />
-        <br />
-        <br />
+
         <MyToggle label="ellipsis" checked={ellipsis} onChange={setEllipsis} />
         <MyToggle label="boundaryLinks" checked={boundaryLinks} onChange={setBoundaryLinks} />
+        <hr />
+        <span>
+          size：
+          <SelectPicker
+            value={size}
+            onChange={setSize}
+            cleanable={false}
+            searchable={false}
+            data={[
+              { value: 'xs', label: 'xs' },
+              { value: 'sm', label: 'sm' },
+              { value: 'md', label: 'md' },
+              { value: 'lg', label: 'lg' }
+            ]}
+          />
+        </span>
+
+        <span style={{ marginLeft: 20 }}>
+          limit：
+          <SelectPicker
+            value={limit}
+            onChange={setLimit}
+            cleanable={false}
+            searchable={false}
+            data={limitOptions.map(key => ({ value: key, label: key }))}
+          />
+        </span>
+
+        <span style={{ marginLeft: 20 }}>
+          maxButtons：
+          <InputNumber
+            style={{ width: 80, display: 'inline-flex' }}
+            value={maxButtons}
+            max={10}
+            min={1}
+            onChange={value => {
+              setMaxButtons(parseInt(value));
+            }}
+          />
+        </span>
+
+        <span style={{ marginLeft: 20 }}>
+          total：
+          <InputNumber
+            style={{ width: 80, display: 'inline-flex' }}
+            value={total}
+            min={0}
+            onChange={value => {
+              setTotal(parseInt(value));
+            }}
+          />
+        </span>
+
+        <hr />
+        <span>
+          layout：
+          <TagPicker
+            value={layout}
+            onChange={setLayout}
+            cleanable={false}
+            searchable={false}
+            data={[
+              { value: 'total', label: 'total' },
+              { value: '-', label: '-' },
+              { value: 'pager', label: 'pager' },
+              { value: '|', label: '|' },
+              { value: 'limit', label: 'limit' },
+              { value: 'skip', label: 'skip' }
+            ]}
+          />
+        </span>
       </div>
 
       <hr />
       <Pagination
+        layout={layout}
+        size={size}
         prev={prev}
         next={next}
         first={first}
         last={last}
         ellipsis={ellipsis}
         boundaryLinks={boundaryLinks}
-        pages={30}
-        maxButtons={5}
+        total={total}
+        limit={limit}
+        limitOptions={limitOptions}
+        maxButtons={maxButtons}
         activePage={activePage}
-        onSelect={setActivePage}
+        onChangePage={setActivePage}
+        onChangeLimit={setLimit}
       />
     </div>
   );

docs/pages/components/pagination/fragments/basic.md

@@ -3,7 +3,7 @@
 ```js
 const App = () => {
   const [activePage, setActivePage] = React.useState(1);
-  return <Pagination pages={10} activePage={activePage} onSelect={setActivePage} />;
+  return <Pagination total={100} limit={10} activePage={activePage} onChangePage={setActivePage} />;
 };
 
 ReactDOM.render(<App />);

docs/pages/components/pagination/fragments/disabled.md

@@ -1,7 +1,7 @@
 <!--start-code-->
 
 ```js
-const instance = <Pagination disabled pages={10} activePage={1} prev last next first />;
+const instance = <Pagination disabled total={100} limit={10} activePage={1} prev last next first />;
 
 ReactDOM.render(instance);
 ```

docs/pages/components/pagination/fragments/size.md

@@ -11,9 +11,10 @@ const App = () => {
         next
         first
         size="lg"
-        pages={10}
+        total={100}
+        limit={10}
         activePage={activePage}
-        onSelect={setActivePage}
+        onChangePage={setActivePage}
       />
       <Divider />
       <Pagination
@@ -22,9 +23,10 @@ const App = () => {
         next
         first
         size="md"
-        pages={10}
+        total={100}
+        limit={10}
         activePage={activePage}
-        onSelect={setActivePage}
+        onChangePage={setActivePage}
       />
       <Divider />
       <Pagination
@@ -33,9 +35,10 @@ const App = () => {
         next
         first
         size="sm"
-        pages={10}
+        total={100}
+        limit={10}
         activePage={activePage}
-        onSelect={setActivePage}
+        onChangePage={setActivePage}
       />
       <Divider />
       <Pagination
@@ -44,9 +47,10 @@ const App = () => {
         next
         first
         size="xs"
-        pages={10}
+        total={100}
+        limit={10}
         activePage={activePage}
-        onSelect={setActivePage}
+        onChangePage={setActivePage}
       />
     </div>
   );

docs/pages/components/pagination/fragments/with-router.md

@@ -0,0 +1,26 @@
+<!--start-code-->
+
+```js
+const NavLink = React.forwardRef((props, ref) => {
+  const { href, active, eventKey, as, ...rest } = props;
+  return (
+    <Link
+      href={`${location.pathname}?page=${eventKey}`}
+      className={active ? 'active' : null}
+      as={as}
+    >
+      <a ref={ref} {...rest} />
+    </Link>
+  );
+});
+
+const App = () => {
+  const search = location.search.match(/\?page=(\d+)/);
+  const activePage = search ? parseInt(search[1]) : 1;
+
+  return <Pagination linkAs={NavLink} total={100} limit={10} activePage={activePage} />;
+};
+ReactDOM.render(<App />);
+```
+
+<!--end-code-->

docs/pages/components/pagination/index.tsx

@@ -1,7 +1,31 @@
 import React from 'react';
-import { Pagination, Button, Toggle, Divider } from 'rsuite';
+import {
+  Pagination,
+  Button,
+  Toggle,
+  Divider,
+  Slider,
+  SelectPicker,
+  TagPicker,
+  InputNumber
+} from 'rsuite';
+import Link from 'next/link';
 import DefaultPage from '@/components/Page';
 
 export default function Page() {
-  return <DefaultPage dependencies={{ Pagination, Button, Toggle, Divider }} />;
+  return (
+    <DefaultPage
+      dependencies={{
+        Link,
+        Pagination,
+        Button,
+        Toggle,
+        Divider,
+        Slider,
+        SelectPicker,
+        TagPicker,
+        InputNumber
+      }}
+    />
+  );
 }