Skip to content

Commit 9713cd5

Browse files
simonguosimonguo
authored
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
1 parent 90cf78d commit 9713cd5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+776
-652
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ React Suite supports the latest, stable releases of all major browsers and platf
2222

2323
| IE | Edge | Firefox | Chrome | Safari |
2424
| ---- | ---- | ------- | ------ | ------ |
25-
| >=10 | >=14 | >= 45 | >= 49 | >= 10 |
25+
| >=11 | >=14 | >= 45 | >= 49 | >= 10 |
2626

2727
### Server
2828

‎README_zh.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ React Suite 支持最新的，稳定版的全部主流浏览器和平台。 从
2222

2323
| IE | Edge | Firefox | Chrome | Safari |
2424
| ---- | ---- | ------- | ------ | ------ |
25-
| >=10 | >=14 | >= 45 | >= 49 | >= 10 |
25+
| >=11 | >=14 | >= 45 | >= 49 | >= 10 |
2626

2727
### 服务端
2828

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"predev": "rimraf ./node_modules/react && rimraf ./node_modules/react-dom",
88
"dev": "concurrently -n \"server,theme-server\" -c \"bgMagentaBright.bold,bgGreenBright.bold\" \"npm run dev:server\" \"npm run dev:theme-server\"",
99
"dev:styles": "cross-env STYLE_DEBUG=STYLE npm run dev",
10-
"dev:server": "cross-env NODE_ENV=development node server.js",
10+
"dev:server": "cross-env NODE_ENV=development NODE_OPTIONS=--max_old_space_size=8192 node server.js",
1111
"dev:theme-server": "webpack serve --config webpack.theme.config.js",
1212
"build": "npm run build:theme && next build && next export",
1313
"build:next": "NODE_OPTIONS=--max_old_space_size=8192 next build",

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

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,41 @@ Paging navigation, used to assist long lists to load only part of the data, you
2020

2121
<!--{include:`disabled.md`}-->
2222

23+
### Used with Link in next/link
24+
25+
<!--{include:`with-router.md`}-->
26+
2327
### Advanced
2428

29+
> 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).
30+
2531
<!--{include:`advanced.md`}-->
2632

2733
## Props
2834

2935
### `<Pagination>`
3036

31-
| Property | Type `(Default)` | Description |
32-
| ------------- | --------------------------------------------- | ------------------------------------------------------------------------- |
33-
| activePage \* | number `(1)` | Current page number |
34-
| boundaryLinks | boolean | Show border paging buttons 1 and pages |
35-
| classPrefix | string `('pagination')` | The prefix of the component CSS class |
36-
| disabled | boolean &#124; (eventKey: number) => boolean | Disabled component |
37-
| ellipsis | boolean | Displays the ellipsis |
38-
| first | boolean | Displays the first page |
39-
| last | boolean | Displays the last page |
40-
| linkAs | ElementType `(a)` | Customizes the element type for the component |
41-
| linkProps | object | Additional props passed as-is to the underlying link for non-active items |
42-
| maxButtons | number `(0)` | Page buttons display the maximum number of |
43-
| next | boolean | Displays the next page |
44-
| onSelect | (eventKey:number, event: MouseEvent) => void; | Callback fired when the page is changed |
45-
| pages \* | number `(1)` | Total pages |
46-
| prev | boolean | Displays the previous page |
37+
```ts
38+
type LayoutType = 'total' | '-' | 'pager' | '|' | 'limit' | 'skip';
39+
```
40+
41+
| Property | Type `(Default)` | Description |
42+
| ------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------- |
43+
| activePage \* | number `(1)` | Current page number |
44+
| boundaryLinks | boolean | Show border paging buttons 1 and pages |
45+
| classPrefix | string `('pagination')` | The prefix of the component CSS class |
46+
| disabled | boolean &#124; (eventKey: number) => boolean | Disabled component |
47+
| ellipsis | boolean | Displays the ellipsis |
48+
| first | boolean | Displays the first page |
49+
| last | boolean | Displays the last page |
50+
| layout | LayoutType[] `(['pager'])` | Customize the layout of a paging component |
51+
| limit | number `(30)` | The number of rows per page.Will use `total` and `limit` to calculate the number of pages |
52+
| limitOptions | number[] `([30,50,100])` | Customizes the options of the rows per page select field. |
53+
| linkAs | ElementType `(button)` | Customizes the element type for the component |
54+
| linkProps | object | Additional props passed as-is to the underlying link for non-active items |
55+
| maxButtons | number | Page buttons display the maximum number of |
56+
| next | boolean | Displays the next page |
57+
| onChangeLimit | (limit:number) => void; | Callback fired when the number of rows per page is changed |
58+
| onChangePage | (page:number) => void; | Callback fired when the page is changed |
59+
| prev | boolean | Displays the previous page |
60+
| total \* | number | The total number of rows. Generally obtained through the server |

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

