Skip to content

Commit 03d64d8

Browse files
afc163afc163
authored
Merge pull request #260 from react-component/improve-pagination
Improve pagination
2 parents 2d3f18f + 52c757b commit 03d64d8

File tree

7 files changed

+78
-14
lines changed

7 files changed

+78
-14
lines changed

‎HISTORY.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
# 2.2.0
2+
3+
- Add prop `totalBoundaryShowSizeChanger`.
4+
- Fix items count not being consistent. [#18201](https://github.com/ant-design/ant-design/issues/18201)
5+
- Update default page size options from `10,25,30,40` to `10,20,50,100`.
6+
17
# 2.1.0
28

39
- When `total` is greater then 100, will show size changer defaultly.

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ ReactDOM.render(<Pagination />, container);
5757
| defaultPageSize | default items per page | Number | 10 |
5858
| pageSize | items per page | Number | 10 |
5959
| onChange | page change callback | Function(current, pageSize) | - |
60-
| showSizeChanger | show pageSize changer | Bool | `false` when total less then 100, `true` when otherwise |
60+
| showSizeChanger | show pageSize changer | Bool | `false` when total less then `totalBoundaryShowSizeChanger`, `true` when otherwise |
61+
| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
6162
| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '30', '40'] |
6263
| onShowSizeChange | pageSize change callback | Function(current, size) | - |
6364
| hideOnSinglePage | hide on single page | Bool | false |

‎examples/simple.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@ import '../assets/index.less';
22
import React from 'react';
33
import Pagination from '..';
44

5-
const App = () => <Pagination defaultCurrent={2} total={25} />;
5+
const App = () => (
6+
<>
7+
<Pagination total={25} />
8+
<Pagination total={50} />
9+
<Pagination total={60} />
10+
<Pagination total={70} />
11+
<Pagination total={80} />
12+
<Pagination total={90} />
13+
<Pagination total={100} />
14+
<Pagination total={120} />
15+
<Pagination total={500} />
16+
</>
17+
);
618

719
export default App;

‎examples/sizer.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import 'rc-select/assets/index.less';
77

88
class App extends React.Component {
99
state = {
10-
pageSize: 20,
10+
pageSize: 10,
1111
};
1212

1313
onShowSizeChange = (current, pageSize) => {
@@ -24,22 +24,29 @@ class App extends React.Component {
2424
pageSize={this.state.pageSize}
2525
onShowSizeChange={this.onShowSizeChange}
2626
defaultCurrent={3}
27-
total={500}
27+
total={40}
2828
/>
2929
<Pagination
3030
selectComponentClass={Select}
3131
pageSize={this.state.pageSize}
3232
onShowSizeChange={this.onShowSizeChange}
3333
defaultCurrent={3}
34-
total={500}
34+
total={50}
35+
/>
36+
<Pagination
37+
selectComponentClass={Select}
38+
pageSize={this.state.pageSize}
39+
onShowSizeChange={this.onShowSizeChange}
40+
defaultCurrent={3}
41+
total={60}
3542
/>
3643
<Pagination
3744
selectComponentClass={Select}
3845
showSizeChanger={false}
3946
pageSize={this.state.pageSize}
4047
onShowSizeChange={this.onShowSizeChange}
4148
defaultCurrent={3}
42-
total={500}
49+
total={60}
4350
/>
4451
</div>
4552
);

‎src/Options.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import KEYCODE from './KeyCode';
44

55
class Options extends React.Component {
66
static defaultProps = {
7-
pageSizeOptions: ['10', '25', '50', '100'],
7+
pageSizeOptions: ['10', '20', '50', '100'],
88
};
99

1010
state = {

‎src/Pagination.jsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ class Pagination extends React.Component {
4343
locale: LOCALE,
4444
style: {},
4545
itemRender: defaultItemRender,
46+
totalBoundaryShowSizeChanger: 50,
4647
};
4748

4849
constructor(props) {
@@ -278,11 +279,11 @@ class Pagination extends React.Component {
278279
this.state.current < calculatePage(undefined, this.state, this.props);
279280

280281
getShowSizeChanger() {
281-
const { showSizeChanger, total } = this.props;
282+
const { showSizeChanger, total, totalBoundaryShowSizeChanger } = this.props;
282283
if (typeof showSizeChanger !== 'undefined') {
283284
return showSizeChanger;
284285
}
285-
return total >= 100;
286+
return total > totalBoundaryShowSizeChanger;
286287
}
287288

288289
runIfEnter = (event, callback, ...restParams) => {
@@ -470,7 +471,7 @@ class Pagination extends React.Component {
470471
);
471472
}
472473

473-
if (allPages <= 5 + pageBufferSize * 2) {
474+
if (allPages <= 3 + pageBufferSize * 2) {
474475
const pagerProps = {
475476
locale,
476477
rootPrefixCls: prefixCls,

‎tests/index.test.js

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
323323
input.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
324324
expect(onShowSizeChange).toHaveBeenLastCalledWith(
325325
wrapper.state().current,
326-
25,
326+
20,
327327
);
328328
});
329329

@@ -341,30 +341,67 @@ describe('current value on onShowSizeChange when total is 0', () => {
341341
const wrapper1 = mount(
342342
<Pagination
343343
selectComponentClass={Select}
344-
total={99}
344+
total={50}
345345
/>,
346346
);
347347
expect(wrapper1.exists('.rc-pagination-options-size-changer')).toBe(false);
348348
const wrapper2 = mount(
349349
<Pagination
350350
selectComponentClass={Select}
351-
total={100}
351+
total={51}
352352
/>,
353353
);
354354
expect(wrapper2.exists('.rc-pagination-options-size-changer')).toBe(true);
355355
const wrapper3 = mount(
356356
<Pagination
357357
selectComponentClass={Select}
358358
showSizeChanger={false}
359+
total={51}
360+
/>,
361+
);
362+
expect(wrapper3.exists('.rc-pagination-options-size-changer')).toBe(false);
363+
const wrapper4 = mount(
364+
<Pagination
365+
selectComponentClass={Select}
366+
showSizeChanger
367+
total={50}
368+
/>,
369+
);
370+
expect(wrapper4.exists('.rc-pagination-options-size-changer')).toBe(true);
371+
});
372+
373+
it('totalBoundaryShowSizeChanger works', () => {
374+
const wrapper1 = mount(
375+
<Pagination
376+
selectComponentClass={Select}
359377
total={100}
378+
totalBoundaryShowSizeChanger={100}
379+
/>,
380+
);
381+
expect(wrapper1.exists('.rc-pagination-options-size-changer')).toBe(false);
382+
const wrapper2 = mount(
383+
<Pagination
384+
selectComponentClass={Select}
385+
total={101}
386+
totalBoundaryShowSizeChanger={100}
387+
/>,
388+
);
389+
expect(wrapper2.exists('.rc-pagination-options-size-changer')).toBe(true);
390+
const wrapper3 = mount(
391+
<Pagination
392+
selectComponentClass={Select}
393+
showSizeChanger={false}
394+
total={101}
395+
totalBoundaryShowSizeChanger={100}
360396
/>,
361397
);
362398
expect(wrapper3.exists('.rc-pagination-options-size-changer')).toBe(false);
363399
const wrapper4 = mount(
364400
<Pagination
365401
selectComponentClass={Select}
366402
showSizeChanger
367-
total={99}
403+
total={100}
404+
totalBoundaryShowSizeChanger={100}
368405
/>,
369406
);
370407
expect(wrapper4.exists('.rc-pagination-options-size-changer')).toBe(true);

0 commit comments

Comments
 (0)