Improve pagination

HISTORY.md

@@ -1,3 +1,9 @@
+# 2.2.0
+
+- Add prop `totalBoundaryShowSizeChanger`.
+- Fix items count not being consistent. [#18201](https://github.com/ant-design/ant-design/issues/18201)
+- Update default page size options from `10,25,30,40` to `10,20,50,100`.
+
 # 2.1.0
 
 - When `total` is greater then 100, will show size changer defaultly.

README.md

@@ -57,7 +57,8 @@ ReactDOM.render(<Pagination />, container);
 | 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 100, `true` when otherwise |
+| 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', '30', '40']                                                               |
 | onShowSizeChange    | pageSize change callback            | Function(current, size)                            | -                                                                                      |
 | hideOnSinglePage    | hide on single page                 | Bool                                               | false                                                                                  |

examples/simple.js

@@ -2,6 +2,18 @@ import '../assets/index.less';
 import React from 'react';
 import Pagination from '..';
 
-const App = () => <Pagination defaultCurrent={2} total={25} />;
+const App = () => (
+  <>
+    <Pagination total={25} />
+    <Pagination total={50} />
+    <Pagination total={60} />
+    <Pagination total={70} />
+    <Pagination total={80} />
+    <Pagination total={90} />
+    <Pagination total={100} />
+    <Pagination total={120} />
+    <Pagination total={500} />
+  </>
+);
 
 export default App;

examples/sizer.js

@@ -7,7 +7,7 @@ import 'rc-select/assets/index.less';
 
 class App extends React.Component {
   state = {
-    pageSize: 20,
+    pageSize: 10,
   };
 
   onShowSizeChange = (current, pageSize) => {
@@ -24,22 +24,29 @@ class App extends React.Component {
           pageSize={this.state.pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
-          total={500}
+          total={40}
         />
         <Pagination
           selectComponentClass={Select}
           pageSize={this.state.pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
-          total={500}
+          total={50}
+        />
+        <Pagination
+          selectComponentClass={Select}
+          pageSize={this.state.pageSize}
+          onShowSizeChange={this.onShowSizeChange}
+          defaultCurrent={3}
+          total={60}
         />
         <Pagination
           selectComponentClass={Select}
           showSizeChanger={false}
           pageSize={this.state.pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
-          total={500}
+          total={60}
         />
       </div>
     );

src/Options.jsx

@@ -4,7 +4,7 @@ import KEYCODE from './KeyCode';
 
 class Options extends React.Component {
   static defaultProps = {
-    pageSizeOptions: ['10', '25', '50', '100'],
+    pageSizeOptions: ['10', '20', '50', '100'],
   };
 
   state = {

src/Pagination.jsx

@@ -43,6 +43,7 @@ class Pagination extends React.Component {
     locale: LOCALE,
     style: {},
     itemRender: defaultItemRender,
+    totalBoundaryShowSizeChanger: 50,
   };
 
   constructor(props) {
@@ -278,11 +279,11 @@ class Pagination extends React.Component {
     this.state.current < calculatePage(undefined, this.state, this.props);
 
  getShowSizeChanger() {
-   const { showSizeChanger, total } = this.props;
+   const { showSizeChanger, total, totalBoundaryShowSizeChanger } = this.props;
    if (typeof showSizeChanger !== 'undefined') {
      return showSizeChanger;
    }
-   return total >= 100;
+   return total > totalBoundaryShowSizeChanger;
  }
 
   runIfEnter = (event, callback, ...restParams) => {
@@ -470,7 +471,7 @@ class Pagination extends React.Component {
       );
     }
 
-    if (allPages <= 5 + pageBufferSize * 2) {
+    if (allPages <= 3 + pageBufferSize * 2) {
       const pagerProps = {
         locale,
         rootPrefixCls: prefixCls,

tests/index.test.js

@@ -323,7 +323,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
     input.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
     expect(onShowSizeChange).toHaveBeenLastCalledWith(
       wrapper.state().current,
-      25,
+      20,
     );
   });
 
@@ -341,30 +341,67 @@ describe('current value on onShowSizeChange when total is 0', () => {
     const wrapper1 = mount(
       <Pagination
         selectComponentClass={Select}
-        total={99}
+        total={50}
       />,
     );
     expect(wrapper1.exists('.rc-pagination-options-size-changer')).toBe(false);
     const wrapper2 = mount(
       <Pagination
         selectComponentClass={Select}
-        total={100}
+        total={51}
       />,
     );
     expect(wrapper2.exists('.rc-pagination-options-size-changer')).toBe(true);
     const wrapper3 = mount(
       <Pagination
         selectComponentClass={Select}
         showSizeChanger={false}
+        total={51}
+      />,
+    );
+    expect(wrapper3.exists('.rc-pagination-options-size-changer')).toBe(false);
+    const wrapper4 = mount(
+      <Pagination
+        selectComponentClass={Select}
+        showSizeChanger
+        total={50}
+      />,
+    );
+    expect(wrapper4.exists('.rc-pagination-options-size-changer')).toBe(true);
+  });
+
+  it('totalBoundaryShowSizeChanger works', () => {
+    const wrapper1 = mount(
+      <Pagination
+        selectComponentClass={Select}
         total={100}
+        totalBoundaryShowSizeChanger={100}
+      />,
+    );
+    expect(wrapper1.exists('.rc-pagination-options-size-changer')).toBe(false);
+    const wrapper2 = mount(
+      <Pagination
+        selectComponentClass={Select}
+        total={101}
+        totalBoundaryShowSizeChanger={100}
+      />,
+    );
+    expect(wrapper2.exists('.rc-pagination-options-size-changer')).toBe(true);
+    const wrapper3 = mount(
+      <Pagination
+        selectComponentClass={Select}
+        showSizeChanger={false}
+        total={101}
+        totalBoundaryShowSizeChanger={100}
       />,
     );
     expect(wrapper3.exists('.rc-pagination-options-size-changer')).toBe(false);
     const wrapper4 = mount(
       <Pagination
         selectComponentClass={Select}
         showSizeChanger
-        total={99}
+        total={100}
+        totalBoundaryShowSizeChanger={100}
       />,
     );
     expect(wrapper4.exists('.rc-pagination-options-size-changer')).toBe(true);