Skip to content

feat: add recommendPage to onChange when pageSize changes #708

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
zombieJ merged 5 commits into from
Jul 3, 2026
+100 −87
Merged

feat: add recommendPage to onChange when pageSize changes #708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a7784f5
feat: add recommendPage to onChange when pageSize changes
Jun 29, 2026
edab4c8
fix: correct preserved page calculation on pageSize change
Jun 29, 2026
ec587c1
Merge branch 'master' into feat/recommend-page-on-size-change
EmilyyyLiu Jun 30, 2026
f9b453b
refactor: change recommendPage to info object to avoid parameter poll…
Jul 3, 2026
b8cc552
feat: update onChange signature to include recommendPage in info object
Jul 3, 2026
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
70 changes: 35 additions & 35 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

70 changes: 35 additions & 35 deletions README.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,41 +68,41 @@ npm start

### Pagination

| 参数 | 类型 | 默认值 | 说明 |
| ---------------------------- | ------------------------------------------ | -------------------------------------- | -------------------------------------- |
| align | `'start' \| 'center' \| 'end'` | - | 对齐分页项目。 |
| className | `string` | - | 根元素的 className。 |
| classNames | `Partial<Record<'item', string>>` | - | 语义 className。 |
| current | `number` | - | 控制当前页面。 |
| defaultCurrent | `number` | `1` | 初始当前页面。 |
| defaultPageSize | `number` | `10` | 初始页面大小。 |
| disabled | `boolean` | `false` | 禁用分页交互。 |
| hideOnSinglePage | `boolean` | `false` | 当只有一页时隐藏。 |
| itemRender | `(page, type, element) => ReactNode` | - | 自定义页面、上一个、下一个和跳转项目。 |
| jumpNextIcon | `ReactNode \| ComponentType` | - | 自定义下一跳图标。 |
| jumpPrevIcon | `ReactNode \| ComponentType` | - | 自定义上一跳转图标。 |
| locale | `PaginationLocale` | `zh_CN` | 区域设置文本。 |
| nextIcon | `ReactNode \| ComponentType` | - | 自定义下一个图标。 |
| pageSize | `number` | - | 受控的页面大小。 |
| pageSizeOptions | `number[]` | - | 页面大小选项。 |
| prefixCls | `string` | `rc-pagination` | className 前缀。 |
| prevIcon | `ReactNode \| ComponentType` | - | 自定义上一个图标。 |
| role | `React.AriaRole` | - | WAI-ARIA 角色。 |
| selectPrefixCls | `string` | `rc-select` | 尺寸变换器选择的前缀。 |
| showLessItems | `boolean` | `false` | 显示较少的页面项目。 |
| showPrevNextJumpers | `boolean` | `true` | 显示上一个和下一个跳线。 |
| showQuickJumper | `boolean \| object` | `false` | 显示快速跳页。 |
| showSizeChanger | `boolean` | `total > totalBoundaryShowSizeChanger` | 显示页面大小更改器。 |
| showTitle | `boolean` | `true` | 在页面项目上显示标题。 |
| showTotal | `(total, range) => ReactNode` | - | 渲染总文本。 |
| simple | `boolean \| { readOnly?: boolean }` | `false` | 使用简洁分页器。 |
| sizeChangerRender | `SizeChangerRender` | - | 定制尺寸变换器。 |
| style | `React.CSSProperties` | - | 根内联样式。 |
| styles | `Partial<Record<'item', CSSProperties>>` | - | 语义化样式。 |
| total | `number` | `0` | 项目总数。 |
| totalBoundaryShowSizeChanger | `number` | `50` | 默认的边界 `showSizeChanger`。 |
| onChange | `(page: number, pageSize: number) => void` | - | 当页面或页面大小更改时触发。 |
| onShowSizeChange | `(current: number, size: number) => void` | - | 当页面大小改变时触发。 |
| 参数 | 类型 | 默认值 | 说明 |
| ---------------------------- | ----------------------------------------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| align | `'start' \| 'center' \| 'end'` | - | 对齐分页项目。 |
| className | `string` | - | 根元素的 className。 |
| classNames | `Partial<Record<'item', string>>` | - | 语义 className。 |
| current | `number` | - | 控制当前页面。 |
| defaultCurrent | `number` | `1` | 初始当前页面。 |
| defaultPageSize | `number` | `10` | 初始页面大小。 |
| disabled | `boolean` | `false` | 禁用分页交互。 |
| hideOnSinglePage | `boolean` | `false` | 当只有一页时隐藏。 |
| itemRender | `(page, type, element) => ReactNode` | - | 自定义页面、上一个、下一个和跳转项目。 |
| jumpNextIcon | `ReactNode \| ComponentType` | - | 自定义下一跳图标。 |
| jumpPrevIcon | `ReactNode \| ComponentType` | - | 自定义上一跳转图标。 |
| locale | `PaginationLocale` | `zh_CN` | 区域设置文本。 |
| nextIcon | `ReactNode \| ComponentType` | - | 自定义下一个图标。 |
| pageSize | `number` | - | 受控的页面大小。 |
| pageSizeOptions | `number[]` | - | 页面大小选项。 |
| prefixCls | `string` | `rc-pagination` | className 前缀。 |
| prevIcon | `ReactNode \| ComponentType` | - | 自定义上一个图标。 |
| role | `React.AriaRole` | - | WAI-ARIA 角色。 |
| selectPrefixCls | `string` | `rc-select` | 尺寸变换器选择的前缀。 |
| showLessItems | `boolean` | `false` | 显示较少的页面项目。 |
| showPrevNextJumpers | `boolean` | `true` | 显示上一个和下一个跳线。 |
| showQuickJumper | `boolean \| object` | `false` | 显示快速跳页。 |
| showSizeChanger | `boolean` | `total > totalBoundaryShowSizeChanger` | 显示页面大小更改器。 |
| showTitle | `boolean` | `true` | 在页面项目上显示标题。 |
| showTotal | `(total, range) => ReactNode` | - | 渲染总文本。 |
| simple | `boolean \| { readOnly?: boolean }` | `false` | 使用简洁分页器。 |
| sizeChangerRender | `SizeChangerRender` | - | 定制尺寸变换器。 |
| style | `React.CSSProperties` | - | 根内联样式。 |
| styles | `Partial<Record<'item', CSSProperties>>` | - | 语义化样式。 |
| total | `number` | `0` | 项目总数。 |
| totalBoundaryShowSizeChanger | `number` | `50` | 默认的边界 `showSizeChanger`。 |
| onChange | `(page: number, pageSize: number, info?: { recommendPage?: number }) => void` | - | 当页面或页面大小更改时触发。`info.recommendPage` 仅在切换 pageSize 时传入，表示基于新页面大小推荐的分页号码。 |
| onShowSizeChange | `(current: number, size: number) => void` | - | 当页面大小改变时触发。 |

