Skip to content

Commit 367cb4d

Browse files
EmilyyyLiuEmilyyyLiu
authored
feat: add recommendPage to onChange when pageSize changes
1 parent a029724 commit 367cb4d

9 files changed

Lines changed: 100 additions & 87 deletions

File tree

‎README.md‎

Lines changed: 35 additions & 35 deletions
Large diffs are not rendered by default.

‎README.zh-CN.md‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -68,41 +68,41 @@ npm start
6868

6969
### Pagination
7070

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

107107
## 本地开发
108108

‎docs/examples/jumper.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ function onShowSizeChange(current, pageSize) {
99
console.log(pageSize);
1010
}
1111

12-
function onChange(current, pageSize) {
12+
function onChange(current, pageSize, info) {
1313
console.log('onChange:current=', current);
1414
console.log('onChange:pageSize=', pageSize);
15+
console.log('onChange:recommendPage=', info?.recommendPage);
1516
}
1617

1718
const App = () => (

‎src/Pagination.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,15 +197,19 @@ const Pagination: React.FC<PaginationProps> = (props) => {
197197
}
198198

199199
function changePageSize(size: number) {
200+
const preservedPage = Math.floor(((current - 1) * pageSize) / size) + 1;
200201
const newCurrent = calculatePage(size, pageSize, total);
202+
const recommendPage =
203+
newCurrent === 0 ? 1 : Math.min(preservedPage, newCurrent);
204+
201205
const nextCurrent =
202206
current > newCurrent && newCurrent !== 0 ? newCurrent : current;
203207

204208
setPageSize(size);
205209
setInternalInputVal(nextCurrent);
206210
onShowSizeChange?.(current, size);
207211
setCurrent(nextCurrent);
208-
onChange?.(nextCurrent, size);
212+
onChange?.(nextCurrent, size, { recommendPage });
209213
}
210214

211215
function handleChange(page: number) {

‎src/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
export { default } from './Pagination';
2-
export type { PaginationLocale, PaginationProps } from './interface';
2+
export type {
3+
PaginationLocale,
4+
PaginationProps,
5+
PaginationOnChangeInfo,
6+
} from './interface';

‎src/interface.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,17 @@ export interface PaginationData {
5656
jumpNextIcon: React.ComponentType | React.ReactNode;
5757
}
5858

59+
export interface PaginationOnChangeInfo {
60+
recommendPage?: number;
61+
}
62+
5963
export interface PaginationProps
60-
extends Partial<PaginationData>,
61-
React.AriaAttributes {
62-
onChange?: (page: number, pageSize: number) => void;
64+
extends Partial<PaginationData>, React.AriaAttributes {
65+
onChange?: (
66+
page: number,
67+
pageSize: number,
68+
info?: PaginationOnChangeInfo,
69+
) => void;
6370
onShowSizeChange?: (current: number, size: number) => void;
6471
itemRender?: (
6572
page: number,

‎tests/index.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -483,7 +483,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
483483
fireEvent.keyDown(input, { key: 'Down', keyCode: 40, which: 40 });
484484
fireEvent.keyDown(input, { key: 'Enter', keyCode: 13, which: 13 });
485485
expect(onShowSizeChange).toHaveBeenLastCalledWith(1, 20);
486-
expect(onChange).toHaveBeenLastCalledWith(1, 20);
486+
expect(onChange).toHaveBeenLastCalledWith(1, 20, { recommendPage: 1 });
487487
});
488488

489489
it('when total is 0, pager should show `1` and being disabled', () => {

‎tests/simple.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ describe('simple Pagination', () => {
131131
const pageSize1 = container.querySelectorAll('.rc-select-item')[0];
132132
fireEvent.click(pageSize1);
133133
expect(onChange).toHaveBeenCalled();
134-
expect(onChange).toHaveBeenLastCalledWith(1, 10);
134+
expect(onChange).toHaveBeenLastCalledWith(1, 10, { recommendPage: 1 });
135135
});
136136

137137
it('should support keyboard event', () => {

‎tests/sizer.test.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,24 +50,21 @@ describe('Pagination with sizer', () => {
5050
);
5151
});
5252

53-
it('should onChange called when pageSize change', () => {
53+
it('should provide correct recommendPage when shrinking pageSize', () => {
5454
const onChange = jest.fn();
5555
const { container, getByRole } = render(
5656
<Pagination
5757
sizeChangerRender={sizeChangerRender}
5858
onChange={onChange}
5959
total={500}
60-
defaultPageSize={20}
60+
defaultCurrent={3}
61+
defaultPageSize={50}
6162
/>,
6263
);
6364
fireEvent.mouseDown(getByRole('combobox'));
64-
expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent(
65-
'50 条/页',
66-
);
67-
const pageSize1 = container.querySelectorAll('.rc-select-item')[0];
68-
fireEvent.click(pageSize1);
69-
expect(onChange).toHaveBeenCalled();
70-
expect(onChange).toHaveBeenLastCalledWith(1, 10);
65+
const pageSize10 = container.querySelectorAll('.rc-select-item')[0];
66+
fireEvent.click(pageSize10);
67+
expect(onChange).toHaveBeenLastCalledWith(3, 10, { recommendPage: 11 });
7168
});
7269

7370
// https://github.com/ant-design/ant-design/issues/26580

0 commit comments

Comments
 (0)