source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: configProvider support totalBoundaryShowSizeChanger (#56475) (#56490)

Browse Source
This commit is contained in:
plus
2026-01-07 09:46:33 +08:00
committed by GitHub
parent 84524c1b6e
commit 0c1cb04969
7 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/config-provider/__tests__/pagination.test.tsx
View File

@@ -16,4 +16,14 @@ describe('ConfigProvider.Pagination', () => {
);
expect(container.querySelector('.ant-pagination-options-size-changer')).toBeFalsy();
});
it('totalBoundaryShowSizeChanger', () => {
const { container } = render(
<ConfigProvider pagination={{ totalBoundaryShowSizeChanger: 100 }}>
<Pagination total={80} />
</ConfigProvider>,
);
// total={80} < 100, so size changer should not be visible
expect(container.querySelector('.ant-pagination-options-size-changer')).toBeFalsy();
});
});

2
components/config-provider/context.ts
View File

@@ -189,7 +189,7 @@ export type FloatButtonConfig = {
export type FloatButtonGroupConfig = Pick<FloatButtonGroupProps, 'closeIcon'>;
export type PaginationConfig = ComponentStyleConfig & Pick<PaginationProps, 'showSizeChanger'>;
export type PaginationConfig = ComponentStyleConfig & Pick<PaginationProps, 'showSizeChanger' | 'totalBoundaryShowSizeChanger'>;
export type SelectConfig = ComponentStyleConfig &
Pick<SelectProps, 'showSearch' | 'variant' | 'classNames' | 'styles'>;

2
components/config-provider/index.en-US.md
View File

@@ -142,7 +142,7 @@ const {
| message | Set Message common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal#api), styles?: [ModalProps\["styles"\]](/components/modal#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 |
| notification | Set Notification common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, `closeIcon`: 5.14.0 |
| pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| pagination | Set Pagination common props | { showSizeChanger?: boolean, totalBoundaryShowSizeChanger?: number, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| progress | Set Progress common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| rate | Set Rate common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

2
components/config-provider/index.zh-CN.md
View File

@@ -144,7 +144,7 @@ const {
| message | 设置 Message 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0, `closeIcon`: 5.14.0 |
| notification | 设置 Notification 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, `closeIcon`: 5.14.0 |
| pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, totalBoundaryShowSizeChanger?: number, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| progress | 设置 Progress 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| rate | 设置 Rate 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

4
components/pagination/Pagination.tsx
View File

@@ -68,6 +68,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
showSizeChanger: contextShowSizeChangerConfig,
className: contextClassName,
style: contextStyle,
totalBoundaryShowSizeChanger: contextTotalBoundaryShowSizeChanger,
} = useComponentConfig('pagination');
const prefixCls = getPrefixCls('pagination', customizePrefixCls);
@@ -226,6 +227,9 @@ const Pagination: React.FC<PaginationProps> = (props) => {
locale={locale}
pageSizeOptions={mergedPageSizeOptions}
showSizeChanger={mergedShowSizeChanger}
totalBoundaryShowSizeChanger={
restProps.totalBoundaryShowSizeChanger ?? contextTotalBoundaryShowSizeChanger
}
sizeChangerRender={sizeChangerRender}
/>
</>,

3
components/pagination/index.en-US.md
View File

@@ -51,7 +51,8 @@ Common props ref：[Common props](/docs/react/common-props)
| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - | |
| showLessItems | Show less page items | boolean | false | |
| showQuickJumper | Determine whether you can jump to pages directly | boolean \| { goButton: ReactNode } | false | |
| showSizeChanger | Determine whether to show `pageSize` select, it will be true when `total > 50` | boolean \| [SelectProps](/components/select#api) | - | SelectProps: 5.21.0 |
| showSizeChanger | Determine whether to show `pageSize` select | boolean \| [SelectProps](/components/select#api) | - | SelectProps: 5.21.0 |
| totalBoundaryShowSizeChanger | When `total` larger than it, `showSizeChanger` will be true | number | 50 | |
| showTitle | Show page item's title | boolean | true | |
| showTotal | To display the total number and range | function(total, range) | - | |
| simple | Whether to use simple mode | boolean \| { readOnly?: boolean } | - | |

3
components/pagination/index.zh-CN.md
View File

@@ -52,7 +52,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
| showLessItems | 是否显示较少页面内容 | boolean | false | |
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean \| [SelectProps](/components/select-cn#api) | - | SelectProps: 5.21.0 |
| showSizeChanger | 是否展示 `pageSize` 切换器 | boolean \| [SelectProps](/components/select-cn#api) | - | SelectProps: 5.21.0 |
| totalBoundaryShowSizeChanger | 当 `total` 大于该值时，`showSizeChanger` 默认为 true | number | 50 | |
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |