🆕 size changer will be shown when total >= 100 (#258)

Author: afc163

HISTORY.md

@@ -1,6 +1,11 @@
+# 2.1.0
+
+- When `total` is greater then 100, will show size changer defaultly.
+- Update default page size options from `10,20,30,40` to `10,25,50,100`.
+
 # 2.0.0
 
-- Remove prop-types and react-lifecycles-compat
+- Remove `prop-types` and `react-lifecycles-compat`
 
   # 1.20.0
 

README.md

@@ -61,7 +61,7 @@ React.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                                                                                  |
+| showSizeChanger     | show pageSize changer               | Bool                     | `false` when total less then 100, `true` when otherwise |
 | 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/sizer.js

@@ -28,7 +28,14 @@ class App extends React.Component {
         />
         <Pagination
           selectComponentClass={Select}
-          showSizeChanger
+          pageSize={this.state.pageSize}
+          onShowSizeChange={this.onShowSizeChange}
+          defaultCurrent={3}
+          total={500}
+        />
+        <Pagination
+          selectComponentClass={Select}
+          showSizeChanger={false}
           pageSize={this.state.pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}

src/Options.jsx

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

src/Pagination.jsx

@@ -37,7 +37,6 @@ class Pagination extends React.Component {
     hideOnSinglePage: false,
     showPrevNextJumpers: true,
     showQuickJumper: false,
-    showSizeChanger: false,
     showLessItems: false,
     showTitle: true,
     onShowSizeChange: noop,
@@ -278,6 +277,14 @@ class Pagination extends React.Component {
   hasNext = () =>
     this.state.current < calculatePage(undefined, this.state, this.props);
 
+ getShowSizeChanger() {
+   const { showSizeChanger, total } = this.props;
+   if (typeof showSizeChanger !== 'undefined') {
+     return showSizeChanger;
+   }
+   return total >= 100;
+ }
+
   runIfEnter = (event, callback, ...restParams) => {
     if (event.key === 'Enter' || event.charCode === 13) {
       callback(...restParams);
@@ -337,7 +344,6 @@ class Pagination extends React.Component {
       showLessItems,
       showTitle,
       showTotal,
-      showSizeChanger,
       simple,
       itemRender,
       showPrevNextJumpers,
@@ -669,7 +675,7 @@ class Pagination extends React.Component {
           rootPrefixCls={prefixCls}
           selectComponentClass={selectComponentClass}
           selectPrefixCls={selectPrefixCls}
-          changeSize={showSizeChanger ? this.changePageSize : null}
+          changeSize={this.getShowSizeChanger() ? this.changePageSize : null}
           current={current}
           pageSize={pageSize}
           pageSizeOptions={pageSizeOptions}

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,
-      20,
+      25,
     );
   });
 
@@ -336,4 +336,37 @@ describe('current value on onShowSizeChange when total is 0', () => {
     const totalText = wrapper.find('.rc-pagination-total-text');
     expect(totalText.text()).toBe('0 - 0 of 0 items');
   });
+
+  it('size changer show logic', () => {
+    const wrapper1 = mount(
+      <Pagination
+        selectComponentClass={Select}
+        total={99}
+      />,
+    );
+    expect(wrapper1.exists('.rc-pagination-options-size-changer')).toBe(false);
+    const wrapper2 = mount(
+      <Pagination
+        selectComponentClass={Select}
+        total={100}
+      />,
+    );
+    expect(wrapper2.exists('.rc-pagination-options-size-changer')).toBe(true);
+    const wrapper3 = mount(
+      <Pagination
+        selectComponentClass={Select}
+        showSizeChanger={false}
+        total={100}
+      />,
+    );
+    expect(wrapper3.exists('.rc-pagination-options-size-changer')).toBe(false);
+    const wrapper4 = mount(
+      <Pagination
+        selectComponentClass={Select}
+        showSizeChanger
+        total={99}
+      />,
+    );
+    expect(wrapper4.exists('.rc-pagination-options-size-changer')).toBe(true);
+  });
 });