## 本地开发

Expand Down
3 changes: 2 additions & 1 deletion docs/examples/jumper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ function onShowSizeChange(current, pageSize) {
console.log(pageSize);
}

function onChange(current, pageSize) {
function onChange(current, pageSize, info) {
console.log('onChange:current=', current);
console.log('onChange:pageSize=', pageSize);
console.log('onChange:recommendPage=', info?.recommendPage);
}

const App = () => (
Expand Down
6 changes: 5 additions & 1 deletion src/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,15 +197,19 @@ const Pagination: React.FC<PaginationProps> = (props) => {
}

function changePageSize(size: number) {
const preservedPage = Math.floor(((current - 1) * pageSize) / size) + 1;
const newCurrent = calculatePage(size, pageSize, total);
const recommendPage =
newCurrent === 0 ? 1 : Math.min(preservedPage, newCurrent);

const nextCurrent =
current > newCurrent && newCurrent !== 0 ? newCurrent : current;

setPageSize(size);
setInternalInputVal(nextCurrent);
onShowSizeChange?.(current, size);
setCurrent(nextCurrent);
onChange?.(nextCurrent, size);
onChange?.(nextCurrent, size, { recommendPage });
}

function handleChange(page: number) {
Expand Down
6 changes: 5 additions & 1 deletion src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,6 @@
export { default } from './Pagination';
export type { PaginationLocale, PaginationProps } from './interface';
export type {
PaginationLocale,
PaginationProps,
PaginationOnChangeInfo,
} from './interface';
13 changes: 10 additions & 3 deletions src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,17 @@ export interface PaginationData {
jumpNextIcon: React.ComponentType | React.ReactNode;
}

export interface PaginationOnChangeInfo {
recommendPage?: number;
}

export interface PaginationProps
extends Partial<PaginationData>,
React.AriaAttributes {
onChange?: (page: number, pageSize: number) => void;
extends Partial<PaginationData>, React.AriaAttributes {
onChange?: (
page: number,
pageSize: number,
info?: PaginationOnChangeInfo,
) => void;
onShowSizeChange?: (current: number, size: number) => void;
itemRender?: (
page: number,
Expand Down
2 changes: 1 addition & 1 deletion tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,7 +483,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
fireEvent.keyDown(input, { key: 'Down', keyCode: 40, which: 40 });
fireEvent.keyDown(input, { key: 'Enter', keyCode: 13, which: 13 });
expect(onShowSizeChange).toHaveBeenLastCalledWith(1, 20);
expect(onChange).toHaveBeenLastCalledWith(1, 20);
expect(onChange).toHaveBeenLastCalledWith(1, 20, { recommendPage: 1 });
});

it('when total is 0, pager should show `1` and being disabled', () => {
Expand Down
2 changes: 1 addition & 1 deletion tests/simple.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ describe('simple Pagination', () => {
const pageSize1 = container.querySelectorAll('.rc-select-item')[0];
fireEvent.click(pageSize1);
expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenLastCalledWith(1, 10);
expect(onChange).toHaveBeenLastCalledWith(1, 10, { recommendPage: 1 });
});

it('should support keyboard event', () => {
Expand Down
15 changes: 6 additions & 9 deletions tests/sizer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,24 +50,21 @@ describe('Pagination with sizer', () => {
);
});

it('should onChange called when pageSize change', () => {
it('should provide correct recommendPage when shrinking pageSize', () => {
const onChange = jest.fn();
const { container, getByRole } = render(
<Pagination
sizeChangerRender={sizeChangerRender}
onChange={onChange}
total={500}
defaultPageSize={20}
defaultCurrent={3}
defaultPageSize={50}
/>,
);
fireEvent.mouseDown(getByRole('combobox'));
expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent(
'50 条/页',
);
const pageSize1 = container.querySelectorAll('.rc-select-item')[0];
fireEvent.click(pageSize1);
expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenLastCalledWith(1, 10);
const pageSize10 = container.querySelectorAll('.rc-select-item')[0];
fireEvent.click(pageSize10);
expect(onChange).toHaveBeenLastCalledWith(3, 10, { recommendPage: 11 });
});

// https://github.com/ant-design/ant-design/issues/26580
Expand Down
Loading