Skip to content

Commit d670bfb

Browse files
afc163afc163
committed
chore: pass showSizeChanger to Select component
1 parent af3e072 commit d670bfb

File tree

3 files changed

+40
-46
lines changed

3 files changed

+40
-46
lines changed

‎README.md‎

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -48,39 +48,35 @@ Local example: `npm run start` then `http://localhost:9001`
4848
import Pagination from 'rc-pagination';
4949

5050
ReactDOM.render(<Pagination />, container);
51-
```
52-
53-
## API
54-
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 | Boolean or Object => { options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) } | `false` when the total is less than `totalBoundaryShowSizeChanger`, `true` otherwise, or specify `options` as sizeChanger selections. `showSearch` in the sizeChanger Select component allows searching the size, with the default value being false. `onChange` returns the size change value only through the callback function. The object should be formatted as: `{ options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) }`. The value can be either `true/false` or `{ showSearch: false, options:['10', '20', '50', '100'], onChange: (size: number) => void }`. |
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 | |
51+
| Parameter | Description | Type | Default |
52+
| --- | --- | --- | --- |
53+
| disabled | disable pagination | Bool | - |
54+
| align | align of pagination | start \| center \| end | undefined |
55+
| defaultCurrent | uncontrolled current page | Number | 1 |
56+
| current | current page | Number | undefined |
57+
| total | items total count | Number | 0 |
58+
| defaultPageSize | default items per page | Number | 10 |
59+
| pageSize | items per page | Number | 10 |
60+
| onChange | page change callback | Function(current, pageSize) | - |
61+
| showSizeChanger | show pageSize changer | Boolean or Object | `false` when the total is less than `totalBoundaryShowSizeChanger`, `true` otherwise, or specify `options` as sizeChanger selections. `showSearch` in the sizeChanger Select component allows searching the size, with the default value being false. `onChange` returns the size change value only through the callback function. The object should be formatted as: `{ options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) }`. The value can be either `true/false` or `{ showSearch: false, options:['10', '20', '50', '100'], onChange: (size: number) => void }`. |
62+
| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
63+
| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
64+
| onShowSizeChange | pageSize change callback | Function(current, size) | - |
65+
| hideOnSinglePage | hide on single page | Bool | false |
66+
| showPrevNextJumpers | show jump-prev, jump-next | Bool | true |
67+
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
68+
| showTotal | show total records and range | Function(total, [from, to]) | - |
69+
| className | className of pagination | String | - |
70+
| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
71+
| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
72+
| style | the style of pagination | Object | {} |
73+
| showLessItems | show less page items | Bool | false |
74+
| showTitle | show page items title | Bool | true |
75+
| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | |
76+
| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
77+
| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
78+
| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
79+
| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
8480
8581
## License
8682

‎src/Options.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@ interface OptionsProps {
2525
selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
2626
Option?: React.ComponentType<Partial<OptionProps>>;
2727
};
28-
showSearch: boolean;
29-
onChange: (size: number) => void;
28+
showSizeChanger: SelectProps,
3029
}
3130

3231
const defaultPageSizeOptions = ['10', '20', '50', '100'];
@@ -44,8 +43,7 @@ const Options: React.FC<OptionsProps> = (props) => {
4443
selectPrefixCls,
4544
disabled,
4645
buildOptionText,
47-
showSearch = false,
48-
onChange,
46+
showSizeChanger,
4947
} = props;
5048

5149
const [goInputText, setGoInputText] = React.useState('');
@@ -63,9 +61,6 @@ const Options: React.FC<OptionsProps> = (props) => {
6361

6462
const changeSizeHandle = (value: number) => {
6563
changeSize?.(Number(value));
66-
if (onChange && typeof onChange === 'function') {
67-
onChange?.(Number(value));
68-
}
6964
};
7065

7166
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -125,7 +120,7 @@ const Options: React.FC<OptionsProps> = (props) => {
125120
let gotoButton: React.ReactNode = null;
126121

127122
if (changeSize && Select) {
128-
const options = getPageSizeOptions().map<React.ReactNode>((opt, i) => (
123+
const options = getPageSizeOptions().map((opt, i) => (
129124
<Select.Option key={i} value={opt.toString()}>
130125
{mergeBuildOptionText(opt)}
131126
</Select.Option>
@@ -135,7 +130,7 @@ const Options: React.FC<OptionsProps> = (props) => {
135130
<Select
136131
disabled={disabled}
137132
prefixCls={selectPrefixCls}
138-
showSearch={showSearch}
133+
showSearch={false}
139134
className={`${prefixCls}-size-changer`}
140135
optionLabelProp="children"
141136
popupMatchSelectWidth={false}
@@ -144,6 +139,7 @@ const Options: React.FC<OptionsProps> = (props) => {
144139
getPopupContainer={(triggerNode) => triggerNode.parentNode}
145140
aria-label={locale.page_size}
146141
defaultOpen={false}
142+
{...showSizeChanger}
147143
>
148144
{options}
149145
</Select>

0 commit comments

Comments
 (0)