feat: Add sizeChangerRender instead of selectComponentClass

docs/examples/align.tsx

@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 const App = () => (
   <>

docs/examples/basic.tsx

@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 const App = () => (
   <>

docs/examples/controlled.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
 

docs/examples/itemRender.tsx

@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 const itemRender = (current, type, element) => {
   if (type === 'page') {

docs/examples/jumper.tsx

@@ -1,9 +1,8 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Select from 'rc-select';
-import Pagination from 'rc-pagination';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 function onShowSizeChange(current, pageSize) {
   console.log(current);
@@ -18,8 +17,8 @@ function onChange(current, pageSize) {
 const App = () => (
   <>
     <h3>默认</h3>
-    <Pagination
-      selectComponentClass={Select}
+    <PaginationWithSizeChanger
+      // selectComponentClass={Select}
       showQuickJumper
       showSizeChanger
       defaultPageSize={20}
@@ -29,8 +28,8 @@ const App = () => (
       total={450}
     />
     <h3>禁用</h3>
-    <Pagination
-      selectComponentClass={Select}
+    <PaginationWithSizeChanger
+      // selectComponentClass={Select}
       showQuickJumper
       showSizeChanger
       defaultPageSize={20}
@@ -41,17 +40,17 @@ const App = () => (
       disabled
     />
     <h3>单页默认隐藏</h3>
-    <Pagination
-      selectComponentClass={Select}
+    <PaginationWithSizeChanger
+      // selectComponentClass={Select}
       showQuickJumper
       showSizeChanger
       onShowSizeChange={onShowSizeChange}
       onChange={onChange}
       total={8}
     />
     <br />
-    <Pagination
-      selectComponentClass={Select}
+    <PaginationWithSizeChanger
+      // selectComponentClass={Select}
       showQuickJumper
       showSizeChanger
       onShowSizeChange={onShowSizeChange}

docs/examples/jumperWithGoButton.tsx

@@ -1,9 +1,9 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Select from 'rc-select';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 class App extends React.Component {
   onShowSizeChange = (current, pageSize) => {
@@ -20,8 +20,8 @@ class App extends React.Component {
     return (
       <>
         <p> customize node </p>
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           showSizeChanger
           showQuickJumper={{ goButton: <button type="button">确定</button> }}
           defaultPageSize={20}

docs/examples/lessPages.tsx

@@ -1,6 +1,6 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 
 const arrowPath =

docs/examples/locale.tsx

@@ -1,10 +1,9 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Select from 'rc-select';
-import Pagination from 'rc-pagination';
 import localeInfo from '../../src/locale/en_US';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 function onShowSizeChange(current, pageSize) {
   console.log(current);
@@ -17,8 +16,8 @@ function onChange(current, pageSize) {
 }
 
 const App = () => (
-  <Pagination
-    selectComponentClass={Select}
+  <PaginationWithSizeChanger
+    // selectComponentClass={Select}
     showQuickJumper
     showSizeChanger
     defaultPageSize={20}

docs/examples/more.tsx

@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 const App = () => (
   <Pagination className="ant-pagination" defaultCurrent={3} total={450} />

docs/examples/showSizeChanger.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import Pagination from 'rc-pagination';
-import Select from 'rc-select';
 import '../../assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 export default () => {
   const onPageSizeOnChange = (value) => {
@@ -10,31 +9,31 @@ export default () => {
 
   return (
     <>
-      <Pagination
+      <PaginationWithSizeChanger
         defaultCurrent={1}
         total={50}
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
         showSizeChanger={false}
       />
-      <Pagination
+      <PaginationWithSizeChanger
         defaultCurrent={1}
         total={50}
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
         showSizeChanger
       />
-      <Pagination
+      <PaginationWithSizeChanger
         defaultCurrent={1}
-        total={50}
-        selectComponentClass={Select}
-        showSizeChanger={{
+        showSizeChanger
+        // selectComponentClass={Select}
+        sizeChangerProps={{
           options: [
-            { value: '10', label: '10 条每页' },
-            { value: '25', label: '25 条每页' },
-            { value: '100', label: '100 条每页' },
+            { value: 10, label: '10 条每页' },
+            { value: 25, label: '25 条每页' },
+            { value: 100, label: '100 条每页' },
           ],
-          className: 'my-select',
-          showSearch: true,
-          onChange: onPageSizeOnChange,
+          // className: 'my-select',
+          // showSearch: true,
+          // onChange: onPageSizeOnChange,
         }}
       />
     </>

docs/examples/showTitle.tsx

@@ -1,6 +1,6 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 
 class App extends React.Component {

docs/examples/showTotal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 
 const App = () => (

docs/examples/simple.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import Pagination from 'rc-pagination';
-import Select from 'rc-select';
+import Pagination from '../../src';
 import '../../assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 export default () => {
   const [pageIndex, setPageIndex] = useState(1);
@@ -32,24 +32,24 @@ export default () => {
         showTotal={(total) => `Total ${total} items`}
       />
       <br />
-      <Pagination
+      <PaginationWithSizeChanger
         simple
         defaultCurrent={1}
         total={50}
         showSizeChanger
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
       />
       <hr />
       <a href="https://github.com/ant-design/ant-design/issues/46671">
         Antd #46671
       </a>
-      <Pagination
+      <PaginationWithSizeChanger
         simple
         defaultCurrent={1}
         total={50}
         showSizeChanger
         showQuickJumper
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
       />
     </>
   );

docs/examples/sizer.tsx

@@ -1,9 +1,8 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Select from 'rc-select';
-import Pagination from 'rc-pagination';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 class App extends React.Component {
   state = {
@@ -19,30 +18,30 @@ class App extends React.Component {
     const { pageSize } = this.state;
     return (
       <div style={{ margin: 10 }}>
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           showSizeChanger
           pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={40}
         />
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={50}
         />
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={60}
         />
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           showSizeChanger={false}
           pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}

docs/examples/styles.tsx

@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 export default () => (
   <Pagination defaultCurrent={2} total={25} style={{ margin: '100px' }} />

docs/examples/utils/commonUtil.tsx

@@ -0,0 +1,49 @@
+import type { PaginationProps } from 'rc-pagination';
+import Pagination from '../../../src';
+import Select from 'rc-select';
+import React from 'react';
+
+export const getSizeChangerRender = (selectProps?: any) => {
+  const render: PaginationProps['sizeChangerRender'] = ({
+    disabled,
+    size: pageSize,
+    onSizeChange,
+    'aria-label': ariaLabel,
+    className,
+    options,
+  }) => (
+    <Select
+      disabled={disabled}
+      // prefixCls={selectPrefixCls}
+      showSearch={false}
+      // optionLabelProp={showSizeChangerOptions ? 'label' : 'children'}
+      // popupMatchSelectWidth={false}
+      dropdownMatchSelectWidth={false}
+      value={pageSize || options[0].value}
+      getPopupContainer={(triggerNode) => triggerNode.parentNode}
+      aria-label={ariaLabel}
+      defaultOpen={false}
+      // {...(typeof showSizeChanger === 'object' ? showSizeChanger : null)}
+      className={className}
+      options={options}
+      onChange={onSizeChange}
+      {...selectProps}
+    />
+  );
+
+  return render;
+};
+
+export default function PaginationWithSizeChanger({
+  sizeChangerProps,
+  ...props
+}: Omit<PaginationProps, 'sizeChangerRender'> & {
+  sizeChangerProps?: any;
+}) {
+  return (
+    <Pagination
+      {...props}
+      sizeChangerRender={getSizeChangerRender(sizeChangerProps)}
+    />
+  );
+}

jest.config.js

@@ -1,8 +1,6 @@
-const pkg = require('./package.json');
 module.exports = {
   setupFilesAfterEnv: ['<rootDir>/tests/setupAfterEnv.ts'],
   moduleNameMapper: {
-    [pkg.name]: '<rootDir>/src/index.ts',
     '\\.less$': 'identity-obj-proxy',
   },
   collectCoverageFrom: ['src/**', '!src/locale/**'],

package.json

@@ -70,7 +70,7 @@
     "lint-staged": "^15.0.2",
     "np": "^10.0.5",
     "prettier": "^3.1.0",
-    "rc-select": "^14.1.2",
+    "rc-select": "^14.16.4",
     "rc-test": "^7.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"