Skip to content

feat: showSizeChanger accept SelectProps #597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 20 commits into from
Sep 22, 2024
Merged

feat: showSizeChanger accept SelectProps #597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f4663b9
Add pageSizeChanger props for handling the page size Select component…
prakashks20 Jul 24, 2024
df9e8e6
Updated test case file
prakashks20 Jul 25, 2024
2d574bd
Code review changes
prakashks20 Aug 5, 2024
3eeaf57
Fixed for test cases coverage failed on the GitHub actions
prakashmallow Aug 5, 2024
7bdf3b2
Code review changes
prakashks20 Aug 5, 2024
af3e072
Remove unwanted codes
prakashks20 Aug 5, 2024
d670bfb
chore: pass showSizeChanger to Select component
afc163 Sep 22, 2024
68aa2fe
fix types
afc163 Sep 22, 2024
da8303b
fix showSizeChanger
afc163 Sep 22, 2024
1525fd6
update README.md
afc163 Sep 22, 2024
e52999f
update README.md
afc163 Sep 22, 2024
b557487
update README.md
afc163 Sep 22, 2024
70d46a3
update README.md
afc163 Sep 22, 2024
e16e8b6
fix eslint
afc163 Sep 22, 2024
4c0916c
fix eslint
afc163 Sep 22, 2024
66b5c64
fix test case
afc163 Sep 22, 2024
ab723a5
fix test case
afc163 Sep 22, 2024
c6405f3
add test case
afc163 Sep 22, 2024
fbb1ffd
add test case
afc163 Sep 22, 2024
f4c6b4b
fix typo
afc163 Sep 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 30 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,35 +52,36 @@ ReactDOM.render(<Pagination />, container);

## API

| Parameter | Description | Type | Default |
| ---------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| disabled | disable pagination | Bool | - |
| align | align of pagination | start \| center \| end | undefined |
| defaultCurrent | uncontrolled current page | Number | 1 |
| current | current page | Number | undefined |
| total | items total count | Number | 0 |
| defaultPageSize | default items per page | Number | 10 |
| pageSize | items per page | Number | 10 |
| onChange | page change callback | Function(current, pageSize) | - |
| showSizeChanger | show pageSize changer | Bool | `false` when total less then `totalBoundaryShowSizeChanger`, `true` when otherwise |
| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
| onShowSizeChange | pageSize change callback | Function(current, size) | - |
| hideOnSinglePage | hide on single page | Bool | false |
| showPrevNextJumpers | show jump-prev, jump-next | Bool | true |
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
| showTotal | show total records and range | Function(total, [from, to]) | - |
| className | className of pagination | String | - |
| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
| style | the style of pagination | Object | {} |
| showLessItems | show less page items | Bool | false |
| showTitle | show page items title | Bool | true |
| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | |
| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
// prettier-ignore
| Parameter | Description | Type | Default |
| --- | --- | --- | --- |
| disabled | disable pagination | Bool | - |
| align | align of pagination | start \| center \| end | undefined |
| defaultCurrent | uncontrolled current page | Number | 1 |
| current | current page | Number | undefined |
| total | items total count | Number | 0 |
| defaultPageSize | default items per page | Number | 10 |
| pageSize | items per page | Number | 10 |
| onChange | page change callback | Function(current, pageSize) | - |
| 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 |
| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 |
| pageSizeOptions | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
| onShowSizeChange | pageSize change callback | Function(current, size) | - |
| hideOnSinglePage | hide on single page | Bool | false |
| showPrevNextJumpers | show jump-prev, jump-next | Bool | true |
| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} |
| showTotal | show total records and range | Function(total, [from, to]) | - |
| className | className of pagination | String | - |
| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - |
| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
| style | the style of pagination | Object | {} |
| showLessItems | show less page items | Bool | false |
| showTitle | show page items title | Bool | true |
| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | |
| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | |

## License

Expand Down
8 changes: 8 additions & 0 deletions docs/demo/showSizeChanger.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: showSizeChanger
nav:
title: Demo
path: /demo
---

<code src="../examples/showSizeChanger.tsx"></code>
42 changes: 42 additions & 0 deletions docs/examples/showSizeChanger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import Pagination from 'rc-pagination';
import Select from 'rc-select';
import '../../assets/index.less';

export default () => {
const onPageSizeOnChange = (value) => {
console.log(value);
};

return (
<>
<Pagination
defaultCurrent={1}
total={50}
selectComponentClass={Select}
showSizeChanger={false}
/>
<Pagination
defaultCurrent={1}
total={50}
selectComponentClass={Select}
showSizeChanger
/>
<Pagination
defaultCurrent={1}
total={50}
selectComponentClass={Select}
showSizeChanger={{
options: [
{ value: '10', label: '10 条每页' },
{ value: '25', label: '25 条每页' },
{ value: '100', label: '100 条每页' },
],
className: 'my-select',
showSearch: true,
onChange: onPageSizeOnChange,
}}
/>
</>
);
};
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"@rc-component/father-plugin": "^1.0.0",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^15.0.4",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.2.2",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
Expand Down
45 changes: 33 additions & 12 deletions src/Options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import type { SelectProps } from 'rc-select';
import type { OptionProps } from 'rc-select/es/Option';
import KEYCODE from 'rc-util/lib/KeyCode';
import classNames from 'classnames';
import React from 'react';
import type { PaginationLocale } from './interface';
import type { PaginationLocale, PaginationProps } from './interface';

