Skip to content

Commit ec5e696

Browse files
EnigamaEEnigamaE
committed
fix: update page size changer select prop, doc
1 parent 0ac9d65 commit ec5e696

File tree

6 files changed

+62
-36
lines changed

6 files changed

+62
-36
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ ReactDOM.render(<Pagination />, container);
6363
| onChange | page change callback | Function(current, pageSize) | - |
6464
| showSizeChanger | show pageSize changer | Bool | `false` when total less then `totalBoundaryShowSizeChanger`, `true` when otherwise |
6565
| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
66-
| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
67-
| onShowSizeChange | pageSize change callback | Function(current, size) | - |
68-
| showSizeOptionsSearch | when true can search in sizeChanger select | Bool | false |
66+
| pageSizeOptions(deprecated) | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
67+
| onShowSizeChange(deprecated) | pageSize change callback | Function(current, size) | - |
68+
| pageSizeChanger | page size changer select options | {showSearch: boolean, options: Array<String>, onChange: Function(current, size)} | {options: ['10', '20', '50', '100'], showSearch: false} |
6969
| hideOnSinglePage | hide on single page | Bool | false |
7070
| showPrevNextJumpers | show jump-prev, jump-next | Bool | true |
7171
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |

‎docs/examples/sizer.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,28 @@ class App extends React.Component {
2323
selectComponentClass={Select}
2424
showSizeChanger
2525
pageSize={pageSize}
26-
onShowSizeChange={this.onShowSizeChange}
27-
showSizeOptionsSearch={true}
26+
pageSizeChanger={{
27+
onChange: this.onShowSizeChange,
28+
}}
2829
defaultCurrent={3}
2930
total={40}
3031
/>
3132
<Pagination
3233
selectComponentClass={Select}
3334
pageSize={pageSize}
34-
onShowSizeChange={this.onShowSizeChange}
35+
pageSizeChanger={{
36+
onChange: this.onShowSizeChange,
37+
showSearch: true,
38+
}}
3539
defaultCurrent={3}
3640
total={50}
3741
/>
3842
<Pagination
3943
selectComponentClass={Select}
4044
pageSize={pageSize}
41-
onShowSizeChange={this.onShowSizeChange}
45+
pageSizeChanger={{
46+
onChange: this.onShowSizeChange,
47+
}}
4248
defaultCurrent={3}
4349
total={60}
4450
/>

‎src/Options.tsx

+19-20
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { SelectProps } from 'rc-select';
22
import type { OptionProps } from 'rc-select/es/Option';
33
import KEYCODE from 'rc-util/lib/KeyCode';
44
import React from 'react';
5-
import type { PaginationLocale } from './interface';
5+
import type { PaginationLocale, PaginationPageSizeChanger } from './interface';
66

77
interface InternalSelectProps extends SelectProps {
88
/**
@@ -11,16 +11,15 @@ interface InternalSelectProps extends SelectProps {
1111
popupMatchSelectWidth?: boolean;
1212
}
1313

14-
interface OptionsProps {
14+
interface OptionsProps
15+
extends Partial<Pick<PaginationPageSizeChanger, 'options' | 'showSearch'>> {
1516
disabled?: boolean;
1617
locale: PaginationLocale;
1718
rootPrefixCls: string;
1819
selectPrefixCls?: string;
1920
pageSize: number;
20-
pageSizeOptions?: (string | number)[];
21-
showSearch?: boolean;
2221
goButton?: boolean | string;
23-
changeSize?: (size: number) => void;
22+
onChange?: (size: number) => void;
2423
quickGo?: (value: number) => void;
2524
buildOptionText?: (value: string | number) => string;
2625
selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
@@ -32,18 +31,18 @@ const defaultPageSizeOptions = ['10', '20', '50', '100'];
3231

3332
const Options: React.FC<OptionsProps> = (props) => {
3433
const {
35-
pageSizeOptions = defaultPageSizeOptions,
3634
locale,
37-
changeSize,
3835
pageSize,
3936
goButton,
4037
quickGo,
4138
rootPrefixCls,
4239
selectComponentClass: Select,
43-
showSearch,
4440
selectPrefixCls,
4541
disabled,
4642
buildOptionText,
43+
options = defaultPageSizeOptions,
44+
onChange,
45+
showSearch,
4746
} = props;
4847

4948
const [goInputText, setGoInputText] = React.useState('');
@@ -59,8 +58,8 @@ const Options: React.FC<OptionsProps> = (props) => {
5958
? buildOptionText
6059
: (value: string) => `${value} ${locale.items_per_page}`;
6160

62-
const changeSizeHandle = (value: number) => {
63-
changeSize?.(Number(value));
61+
const handleChangeSize = (value: number) => {
62+
onChange?.(Number(value));
6463
};
6564

6665
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -94,13 +93,13 @@ const Options: React.FC<OptionsProps> = (props) => {
9493

9594
const getPageSizeOptions = () => {
9695
if (
97-
pageSizeOptions.some(
98-
(option) => option.toString() === pageSize.toString(),
96+
options.some(
97+
(option: unknown) => option.toString() === pageSize.toString(),
9998
)
10099
) {
101-
return pageSizeOptions;
100+
return options;
102101
}
103-
return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => {
102+
return options.concat([pageSize.toString()]).sort((a, b) => {
104103
const numberA = Number.isNaN(Number(a)) ? 0 : Number(a);
105104
const numberB = Number.isNaN(Number(b)) ? 0 : Number(b);
106105
return numberA - numberB;
@@ -111,16 +110,16 @@ const Options: React.FC<OptionsProps> = (props) => {
111110

112111
// ============== render ==============
113112

114-
if (!changeSize && !quickGo) {
113+
if (!onChange && !quickGo) {
115114
return null;
116115
}
117116

118117
let changeSelect: React.ReactNode = null;
119118
let goInput: React.ReactNode = null;
120119
let gotoButton: React.ReactNode = null;
121120

122-
if (changeSize && Select) {
123-
const options = getPageSizeOptions().map<React.ReactNode>((opt, i) => (
121+
if (onChange && Select) {
122+
const slectOptions = getPageSizeOptions().map<React.ReactNode>((opt, i) => (
124123
<Select.Option key={i} value={opt.toString()}>
125124
{mergeBuildOptionText(opt)}
126125
</Select.Option>
@@ -134,13 +133,13 @@ const Options: React.FC<OptionsProps> = (props) => {
134133
className={`${prefixCls}-size-changer`}
135134
optionLabelProp="children"
136135
popupMatchSelectWidth={false}
137-
value={(pageSize || pageSizeOptions[0]).toString()}
138-
onChange={changeSizeHandle}
136+
value={(pageSize || options[0]).toString()}
137+
onChange={handleChangeSize}
139138
getPopupContainer={(triggerNode) => triggerNode.parentNode}
140139
aria-label={locale.page_size}
141140
defaultOpen={false}
142141
>
143-
{options}
142+
{slectOptions}
144143
</Select>
145144
);
146145
}

‎src/Pagination.tsx

+12-6
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {
5656
showLessItems,
5757
showTitle = true,
5858
onShowSizeChange = noop,
59-
showSizeOptionsSearch,
6059
locale = zhCN,
6160
style,
6261
totalBoundaryShowSizeChanger = 50,
@@ -65,6 +64,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
6564
showTotal,
6665
showSizeChanger: showSizeChangerProp,
6766
pageSizeOptions,
67+
pageSizeChanger = {},
6868

6969
// render
7070
itemRender = defaultItemRender,
@@ -94,6 +94,12 @@ const Pagination: React.FC<PaginationProps> = (props) => {
9494
setInternalInputVal(current);
9595
}, [current]);
9696

97+
const {
98+
onChange: onPageSizeChange = onShowSizeChange || noop,
99+
showSearch,
100+
options = pageSizeOptions,
101+
} = pageSizeChanger;
102+
97103
const hasOnChange = onChange !== noop;
98104
const hasCurrent = 'current' in props;
99105

@@ -188,14 +194,14 @@ const Pagination: React.FC<PaginationProps> = (props) => {
188194
handleChange(getValidValue(event));
189195
}
190196

191-
function changePageSize(size: number) {
197+
function handlePageSize(size: number) {
192198
const newCurrent = calculatePage(size, pageSize, total);
193199
const nextCurrent =
194200
current > newCurrent && newCurrent !== 0 ? newCurrent : current;
195201

196202
setPageSize(size);
197203
setInternalInputVal(nextCurrent);
198-
onShowSizeChange?.(current, size);
204+
onPageSizeChange?.(current, size);
199205
setCurrent(nextCurrent);
200206
onChange?.(nextCurrent, size);
201207
}
@@ -577,11 +583,11 @@ const Pagination: React.FC<PaginationProps> = (props) => {
577583
rootPrefixCls={prefixCls}
578584
disabled={disabled}
579585
selectComponentClass={selectComponentClass}
580-
showSearch={showSizeOptionsSearch}
586+
showSearch={showSearch}
581587
selectPrefixCls={selectPrefixCls}
582-
changeSize={showSizeChanger ? changePageSize : null}
583588
pageSize={pageSize}
584-
pageSizeOptions={pageSizeOptions}
589+
onChange={showSizeChanger ? handlePageSize : null}
590+
options={options}
585591
quickGo={shouldDisplayQuickJumper ? handleChange : null}
586592
goButton={gotoButton}
587593
/>

‎src/interface.ts

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { SelectProps } from 'rc-select';
12
import type React from 'react';
23

34
export interface PaginationLocale {
@@ -17,10 +18,19 @@ export interface PaginationLocale {
1718
page_size?: string;
1819
}
1920

21+
export interface PaginationPageSizeChanger
22+
extends Pick<SelectProps, 'showSearch'> {
23+
options?: string[] | number[];
24+
onChange?: (current: number, size: number) => void;
25+
}
26+
2027
export interface PaginationData {
2128
className: string;
2229
selectPrefixCls: string;
2330
prefixCls: string;
31+
/**
32+
* @deprecated use pageSizeChanger={{options}} instead, will be removed in v4.0.5
33+
*/
2434
pageSizeOptions: string[] | number[];
2535

2636
current: number;
@@ -32,7 +42,7 @@ export interface PaginationData {
3242

3343
hideOnSinglePage: boolean;
3444
showSizeChanger: boolean;
35-
showSizeOptionsSearch?: boolean;
45+
pageSizeChanger: PaginationPageSizeChanger;
3646
showLessItems: boolean;
3747
showPrevNextJumpers: boolean;
3848
showQuickJumper: boolean | object;
@@ -55,6 +65,9 @@ export interface PaginationProps
5565
extends Partial<PaginationData>,
5666
React.AriaAttributes {
5767
onChange?: (page: number, pageSize: number) => void;
68+
/**
69+
* @deprecated use pageSizeChanger={{onChange}} instead, will be removed in v4.0.5
70+
*/
5871
onShowSizeChange?: (current: number, size: number) => void;
5972
itemRender?: (
6073
page: number,

‎tests/sizer.test.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,9 @@ describe('Pagination with sizer', () => {
7474
total={500}
7575
pageSize={15}
7676
showSizeChanger
77-
showSizeOptionsSearch
77+
pageSizeChanger={{
78+
showSearch: true,
79+
}}
7880
selectComponentClass={Select}
7981
/>,
8082
);
@@ -90,7 +92,7 @@ describe('Pagination with sizer', () => {
9092
selectComponentClass={Select}
9193
total={500}
9294
defaultPageSize={20}
93-
pageSizeOptions={[20, 50]}
95+
pageSizeChanger={{ options: [20, 50] }}
9496
/>,
9597
);
9698
expect(

0 commit comments

Comments
 (0)