Skip to content

Commit

Permalink
feat: showSizeChanger accept SelectProps
Browse files Browse the repository at this point in the history 
Co-authored-by: Prakash Kandhasamy <prakash.kandhasamy@mallow-tech.com>
Co-authored-by: afc163 <afc163@gmail.com>
  • Loading branch information
@prakashks20 @prakashmallow @afc163
3 people authored Sep 22, 2024
1 parent 0176824 commit f4b851f
Show file tree
Hide file tree
Showing 10 changed files with 553 additions and 62 deletions.
59 changes: 30 additions & 29 deletions README.md
View file
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
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
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
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
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
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
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

0 comments on commit f4b851f

Please sign in to comment.