interface InternalSelectProps extends SelectProps {
/**
Expand All @@ -25,6 +26,7 @@ interface OptionsProps {
selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
Option?: React.ComponentType<Partial<OptionProps>>;
};
showSizeChanger: PaginationProps['showSizeChanger'];
}

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

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

const changeSizeHandle = (value: number) => {
const changeSizeHandle = (value: number, option) => {
changeSize?.(Number(value));
if (typeof showSizeChanger === 'object') {
showSizeChanger.onChange?.(value, option);
}
};

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

// ============== render ==============

if (!changeSize && !quickGo) {
if (!showSizeChanger && !quickGo) {
return null;
}

let changeSelect: React.ReactNode = null;
let goInput: React.ReactNode = null;
let gotoButton: React.ReactNode = null;

if (changeSize && Select) {
const options = getPageSizeOptions().map<React.ReactNode>((opt, i) => (
<Select.Option key={i} value={opt.toString()}>
{mergeBuildOptionText(opt)}
</Select.Option>
));
if (showSizeChanger && Select) {
const {
options: showSizeChangerOptions,
className: showSizeChangerClassName,
} =
typeof showSizeChanger === 'object'
? showSizeChanger
: ({} as SelectProps);
// use showSizeChanger.options if existed, otherwise use pageSizeOptions
const options = showSizeChangerOptions
? undefined
: getPageSizeOptions().map((opt, i) => (
<Select.Option key={i} value={opt.toString()}>
{mergeBuildOptionText(opt)}
</Select.Option>
));

changeSelect = (
<Select
disabled={disabled}
prefixCls={selectPrefixCls}
showSearch={false}
className={`${prefixCls}-size-changer`}
optionLabelProp="children"
optionLabelProp={showSizeChangerOptions ? 'label' : 'children'}
popupMatchSelectWidth={false}
value={(pageSize || pageSizeOptions[0]).toString()}
onChange={changeSizeHandle}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
aria-label={locale.page_size}
defaultOpen={false}
{...(typeof showSizeChanger === 'object' ? showSizeChanger : null)}
className={classNames(
`${prefixCls}-size-changer`,
showSizeChangerClassName,
)}
options={showSizeChangerOptions}
onChange={changeSizeHandle}
>
{options}
</Select>
Expand Down
7 changes: 3 additions & 4 deletions src/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
disabled,
simple,
showTotal,
showSizeChanger: showSizeChangerProp,
showSizeChanger = total > totalBoundaryShowSizeChanger,
pageSizeOptions,

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

const hasPrev = current > 1;
const hasNext = current < calculatePage(undefined, pageSize, total);
const showSizeChanger =
showSizeChangerProp ?? total > totalBoundaryShowSizeChanger;

function prevHandle() {
if (hasPrev) handleChange(current - 1);
Expand Down Expand Up @@ -586,11 +584,12 @@ const Pagination: React.FC<PaginationProps> = (props) => {
disabled={disabled}
selectComponentClass={selectComponentClass}
selectPrefixCls={selectPrefixCls}
changeSize={showSizeChanger ? changePageSize : null}
changeSize={changePageSize}
pageSize={pageSize}
pageSizeOptions={pageSizeOptions}
quickGo={shouldDisplayQuickJumper ? handleChange : null}
goButton={gotoButton}
showSizeChanger={showSizeChanger}
/>
</ul>
);
Expand Down
6 changes: 3 additions & 3 deletions src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type React from 'react';
import type { SelectProps } from 'rc-select';

export interface PaginationLocale {
// Options
Expand Down Expand Up @@ -32,12 +33,12 @@ export interface PaginationData {

hideOnSinglePage: boolean;
align: 'start' | 'center' | 'end';
showSizeChanger: boolean;
showSizeChanger: boolean | SelectProps;
showLessItems: boolean;
showPrevNextJumpers: boolean;
showQuickJumper: boolean | object;
showTitle: boolean;
simple: boolean | { readOnly?: boolean; };
simple: boolean | { readOnly?: boolean };
disabled: boolean;

locale: PaginationLocale;
Expand All @@ -62,7 +63,6 @@ export interface PaginationProps
element: React.ReactNode,
) => React.ReactNode;
showTotal?: (total: number, range: [number, number]) => React.ReactNode;

// WAI-ARIA
role?: React.AriaRole | undefined;
}
Expand Down
Loading
Loading