✨ Combination of Simple mode pagination along with page size changer (#…

…530) * ✨ Combination of Simple mode pagination along with page size changer * Update tests/simple.test.js Co-authored-by: afc163 <[email protected]> * test✅:Update should quick jump to expect page test --------- Co-authored-by: afc163 <[email protected]>
react-component · Sep 8, 2023 · f68f8a7 · f68f8a7
1 parent b002aac
commit f68f8a7
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 3 deletions.
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Pagination from 'rc-pagination';
+import Select from 'rc-select';
 import '../../assets/index.less';
 
 export default () => (
@@ -12,5 +13,13 @@ export default () => (
       total={50}
       showTotal={(total) => `Total ${total} items`}
     />
+    <br />
+    <Pagination
+      simple
+      defaultCurrent={1}
+      total={50}
+      showSizeChanger
+      selectComponentClass={Select}
+    />
   </>
 );
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
@@ -590,7 +590,19 @@ class Pagination extends React.Component<PaginationProps, PaginationState> {
           >
             {this.renderNext(nextPage)}
           </li>
-          {gotoButton}
+          <Options
+            disabled={disabled}
+            locale={locale}
+            rootPrefixCls={prefixCls}
+            selectComponentClass={selectComponentClass}
+            selectPrefixCls={selectPrefixCls}
+            changeSize={this.getShowSizeChanger() ? this.changePageSize : null}
+            current={current}
+            pageSize={pageSize}
+            pageSizeOptions={pageSizeOptions}
+            quickGo={this.shouldDisplayQuickJumper() ? this.handleChange : null}
+            goButton={gotoButton}
+          />
         </ul>
       );
     }

diff --git a/tests/jumper.test.js b/tests/jumper.test.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { mount } from 'enzyme';
 import Pagination from '../src';
 
@@ -99,7 +98,7 @@ describe('simple quick jumper', () => {
   });
 
   it('should quick jump to expect page', () => {
-    const quickJumper = wrapper.find('.rc-pagination-simple');
+    const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper');
     const input = quickJumper.find('input');
     const goButton = quickJumper.find('.go-button');
     input.simulate('change', { target: { value: '2' } });

diff --git a/tests/simple.test.js b/tests/simple.test.js
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
+import Select from 'rc-select';
 import Pagination from '../src';
 
 describe('simple Pagination', () => {
@@ -84,4 +85,39 @@ describe('simple Pagination', () => {
     expect(input.getDOMNode().value).toBe('3');
     expect(component.state().current).toBe(3);
   });
+
+  it('should merge custom pageSize to pageSizeOptions', () => {
+    const wrapper = mount(
+      <Pagination
+        simple
+        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 onChange called when pageSize change', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Pagination
+        simple
+        selectComponentClass={Select}
+        onChange={onChange}
+        total={500}
+        defaultPageSize={20}
+      />,
+    );
+    wrapper.find(Select).find('input').simulate('mousedown');
+    expect(wrapper.find(Select).find('.rc-select-item').at(2).text()).toBe(
+      '50 条/页',
+    );
+    const pageSize1 = wrapper.find(Select).find('.rc-select-item').at(0);
+    pageSize1.simulate('click');
+    expect(onChange).toBeCalled();
+    expect(onChange).toHaveBeenLastCalledWith(1, 10);
+  });
 });