Lines changed: 87 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const MyToggle = ({ label, checked, onChange }) => {
1010
);
1111
};
1212

13+
const limitOptions = [30, 50, 100];
14+
1315
const App = () => {
1416
const [prev, setPrev] = React.useState(true);
1517
const [next, setNext] = React.useState(true);
@@ -18,15 +20,11 @@ const App = () => {
1820
const [ellipsis, setEllipsis] = React.useState(true);
1921
const [boundaryLinks, setBoundaryLinks] = React.useState(true);
2022
const [activePage, setActivePage] = React.useState(1);
21-
22-
const renderToggle = (prop, setProp) => {
23-
return (
24-
<span>
25-
{prop}：
26-
<Toggle checked={prop} onChange={setProp} />
27-
</span>
28-
);
29-
};
23+
const [size, setSize] = React.useState('xs');
24+
const [maxButtons, setMaxButtons] = React.useState(5);
25+
const [total, setTotal] = React.useState(200);
26+
const [layout, setLayout] = React.useState(['total', '-', 'limit', '|', 'pager', 'skip']);
27+
const [limit, setLimit] = React.useState(50);
3028

3129
return (
3230
<div>
@@ -35,24 +33,99 @@ const App = () => {
3533
<MyToggle label="last" checked={last} onChange={setLast} />
3634
<MyToggle label="prev" checked={prev} onChange={setPrev} />
3735
<MyToggle label="next" checked={next} onChange={setNext} />
38-
<br />
39-
<br />
36+
4037
<MyToggle label="ellipsis" checked={ellipsis} onChange={setEllipsis} />
4138
<MyToggle label="boundaryLinks" checked={boundaryLinks} onChange={setBoundaryLinks} />
39+
<hr />
40+
<span>
41+
size：
42+
<SelectPicker
43+
value={size}
44+
onChange={setSize}
45+
cleanable={false}
46+
searchable={false}
47+
data={[
48+
{ value: 'xs', label: 'xs' },
49+
{ value: 'sm', label: 'sm' },
50+
{ value: 'md', label: 'md' },
51+
{ value: 'lg', label: 'lg' }
52+
]}
53+
/>
54+
</span>
55+
56+
<span style={{ marginLeft: 20 }}>
57+
limit：
58+
<SelectPicker
59+
value={limit}
60+
onChange={setLimit}
61+
cleanable={false}
62+
searchable={false}
63+
data={limitOptions.map(key => ({ value: key, label: key }))}
64+
/>
65+
</span>
66+
67+
<span style={{ marginLeft: 20 }}>
68+
maxButtons：
69+
<InputNumber
70+
style={{ width: 80, display: 'inline-flex' }}
71+
value={maxButtons}
72+
max={10}
73+
min={1}
74+
onChange={value => {
75+
setMaxButtons(parseInt(value));
76+
}}
77+
/>
78+
</span>
79+
80+
<span style={{ marginLeft: 20 }}>
81+
total：
82+
<InputNumber
83+
style={{ width: 80, display: 'inline-flex' }}
84+
value={total}
85+
min={0}
86+
onChange={value => {
87+
setTotal(parseInt(value));
88+
}}
89+
/>
90+
</span>
91+
92+
<hr />
93+
<span>
94+
layout：
95+
<TagPicker
96+
value={layout}
97+
onChange={setLayout}
98+
cleanable={false}
99+
searchable={false}
100+
data={[
101+
{ value: 'total', label: 'total' },
102+
{ value: '-', label: '-' },
103+
{ value: 'pager', label: 'pager' },
104+
{ value: '|', label: '|' },
105+
{ value: 'limit', label: 'limit' },
106+
{ value: 'skip', label: 'skip' }
107+
]}
108+
/>
109+
</span>
42110
</div>
43111

44112
<hr />
45113
<Pagination
114+
layout={layout}
115+
size={size}
46116
prev={prev}
47117
next={next}
48118
first={first}
49119
last={last}
50120
ellipsis={ellipsis}
51121
boundaryLinks={boundaryLinks}
52-
pages={30}
53-
maxButtons={5}
122+
total={total}
123+
limit={limit}
124+
limitOptions={limitOptions}
125+
maxButtons={maxButtons}
54126
activePage={activePage}
55-
onSelect={setActivePage}
127+
onChangePage={setActivePage}
128+
onChangeLimit={setLimit}
56129
/>
57130
</div>
58131
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
```js
44
const App = () => {
55
const [activePage, setActivePage] = React.useState(1);
6-
return <Pagination pages={10} activePage={activePage} onSelect={setActivePage} />;
6+
return <Pagination total={100} limit={10} activePage={activePage} onChangePage={setActivePage} />;
77
};
88

99
ReactDOM.render(<App />);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--start-code-->
22

33
```js
4-
const instance = <Pagination disabled pages={10} activePage={1} prev last next first />;
4+
const instance = <Pagination disabled total={100} limit={10} activePage={1} prev last next first />;
55

66
ReactDOM.render(instance);
77
```

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ const App = () => {
1111
next
1212
first
1313
size="lg"
14-
pages={10}
14+
total={100}
15+
limit={10}
1516
activePage={activePage}
16-
onSelect={setActivePage}
17+
onChangePage={setActivePage}
1718
/>
1819
<Divider />
1920
<Pagination
@@ -22,9 +23,10 @@ const App = () => {
2223
next
2324
first
2425
size="md"
25-
pages={10}
26+
total={100}
27+
limit={10}
2628
activePage={activePage}
27-
onSelect={setActivePage}
29+
onChangePage={setActivePage}
2830
/>
2931
<Divider />
3032
<Pagination
@@ -33,9 +35,10 @@ const App = () => {
3335
next
3436
first
3537
size="sm"
36-
pages={10}
38+
total={100}
39+
limit={10}
3740
activePage={activePage}
38-
onSelect={setActivePage}
41+
onChangePage={setActivePage}
3942
/>
4043
<Divider />
4144
<Pagination
@@ -44,9 +47,10 @@ const App = () => {
4447
next
4548
first
4649
size="xs"
47-
pages={10}
50+
total={100}
51+
limit={10}
4852
activePage={activePage}
49-
onSelect={setActivePage}
53+
onChangePage={setActivePage}
5054
/>
5155
</div>
5256
);

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!--start-code-->
2+
3+
```js
4+
const NavLink = React.forwardRef((props, ref) => {
5+
const { href, active, eventKey, as, ...rest } = props;
6+
return (
7+
<Link
8+
href={`${location.pathname}?page=${eventKey}`}
9+
className={active ? 'active' : null}
10+
as={as}
11+
>
12+
<a ref={ref} {...rest} />
13+
</Link>
14+
);
15+
});
16+
17+
const App = () => {
18+
const search = location.search.match(/\?page=(\d+)/);
19+
const activePage = search ? parseInt(search[1]) : 1;
20+
21+
return <Pagination linkAs={NavLink} total={100} limit={10} activePage={activePage} />;
22+
};
23+
ReactDOM.render(<App />);
24+
```
25+
26+
<!--end-code-->

‎docs/pages/components/pagination/index.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,31 @@
11
import React from 'react';
2-
import { Pagination, Button, Toggle, Divider } from 'rsuite';
2+
import {
3+
Pagination,
4+
Button,
5+
Toggle,
6+
Divider,
7+
Slider,
8+
SelectPicker,
9+
TagPicker,
10+
InputNumber
11+
} from 'rsuite';
12+
import Link from 'next/link';
313
import DefaultPage from '@/components/Page';
414

515
export default function Page() {
6-
return <DefaultPage dependencies={{ Pagination, Button, Toggle, Divider }} />;
16+
return (
17+
<DefaultPage
18+
dependencies={{
19+
Link,
20+
Pagination,
21+
Button,
22+
Toggle,
23+
Divider,
24+
Slider,
25+
SelectPicker,
26+
TagPicker,
27+
InputNumber
28+
}}
29+
/>
30+
);
731
}

0 commit comments

Comments
 (0)