Skip to content

Commit f4b851f

Browse files
prakashks20prakashmallowafc163
authored
feat: showSizeChanger accept SelectProps
Co-authored-by: Prakash Kandhasamy <[email protected]> Co-authored-by: afc163 <[email protected]>
1 parent 0176824 commit f4b851f

File tree

10 files changed

+553
-62
lines changed

10 files changed

+553
-62
lines changed

‎README.md‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -52,35 +52,36 @@ ReactDOM.render(<Pagination />, container);
5252

5353
## API
5454

55-
| Parameter | Description | Type | Default |
56-
| ---------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
57-
| disabled | disable pagination | Bool | - |
58-
| align | align of pagination | start \| center \| end | undefined |
59-
| defaultCurrent | uncontrolled current page | Number | 1 |
60-
| current | current page | Number | undefined |
61-
| total | items total count | Number | 0 |
62-
| defaultPageSize | default items per page | Number | 10 |
63-
| pageSize | items per page | Number | 10 |
64-
| onChange | page change callback | Function(current, pageSize) | - |
65-
| showSizeChanger | show pageSize changer | Bool | `false` when total less then `totalBoundaryShowSizeChanger`, `true` when otherwise |
66-
| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
67-
| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
68-
| onShowSizeChange | pageSize change callback | Function(current, size) | - |
69-
| hideOnSinglePage | hide on single page | Bool | false |
70-
| showPrevNextJumpers | show jump-prev, jump-next | Bool | true |
71-
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
72-
| showTotal | show total records and range | Function(total, [from, to]) | - |
73-
| className | className of pagination | String | - |
74-
| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
75-
| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
76-
| style | the style of pagination | Object | {} |
77-
| showLessItems | show less page items | Bool | false |
78-
| showTitle | show page items title | Bool | true |
79-
| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | |
80-
| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
81-
| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
82-
| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
83-
| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
55+
// prettier-ignore
56+
| Parameter | Description | Type | Default |
57+
| --- | --- | --- | --- |
58+
| disabled | disable pagination | Bool | - |
59+
| align | align of pagination | start \| center \| end | undefined |
60+
| defaultCurrent | uncontrolled current page | Number | 1 |
61+
| current | current page | Number | undefined |
62+
| total | items total count | Number | 0 |
63+
| defaultPageSize | default items per page | Number | 10 |
64+
| pageSize | items per page | Number | 10 |
65+
| onChange | page change callback | Function(current, pageSize) | - |
66+
| showSizeChanger | show pageSize changer | boolean \| [SelectProps](https://github.com/react-component/select/blob/561f8b7d69fd5dd2cd7d917c88976cca4e539a9d/src/Select.tsx#L112) | `false` when total less than `totalBoundaryShowSizeChanger`, `true` when otherwise |
67+
| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
68+
| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
69+
| onShowSizeChange | pageSize change callback | Function(current, size) | - |
70+
| hideOnSinglePage | hide on single page | Bool | false |
71+
| showPrevNextJumpers | show jump-prev, jump-next | Bool | true |
72+
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
73+
| showTotal | show total records and range | Function(total, [from, to]) | - |
74+
| className | className of pagination | String | - |
75+
| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
76+
| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
77+
| style | the style of pagination | Object | {} |
78+
| showLessItems | show less page items | Bool | false |
79+
| showTitle | show page items title | Bool | true |
80+
| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | |
81+
| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
82+
| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
83+
| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
84+
| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
8485

8586
## License
8687

‎docs/demo/showSizeChanger.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: showSizeChanger
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/showSizeChanger.tsx"></code>

‎docs/examples/showSizeChanger.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import Pagination from 'rc-pagination';
3+
import Select from 'rc-select';
4+
import '../../assets/index.less';
5+
6+
export default () => {
7+
const onPageSizeOnChange = (value) => {
8+
console.log(value);
9+
};
10+
11+
return (
12+
<>
13+
<Pagination
14+
defaultCurrent={1}
15+
total={50}
16+
selectComponentClass={Select}
17+
showSizeChanger={false}
18+
/>
19+
<Pagination
20+
defaultCurrent={1}
21+
total={50}
22+
selectComponentClass={Select}
23+
showSizeChanger
24+
/>
25+
<Pagination
26+
defaultCurrent={1}
27+
total={50}
28+
selectComponentClass={Select}
29+
showSizeChanger={{
30+
options: [
31+
{ value: '10', label: '10 条每页' },
32+
{ value: '25', label: '25 条每页' },
33+
{ value: '100', label: '100 条每页' },
34+
],
35+
className: 'my-select',
36+
showSearch: true,
37+
onChange: onPageSizeOnChange,
38+
}}
39+
/>
40+
</>
41+
);
42+
};

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"@rc-component/father-plugin": "^1.0.0",
5151
"@testing-library/jest-dom": "^6.1.5",
5252
"@testing-library/react": "^15.0.4",
53+
"@testing-library/user-event": "^14.5.2",
5354
"@types/jest": "^29.2.2",
5455
"@types/react": "^18.0.0",
5556
"@types/react-dom": "^18.0.0",

‎src/Options.tsx‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import type { SelectProps } from 'rc-select';
22
import type { OptionProps } from 'rc-select/es/Option';
33
import KEYCODE from 'rc-util/lib/KeyCode';
4+
import classNames from 'classnames';
45
import React from 'react';
5-
import type { PaginationLocale } from './interface';
6+
import type { PaginationLocale, PaginationProps } from './interface';
67

78
interface InternalSelectProps extends SelectProps {
89
/**
@@ -25,6 +26,7 @@ interface OptionsProps {
2526
selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
2627
Option?: React.ComponentType<Partial<OptionProps>>;
2728
};
29+
showSizeChanger: PaginationProps['showSizeChanger'];
2830
}
2931

3032
const defaultPageSizeOptions = ['10', '20', '50', '100'];
@@ -42,6 +44,7 @@ const Options: React.FC<OptionsProps> = (props) => {
4244
selectPrefixCls,
4345
disabled,
4446
buildOptionText,
47+
showSizeChanger,
4548
} = props;
4649

4750
const [goInputText, setGoInputText] = React.useState('');
@@ -57,8 +60,11 @@ const Options: React.FC<OptionsProps> = (props) => {
5760
? buildOptionText
5861
: (value: string) => `${value} ${locale.items_per_page}`;
5962

60-
const changeSizeHandle = (value: number) => {
63+
const changeSizeHandle = (value: number, option) => {
6164
changeSize?.(Number(value));
65+
if (typeof showSizeChanger === 'object') {
66+
showSizeChanger.onChange?.(value, option);
67+
}
6268
};
6369

6470
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -109,34 +115,49 @@ const Options: React.FC<OptionsProps> = (props) => {
109115

110116
// ============== render ==============
111117

112-
if (!changeSize && !quickGo) {
118+
if (!showSizeChanger && !quickGo) {
113119
return null;
114120
}
115121

116122
let changeSelect: React.ReactNode = null;
117123
let goInput: React.ReactNode = null;
118124
let gotoButton: React.ReactNode = null;
119125

120-
if (changeSize && Select) {
121-
const options = getPageSizeOptions().map<React.ReactNode>((opt, i) => (
122-
<Select.Option key={i} value={opt.toString()}>
123-
{mergeBuildOptionText(opt)}
124-
</Select.Option>
125-
));
126+
if (showSizeChanger && Select) {
127+
const {
128+
options: showSizeChangerOptions,
129+
className: showSizeChangerClassName,
130+
} =
131+
typeof showSizeChanger === 'object'
132+
? showSizeChanger
133+
: ({} as SelectProps);
134+
// use showSizeChanger.options if existed, otherwise use pageSizeOptions
135+
const options = showSizeChangerOptions
136+
? undefined
137+
: getPageSizeOptions().map((opt, i) => (
138+
<Select.Option key={i} value={opt.toString()}>
139+
{mergeBuildOptionText(opt)}
140+
</Select.Option>
141+
));
126142

127143
changeSelect = (
128144
<Select
129145
disabled={disabled}
130146
prefixCls={selectPrefixCls}
131147
showSearch={false}
132-
className={`${prefixCls}-size-changer`}
133-
optionLabelProp="children"
148+
optionLabelProp={showSizeChangerOptions ? 'label' : 'children'}
134149
popupMatchSelectWidth={false}
135150
value={(pageSize || pageSizeOptions[0]).toString()}
136-
onChange={changeSizeHandle}
137151
getPopupContainer={(triggerNode) => triggerNode.parentNode}
138152
aria-label={locale.page_size}
139153
defaultOpen={false}
154+
{...(typeof showSizeChanger === 'object' ? showSizeChanger : null)}
155+
className={classNames(
156+
`${prefixCls}-size-changer`,
157+
showSizeChangerClassName,
158+
)}
159+
options={showSizeChangerOptions}
160+
onChange={changeSizeHandle}
140161
>
141162
{options}
142163
</Select>

‎src/Pagination.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
6363
disabled,
6464
simple,
6565
showTotal,
66-
showSizeChanger: showSizeChangerProp,
66+
showSizeChanger = total > totalBoundaryShowSizeChanger,
6767
pageSizeOptions,
6868

6969
// render
@@ -225,8 +225,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {
225225

226226
const hasPrev = current > 1;
227227
const hasNext = current < calculatePage(undefined, pageSize, total);
228-
const showSizeChanger =
229-
showSizeChangerProp ?? total > totalBoundaryShowSizeChanger;
230228

231229
function prevHandle() {
232230
if (hasPrev) handleChange(current - 1);
@@ -586,11 +584,12 @@ const Pagination: React.FC<PaginationProps> = (props) => {
586584
disabled={disabled}
587585
selectComponentClass={selectComponentClass}
588586
selectPrefixCls={selectPrefixCls}
589-
changeSize={showSizeChanger ? changePageSize : null}
587+
changeSize={changePageSize}
590588
pageSize={pageSize}
591589
pageSizeOptions={pageSizeOptions}
592590
quickGo={shouldDisplayQuickJumper ? handleChange : null}
593591
goButton={gotoButton}
592+
showSizeChanger={showSizeChanger}
594593
/>
595594
</ul>
596595
);

‎src/interface.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type React from 'react';
2+
import type { SelectProps } from 'rc-select';
23

34
export interface PaginationLocale {
45
// Options
@@ -32,12 +33,12 @@ export interface PaginationData {
3233

3334
hideOnSinglePage: boolean;
3435
align: 'start' | 'center' | 'end';
35-
showSizeChanger: boolean;
36+
showSizeChanger: boolean | SelectProps;
3637
showLessItems: boolean;
3738
showPrevNextJumpers: boolean;
3839
showQuickJumper: boolean | object;
3940
showTitle: boolean;
40-
simple: boolean | { readOnly?: boolean; };
41+
simple: boolean | { readOnly?: boolean };
4142
disabled: boolean;
4243

4344
locale: PaginationLocale;
@@ -62,7 +63,6 @@ export interface PaginationProps
6263
element: React.ReactNode,
6364
) => React.ReactNode;
6465
showTotal?: (total: number, range: [number, number]) => React.ReactNode;
65-
6666
// WAI-ARIA
6767
role?: React.AriaRole | undefined;
6868
}

0 commit comments

Comments
 (0)