Add pageSizeChanger props for handling the page size Select component showSearch, size options, and onChange together.

Author: prakashks20

README.md

@@ -0,0 +1,8 @@
+---
+title: pageSizeChanger
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/pageSizeChanger.tsx"></code>

docs/demo/pageSizeChanger.md

@@ -0,0 +1,26 @@
+import React from 'react';
+import Pagination from 'rc-pagination';
+import Select from 'rc-select';
+import '../../assets/index.less';
+
+export default () => {
+  const pageSizeOnChange = (size) => {
+    console.log({ size });
+  };
+
+  return (
+    <>
+      <Pagination
+        defaultCurrent={1}
+        total={50}
+        selectComponentClass={Select}
+        showSizeChanger
+        pageSizeChanger={{
+          options: [10, 25, 50, 75, 100],
+          showSearch: false,
+          onChange: pageSizeOnChange,
+        }}
+      />
+    </>
+  );
+};

docs/examples/pageSizeChanger.tsx

@@ -25,6 +25,8 @@ interface OptionsProps {
   selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
     Option?: React.ComponentType<Partial<OptionProps>>;
   };
+  showSearch: boolean;
+  onChange: (size: number) => void;
 }
 
 const defaultPageSizeOptions = ['10', '20', '50', '100'];
@@ -42,6 +44,8 @@ const Options: React.FC<OptionsProps> = (props) => {
     selectPrefixCls,
     disabled,
     buildOptionText,
+    showSearch = false,
+    onChange,
   } = props;
 
   const [goInputText, setGoInputText] = React.useState('');
@@ -59,6 +63,7 @@ const Options: React.FC<OptionsProps> = (props) => {
 
   const changeSizeHandle = (value: number) => {
     changeSize?.(Number(value));
+    onChange?.(Number(value));
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -128,7 +133,7 @@ const Options: React.FC<OptionsProps> = (props) => {
       <Select
         disabled={disabled}
         prefixCls={selectPrefixCls}
-        showSearch={false}
+        showSearch={showSearch}
         className={`${prefixCls}-size-changer`}
         optionLabelProp="children"
         popupMatchSelectWidth={false}

src/Options.tsx

@@ -16,6 +16,10 @@ const defaultItemRender: PaginationProps['itemRender'] = (
   element,
 ) => element;
 
+const defaultPageSizeChanger: PaginationProps['pageSizeChanger'] = {
+  showSearch: false,
+};
+
 function noop() {}
 
 function isInteger(v: number) {
@@ -65,6 +69,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     showTotal,
     showSizeChanger: showSizeChangerProp,
     pageSizeOptions,
+    pageSizeChanger = defaultPageSizeChanger,
 
     // render
     itemRender = defaultItemRender,
@@ -588,9 +593,11 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         selectPrefixCls={selectPrefixCls}
         changeSize={showSizeChanger ? changePageSize : null}
         pageSize={pageSize}
-        pageSizeOptions={pageSizeOptions}
+        pageSizeOptions={pageSizeOptions || pageSizeChanger?.options}
         quickGo={shouldDisplayQuickJumper ? handleChange : null}
         goButton={gotoButton}
+        onChange={pageSizeChanger?.onChange}
+        showSearch={pageSizeChanger?.showSearch}
       />
     </ul>
   );

src/Pagination.tsx

@@ -17,11 +17,18 @@ export interface PaginationLocale {
   page_size?: string;
 }
 
+export interface pageSizeChangerLocale {
+  options?: string[] | number[];
+  showSearch?: boolean;
+  onChange?: (size: number) => void;
+}
+
 export interface PaginationData {
   className: string;
   selectPrefixCls: string;
   prefixCls: string;
   pageSizeOptions: string[] | number[];
+  pageSizeChanger: pageSizeChangerLocale;
 
   current: number;
   defaultCurrent: number;
@@ -37,7 +44,7 @@ export interface PaginationData {
   showPrevNextJumpers: boolean;
   showQuickJumper: boolean | object;
   showTitle: boolean;
-  simple: boolean | { readOnly?: boolean; };
+  simple: boolean | { readOnly?: boolean };
   disabled: boolean;
 
   locale: PaginationLocale;

src/interface.ts

@@ -2874,6 +2874,134 @@ exports[`Example more 1`] = `
 </div>
 `;
 
+exports[`Example pageSizeChanger 1`] = `
+<div>
+  <ul
+    class="rc-pagination"
+  >
+    <li
+      aria-disabled="true"
+      class="rc-pagination-prev rc-pagination-disabled"
+      title="上一页"
+    >
+      <button
+        aria-label="prev page"
+        class="rc-pagination-item-link"
+        disabled=""
+        type="button"
+      />
+    </li>
+    <li
+      class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="rc-pagination-item rc-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="rc-pagination-item rc-pagination-item-3"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="rc-pagination-item rc-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="rc-pagination-item rc-pagination-item-5"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="rc-pagination-next"
+      tabindex="0"
+      title="下一页"
+    >
+      <button
+        aria-label="next page"
+        class="rc-pagination-item-link"
+        type="button"
+      />
+    </li>
+    <li
+      class="rc-pagination-options"
+    >
+      <div
+        aria-label="页码"
+        class="rc-select rc-pagination-options-size-changer rc-select-single"
+      >
+        <div
+          class="rc-select-selector"
+        >
+          <span
+            class="rc-select-selection-search"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="页码"
+              aria-owns="rc_select_TEST_OR_SSR_list"
+              autocomplete="off"
+              class="rc-select-selection-search-input"
+              id="rc_select_TEST_OR_SSR"
+              readonly=""
+              role="combobox"
+              style="opacity: 0;"
+              type="search"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="rc-select-selection-item"
+            title="10 条/页"
+          >
+            10 条/页
+          </span>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`Example showTitle 1`] = `
 <div>
   <div>

tests/__snapshots__/demo.test.tsx.snap

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Select from 'rc-select';
+import Pagination from '../src';
+
+describe('Pagination with pageSizeChanger', () => {
+  it('should onChange called when pageSize change', () => {
+    const onChange = jest.fn();
+    const { container, getByRole } = render(
+      <Pagination
+        defaultCurrent={1}
+        total={500}
+        selectComponentClass={Select}
+        showSizeChanger
+        pageSizeChanger={{
+          options: [10, 25, 50, 75, 100],
+          showSearch: false,
+          onChange: onChange,
+        }}
+      />,
+    );
+    fireEvent.mouseDown(getByRole('combobox'));
+    expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent(
+      '50 条/页',
+    );
+    const pageSize1 = container.querySelectorAll('.rc-select-item')[0];
+    fireEvent.click(pageSize1);
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenLastCalledWith(10);
+  });
+});