Skip to content

Commit

Permalink
fix: update page size changer select prop, doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@EnigamaE
EnigamaE committed Mar 16, 2024
1 parent 0ac9d65 commit ec5e696
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 36 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ ReactDOM.render(<Pagination />, container);
| 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) | - |
| showSizeOptionsSearch | when true can search in sizeChanger select | Bool | false |
| pageSizeOptions(deprecated) | specify the sizeChanger selections | Array<String> | ['10', '20', '50', '100'] |
| onShowSizeChange(deprecated) | pageSize change callback | Function(current, size) | - |
| pageSizeChanger | page size changer select options | {showSearch: boolean, options: Array<String>, onChange: Function(current, size)} | {options: ['10', '20', '50', '100'], showSearch: false} |
| 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} |
Expand Down
14 changes: 10 additions & 4 deletions docs/examples/sizer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,28 @@ class App extends React.Component {
selectComponentClass={Select}
showSizeChanger
pageSize={pageSize}
onShowSizeChange={this.onShowSizeChange}
showSizeOptionsSearch={true}
pageSizeChanger={{
onChange: this.onShowSizeChange,
}}
defaultCurrent={3}
total={40}
/>
<Pagination
selectComponentClass={Select}
pageSize={pageSize}
onShowSizeChange={this.onShowSizeChange}
pageSizeChanger={{
onChange: this.onShowSizeChange,
showSearch: true,
}}
defaultCurrent={3}
total={50}
/>
<Pagination
selectComponentClass={Select}
pageSize={pageSize}
onShowSizeChange={this.onShowSizeChange}
pageSizeChanger={{
onChange: this.onShowSizeChange,
}}
defaultCurrent={3}
total={60}
/>
Expand Down
39 changes: 19 additions & 20 deletions src/Options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { SelectProps } from 'rc-select';
import type { OptionProps } from 'rc-select/es/Option';
import KEYCODE from 'rc-util/lib/KeyCode';
import React from 'react';
import type { PaginationLocale } from './interface';
import type { PaginationLocale, PaginationPageSizeChanger } from './interface';

interface InternalSelectProps extends SelectProps {
/**
Expand All @@ -11,16 +11,15 @@ interface InternalSelectProps extends SelectProps {
popupMatchSelectWidth?: boolean;
}

interface OptionsProps {
interface OptionsProps
extends Partial<Pick<PaginationPageSizeChanger, 'options' | 'showSearch'>> {
disabled?: boolean;
locale: PaginationLocale;
rootPrefixCls: string;
selectPrefixCls?: string;
pageSize: number;
pageSizeOptions?: (string | number)[];
showSearch?: boolean;
goButton?: boolean | string;
changeSize?: (size: number) => void;
onChange?: (size: number) => void;
quickGo?: (value: number) => void;
buildOptionText?: (value: string | number) => string;
selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
Expand All @@ -32,18 +31,18 @@ const defaultPageSizeOptions = ['10', '20', '50', '100'];

const Options: React.FC<OptionsProps> = (props) => {
const {
pageSizeOptions = defaultPageSizeOptions,
locale,
changeSize,
pageSize,
goButton,
quickGo,
rootPrefixCls,
selectComponentClass: Select,
showSearch,
selectPrefixCls,
disabled,
buildOptionText,
options = defaultPageSizeOptions,
onChange,
showSearch,
} = props;

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

const changeSizeHandle = (value: number) => {
changeSize?.(Number(value));
const handleChangeSize = (value: number) => {
onChange?.(Number(value));
};

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

const getPageSizeOptions = () => {
if (
pageSizeOptions.some(
(option) => option.toString() === pageSize.toString(),
options.some(
(option: unknown) => option.toString() === pageSize.toString(),
)
) {
return pageSizeOptions;
return options;
}
return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => {
return options.concat([pageSize.toString()]).sort((a, b) => {
const numberA = Number.isNaN(Number(a)) ? 0 : Number(a);
const numberB = Number.isNaN(Number(b)) ? 0 : Number(b);
return numberA - numberB;
Expand All @@ -111,16 +110,16 @@ const Options: React.FC<OptionsProps> = (props) => {

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

if (!changeSize && !quickGo) {
if (!onChange && !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) => (
if (onChange && Select) {
const slectOptions = getPageSizeOptions().map<React.ReactNode>((opt, i) => (
<Select.Option key={i} value={opt.toString()}>
{mergeBuildOptionText(opt)}
</Select.Option>
Expand All @@ -134,13 +133,13 @@ const Options: React.FC<OptionsProps> = (props) => {
className={`${prefixCls}-size-changer`}
optionLabelProp="children"
popupMatchSelectWidth={false}
value={(pageSize || pageSizeOptions[0]).toString()}
onChange={changeSizeHandle}
value={(pageSize || options[0]).toString()}
onChange={handleChangeSize}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
aria-label={locale.page_size}
defaultOpen={false}
>
{options}
{slectOptions}
</Select>
);
}
Expand Down
18 changes: 12 additions & 6 deletions src/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {
showLessItems,
showTitle = true,
onShowSizeChange = noop,
showSizeOptionsSearch,
locale = zhCN,
style,
totalBoundaryShowSizeChanger = 50,
Expand All @@ -65,6 +64,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
showTotal,
showSizeChanger: showSizeChangerProp,
pageSizeOptions,
pageSizeChanger = {},

// render
itemRender = defaultItemRender,
Expand Down Expand Up @@ -94,6 +94,12 @@ const Pagination: React.FC<PaginationProps> = (props) => {
setInternalInputVal(current);
}, [current]);

const {
onChange: onPageSizeChange = onShowSizeChange || noop,
showSearch,
options = pageSizeOptions,
} = pageSizeChanger;

const hasOnChange = onChange !== noop;
const hasCurrent = 'current' in props;

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

function changePageSize(size: number) {
function handlePageSize(size: number) {
const newCurrent = calculatePage(size, pageSize, total);
const nextCurrent =
current > newCurrent && newCurrent !== 0 ? newCurrent : current;

setPageSize(size);
setInternalInputVal(nextCurrent);
onShowSizeChange?.(current, size);
onPageSizeChange?.(current, size);
setCurrent(nextCurrent);
onChange?.(nextCurrent, size);
}
Expand Down Expand Up @@ -577,11 +583,11 @@ const Pagination: React.FC<PaginationProps> = (props) => {
rootPrefixCls={prefixCls}
disabled={disabled}
selectComponentClass={selectComponentClass}
showSearch={showSizeOptionsSearch}
showSearch={showSearch}
selectPrefixCls={selectPrefixCls}
changeSize={showSizeChanger ? changePageSize : null}
pageSize={pageSize}
pageSizeOptions={pageSizeOptions}
onChange={showSizeChanger ? handlePageSize : null}
options={options}
quickGo={shouldDisplayQuickJumper ? handleChange : null}
goButton={gotoButton}
/>
Expand Down
15 changes: 14 additions & 1 deletion src/interface.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { SelectProps } from 'rc-select';
import type React from 'react';

export interface PaginationLocale {
Expand All @@ -17,10 +18,19 @@ export interface PaginationLocale {
page_size?: string;
}

export interface PaginationPageSizeChanger
extends Pick<SelectProps, 'showSearch'> {
options?: string[] | number[];
onChange?: (current: number, size: number) => void;
}

export interface PaginationData {
className: string;
selectPrefixCls: string;
prefixCls: string;
/**
* @deprecated use pageSizeChanger={{options}} instead, will be removed in v4.0.5
*/
pageSizeOptions: string[] | number[];

current: number;
Expand All @@ -32,7 +42,7 @@ export interface PaginationData {

hideOnSinglePage: boolean;
showSizeChanger: boolean;
showSizeOptionsSearch?: boolean;
pageSizeChanger: PaginationPageSizeChanger;
showLessItems: boolean;
showPrevNextJumpers: boolean;
showQuickJumper: boolean | object;
Expand All @@ -55,6 +65,9 @@ export interface PaginationProps
extends Partial<PaginationData>,
React.AriaAttributes {
onChange?: (page: number, pageSize: number) => void;
/**
* @deprecated use pageSizeChanger={{onChange}} instead, will be removed in v4.0.5
*/
onShowSizeChange?: (current: number, size: number) => void;
itemRender?: (
page: number,
Expand Down
6 changes: 4 additions & 2 deletions tests/sizer.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,9 @@ describe('Pagination with sizer', () => {
total={500}
pageSize={15}
showSizeChanger
showSizeOptionsSearch
pageSizeChanger={{
showSearch: true,
}}
selectComponentClass={Select}
/>,
);
Expand All @@ -90,7 +92,7 @@ describe('Pagination with sizer', () => {
selectComponentClass={Select}
total={500}
defaultPageSize={20}
pageSizeOptions={[20, 50]}
pageSizeChanger={{ options: [20, 50] }}
/>,
);
expect(
Expand Down

0 comments on commit ec5e696

Please sign in to comment.