feat: improve PageSizeOptions with custom pageSize (#270)

* feat: improve PageSizeOptions with custom pageSize

* Add tests/sizer.test.js

Author: afc163

examples/sizer.js

@@ -7,7 +7,7 @@ import 'rc-select/assets/index.less';
 
 class App extends React.Component {
   state = {
-    pageSize: 10,
+    pageSize: 15,
   };
 
   onShowSizeChange = (current, pageSize) => {
@@ -16,34 +16,35 @@ class App extends React.Component {
   };
 
   render() {
+    const { pageSize } = this.state;
     return (
       <div style={{ margin: 10 }}>
         <Pagination
           selectComponentClass={Select}
           showSizeChanger
-          pageSize={this.state.pageSize}
+          pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={40}
         />
         <Pagination
           selectComponentClass={Select}
-          pageSize={this.state.pageSize}
+          pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={50}
         />
         <Pagination
           selectComponentClass={Select}
-          pageSize={this.state.pageSize}
+          pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={60}
         />
         <Pagination
           selectComponentClass={Select}
           showSizeChanger={false}
-          pageSize={this.state.pageSize}
+          pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={60}

src/Options.jsx

@@ -57,10 +57,26 @@ class Options extends React.Component {
     }
   };
 
-  render() {
+  getPageSizeOptions() {
     const {
       pageSize,
       pageSizeOptions,
+    } = this.props;
+    if (pageSizeOptions.some(option => option.toString() === pageSize.toString())) {
+      return pageSizeOptions;
+    }
+    return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => {
+      // eslint-disable-next-line no-restricted-globals
+      const numberA = isNaN(Number(a)) ? 0 : Number(a);
+      // eslint-disable-next-line no-restricted-globals
+      const numberB = isNaN(Number(b)) ? 0 : Number(b);
+      return numberA - numberB;
+    });
+  }
+
+  render() {
+    const {
+      pageSize,
       locale,
       rootPrefixCls,
       changeSize,
@@ -82,6 +98,8 @@ class Options extends React.Component {
       return null;
     }
 
+    const pageSizeOptions = this.getPageSizeOptions();
+
     if (changeSize && Select) {
       const options = pageSizeOptions.map((opt, i) => (
         <Select.Option key={i} value={opt}>

tests/sizer.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Select from 'rc-select';
+import Pagination from '../src';
+
+describe('Pagination with sizer', () => {
+  it('should merge custom pageSize to pageSizeOptions', () => {
+    const wrapper = mount(
+      <Pagination
+        total={500}
+        pageSize={15}
+        showSizeChanger
+        selectComponentClass={Select}
+      />,
+    );
+    wrapper.find(Select).find('input').simulate('mousedown');
+    expect(wrapper.find(Select).find('.rc-select-item').length).toBe(5);
+  });
+
+  it('should not merge duplicated pageSize to pageSizeOptions', () => {
+    const wrapper = mount(
+      <Pagination
+        total={500}
+        pageSize={20}
+        showSizeChanger
+        selectComponentClass={Select}
+      />,
+    );
+    wrapper.find(Select).find('input').simulate('mousedown');
+    expect(wrapper.find(Select).find('.rc-select-item').length).toBe(4);
+  });
+
+  it('should merge pageSize to pageSizeOptions with proper order', () => {
+    const wrapper = mount(
+      <Pagination
+        total={500}
+        pageSize={45}
+        showSizeChanger
+        selectComponentClass={Select}
+      />,
+    );
+    wrapper.find(Select).find('input').simulate('mousedown');
+    expect(wrapper.find(Select).find('.rc-select-item').at(2).text()).toBe('45 条/页✓');
+  });
+});