Skip to content

Commit 1784380

Browse files
zombieJzombieJ
authored
feat: Add sizeChangerRender instead of selectComponentClass (#631)
* chore: init docs * docs: all cover * test: fix index test * test: fix test * fix: type * test: fix test * chore: update demo * docs: back * test: fix test * test: fix test * chore: fix lint * test: update snapshot
1 parent 8f26e36 commit 1784380

29 files changed

+753
-601
lines changed

‎docs/examples/align.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '../../assets/index.less';
22
import React from 'react';
3-
import Pagination from 'rc-pagination';
3+
import Pagination from '../../src';
44

55
const App = () => (
66
<>

‎docs/examples/basic.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '../../assets/index.less';
22
import React from 'react';
3-
import Pagination from 'rc-pagination';
3+
import Pagination from '../../src';
44

55
const App = () => (
66
<>

‎docs/examples/controlled.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import Pagination from 'rc-pagination';
2+
import Pagination from '../../src';
33
import '../../assets/index.less';
44
import 'rc-select/assets/index.less';
55

‎docs/examples/itemRender.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '../../assets/index.less';
22
import React from 'react';
3-
import Pagination from 'rc-pagination';
3+
import Pagination from '../../src';
44

55
const itemRender = (current, type, element) => {
66
if (type === 'page') {

‎docs/examples/jumper.tsx

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
/* eslint func-names: 0, no-console: 0 */
22
import React from 'react';
3-
import Select from 'rc-select';
4-
import Pagination from 'rc-pagination';
53
import '../../assets/index.less';
64
import 'rc-select/assets/index.less';
5+
import PaginationWithSizeChanger from './utils/commonUtil';
76

87
function onShowSizeChange(current, pageSize) {
98
console.log(current);
@@ -18,8 +17,8 @@ function onChange(current, pageSize) {
1817
const App = () => (
1918
<>
2019
<h3>默认</h3>
21-
<Pagination
22-
selectComponentClass={Select}
20+
<PaginationWithSizeChanger
21+
// selectComponentClass={Select}
2322
showQuickJumper
2423
showSizeChanger
2524
defaultPageSize={20}
@@ -29,8 +28,8 @@ const App = () => (
2928
total={450}
3029
/>
3130
<h3>禁用</h3>
32-
<Pagination
33-
selectComponentClass={Select}
31+
<PaginationWithSizeChanger
32+
// selectComponentClass={Select}
3433
showQuickJumper
3534
showSizeChanger
3635
defaultPageSize={20}
@@ -41,17 +40,17 @@ const App = () => (
4140
disabled
4241
/>
4342
<h3>单页默认隐藏</h3>
44-
<Pagination
45-
selectComponentClass={Select}
43+
<PaginationWithSizeChanger
44+
// selectComponentClass={Select}
4645
showQuickJumper
4746
showSizeChanger
4847
onShowSizeChange={onShowSizeChange}
4948
onChange={onChange}
5049
total={8}
5150
/>
5251
<br />
53-
<Pagination
54-
selectComponentClass={Select}
52+
<PaginationWithSizeChanger
53+
// selectComponentClass={Select}
5554
showQuickJumper
5655
showSizeChanger
5756
onShowSizeChange={onShowSizeChange}

‎docs/examples/jumperWithGoButton.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* eslint func-names: 0, no-console: 0 */
22
import React from 'react';
3-
import Select from 'rc-select';
4-
import Pagination from 'rc-pagination';
3+
import Pagination from '../../src';
54
import '../../assets/index.less';
65
import 'rc-select/assets/index.less';
6+
import PaginationWithSizeChanger from './utils/commonUtil';
77

88
class App extends React.Component {
99
onShowSizeChange = (current, pageSize) => {
@@ -20,8 +20,8 @@ class App extends React.Component {
2020
return (
2121
<>
2222
<p> customize node </p>
23-
<Pagination
24-
selectComponentClass={Select}
23+
<PaginationWithSizeChanger
24+
// selectComponentClass={Select}
2525
showSizeChanger
2626
showQuickJumper={{ goButton: <button type="button">确定</button> }}
2727
defaultPageSize={20}

‎docs/examples/lessPages.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint func-names: 0, no-console: 0 */
22
import React from 'react';
3-
import Pagination from 'rc-pagination';
3+
import Pagination from '../../src';
44
import '../../assets/index.less';
55

66
const arrowPath =

‎docs/examples/locale.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
/* eslint func-names: 0, no-console: 0 */
22
import React from 'react';
3-
import Select from 'rc-select';
4-
import Pagination from 'rc-pagination';
53
import localeInfo from '../../src/locale/en_US';
64
import '../../assets/index.less';
75
import 'rc-select/assets/index.less';
6+
import PaginationWithSizeChanger from './utils/commonUtil';
87

98
function onShowSizeChange(current, pageSize) {
109
console.log(current);
@@ -17,8 +16,8 @@ function onChange(current, pageSize) {
1716
}
1817

1918
const App = () => (
20-
<Pagination
21-
selectComponentClass={Select}
19+
<PaginationWithSizeChanger
20+
// selectComponentClass={Select}
2221
showQuickJumper
2322
showSizeChanger
2423
defaultPageSize={20}

‎docs/examples/more.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '../../assets/index.less';
22
import React from 'react';
3-
import Pagination from 'rc-pagination';
3+
import Pagination from '../../src';
44

55
const App = () => (
66
<Pagination className="ant-pagination" defaultCurrent={3} total={450} />

‎docs/examples/showSizeChanger.tsx

+15-16
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
2-
import Pagination from 'rc-pagination';
3-
import Select from 'rc-select';
42
import '../../assets/index.less';
3+
import PaginationWithSizeChanger from './utils/commonUtil';
54

65
export default () => {
76
const onPageSizeOnChange = (value) => {
@@ -10,31 +9,31 @@ export default () => {
109

1110
return (
1211
<>
13-
<Pagination
12+
<PaginationWithSizeChanger
1413
defaultCurrent={1}
1514
total={50}
16-
selectComponentClass={Select}
15+
// selectComponentClass={Select}
1716
showSizeChanger={false}
1817
/>
19-
<Pagination
18+
<PaginationWithSizeChanger
2019
defaultCurrent={1}
2120
total={50}
22-
selectComponentClass={Select}
21+
// selectComponentClass={Select}
2322
showSizeChanger
2423
/>
25-
<Pagination
24+
<PaginationWithSizeChanger
2625
defaultCurrent={1}
27-
total={50}
28-
selectComponentClass={Select}
29-
showSizeChanger={{
26+
showSizeChanger
27+
// selectComponentClass={Select}
28+
sizeChangerProps={{
3029
options: [
31-
{ value: '10', label: '10 条每页' },
32-
{ value: '25', label: '25 条每页' },
33-
{ value: '100', label: '100 条每页' },
30+
{ value: 10, label: '10 条每页' },
31+
{ value: 25, label: '25 条每页' },
32+
{ value: 100, label: '100 条每页' },
3433
],
35-
className: 'my-select',
36-
showSearch: true,
37-
onChange: onPageSizeOnChange,
34+
// className: 'my-select',
35+
// showSearch: true,
36+
// onChange: onPageSizeOnChange,
3837
}}
3938
/>
4039
</>

‎docs/examples/showTitle.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint func-names: 0, no-console: 0 */
22
import React from 'react';
3-
import Pagination from 'rc-pagination';
3+
import Pagination from '../../src';
44
import '../../assets/index.less';
55

66
class App extends React.Component {

‎docs/examples/showTotal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Pagination from 'rc-pagination';
2+
import Pagination from '../../src';
33
import '../../assets/index.less';
44

55
const App = () => (

‎docs/examples/simple.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
2-
import Pagination from 'rc-pagination';
3-
import Select from 'rc-select';
2+
import Pagination from '../../src';
43
import '../../assets/index.less';
4+
import PaginationWithSizeChanger from './utils/commonUtil';
55

66
export default () => {
77
const [pageIndex, setPageIndex] = useState(1);
@@ -32,24 +32,24 @@ export default () => {
3232
showTotal={(total) => `Total ${total} items`}
3333
/>
3434
<br />
35-
<Pagination
35+
<PaginationWithSizeChanger
3636
simple
3737
defaultCurrent={1}
3838
total={50}
3939
showSizeChanger
40-
selectComponentClass={Select}
40+
// selectComponentClass={Select}
4141
/>
4242
<hr />
4343
<a href="https://github.com/ant-design/ant-design/issues/46671">
4444
Antd #46671
4545
</a>
46-
<Pagination
46+
<PaginationWithSizeChanger
4747
simple
4848
defaultCurrent={1}
4949
total={50}
5050
showSizeChanger
5151
showQuickJumper
52-
selectComponentClass={Select}
52+
// selectComponentClass={Select}
5353
/>
5454
</>
5555
);

‎docs/examples/sizer.tsx

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
/* eslint func-names: 0, no-console: 0 */
22
import React from 'react';
3-
import Select from 'rc-select';
4-
import Pagination from 'rc-pagination';
53
import '../../assets/index.less';
64
import 'rc-select/assets/index.less';
5+
import PaginationWithSizeChanger from './utils/commonUtil';
76

87
class App extends React.Component {
98
state = {
@@ -19,30 +18,30 @@ class App extends React.Component {
1918
const { pageSize } = this.state;
2019
return (
2120
<div style={{ margin: 10 }}>
22-
<Pagination
23-
selectComponentClass={Select}
21+
<PaginationWithSizeChanger
22+
// selectComponentClass={Select}
2423
showSizeChanger
2524
pageSize={pageSize}
2625
onShowSizeChange={this.onShowSizeChange}
2726
defaultCurrent={3}
2827
total={40}
2928
/>
30-
<Pagination
31-
selectComponentClass={Select}
29+
<PaginationWithSizeChanger
30+
// selectComponentClass={Select}
3231
pageSize={pageSize}
3332
onShowSizeChange={this.onShowSizeChange}
3433
defaultCurrent={3}
3534
total={50}
3635
/>
37-
<Pagination
38-
selectComponentClass={Select}
36+
<PaginationWithSizeChanger
37+
// selectComponentClass={Select}
3938
pageSize={pageSize}
4039
onShowSizeChange={this.onShowSizeChange}
4140
defaultCurrent={3}
4241
total={60}
4342
/>
44-
<Pagination
45-
selectComponentClass={Select}
43+
<PaginationWithSizeChanger
44+
// selectComponentClass={Select}
4645
showSizeChanger={false}
4746
pageSize={pageSize}
4847
onShowSizeChange={this.onShowSizeChange}

‎docs/examples/styles.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import '../../assets/index.less';
22
import React from 'react';
3-
import Pagination from 'rc-pagination';
3+
import Pagination from '../../src';
44

55
export default () => (
66
<Pagination defaultCurrent={2} total={25} style={{ margin: '100px' }} />

‎docs/examples/utils/commonUtil.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import type { PaginationProps } from 'rc-pagination';
2+
import Pagination from '../../../src';
3+
import Select from 'rc-select';
4+
import React from 'react';
5+
6+
export const getSizeChangerRender = (selectProps?: any) => {
7+
const render: PaginationProps['sizeChangerRender'] = ({
8+
disabled,
9+
size: pageSize,
10+
onSizeChange,
11+
'aria-label': ariaLabel,
12+
className,
13+
options,
14+
}) => (
15+
<Select
16+
disabled={disabled}
17+
// prefixCls={selectPrefixCls}
18+
showSearch={false}
19+
// optionLabelProp={showSizeChangerOptions ? 'label' : 'children'}
20+
// popupMatchSelectWidth={false}
21+
dropdownMatchSelectWidth={false}
22+
value={pageSize || options[0].value}
23+
getPopupContainer={(triggerNode) => triggerNode.parentNode}
24+
aria-label={ariaLabel}
25+
defaultOpen={false}
26+
// {...(typeof showSizeChanger === 'object' ? showSizeChanger : null)}
27+
className={className}
28+
options={options}
29+
onChange={onSizeChange}
30+
{...selectProps}
31+
/>
32+
);
33+
34+
return render;
35+
};
36+
37+
export default function PaginationWithSizeChanger({
38+
sizeChangerProps,
39+
...props
40+
}: Omit<PaginationProps, 'sizeChangerRender'> & {
41+
sizeChangerProps?: any;
42+
}) {
43+
return (
44+
<Pagination
45+
{...props}
46+
sizeChangerRender={getSizeChangerRender(sizeChangerProps)}
47+
/>
48+
);
49+
}

‎jest.config.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
const pkg = require('./package.json');
21
module.exports = {
32
setupFilesAfterEnv: ['<rootDir>/tests/setupAfterEnv.ts'],
43
moduleNameMapper: {
5-
[pkg.name]: '<rootDir>/src/index.ts',
64
'\\.less$': 'identity-obj-proxy',
75
},
86
collectCoverageFrom: ['src/**', '!src/locale/**'],

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
"lint-staged": "^15.0.2",
7171
"np": "^10.0.5",
7272
"prettier": "^3.1.0",
73-
"rc-select": "^14.1.2",
73+
"rc-select": "^14.16.4",
7474
"rc-test": "^7.0.15",
7575
"react": "^18.2.0",
7676
"react-dom": "^18.2.0"

0 commit comments

Comments
 (0)