mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

feat: Config provider pagination showSizeChanger (#35750)

Browse Source 
* feat: support showSizeChanger

* test: test case
This commit is contained in:
二货机器人 2022-05-26 17:14:05 +08:00 committed by GitHub
parent 303c9884cb
commit 1ed1fda421
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/config-provider/__tests__/pagination.test.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import ConfigProvider from '..';
import { render } from '../../../tests/utils';
import Pagination from '../../pagination';
describe('ConfigProvider.Pagination', () => {
it('showSizeChanger', () => {
// Default have
const sharedNode = <Pagination total={1000} />;
const { container: rawContainer } = render(sharedNode);
expect(rawContainer.querySelector('.ant-pagination-options-size-changer')).toBeTruthy();
const { container } = render(
<ConfigProvider pagination={{ showSizeChanger: false }}>{sharedNode}</ConfigProvider>,
);
expect(container.querySelector('.ant-pagination-options-size-changer')).toBeFalsy();
});
});

9
components/config-provider/context.tsx
View File

@ -1,8 +1,8 @@
import * as React from 'react';
import type { RenderEmptyHandler } from './defaultRenderEmpty';
import type { Locale } from '../locale-provider';
import type { SizeType } from './SizeContext';
import type { RequiredMark } from '../form/Form';
import type { Locale } from '../locale-provider';
import type { RenderEmptyHandler } from './defaultRenderEmpty';
import type { SizeType } from './SizeContext';
export interface Theme {
primaryColor?: string;
@ -31,6 +31,9 @@ export interface ConfigConsumerProps {
input?: {
autoComplete?: string;
};
pagination?: {
showSizeChanger?: boolean;
};
locale?: Locale;
pageHeader?: {
ghost: boolean;

4
components/config-provider/index.tsx
View File

@ -52,6 +52,7 @@ const PASSED_PROPS: Exclude<keyof ConfigConsumerProps, 'rootPrefixCls' | 'getPre
'renderEmpty',
'pageHeader',
'input',
'pagination',
'form',
];
@ -72,6 +73,9 @@ export interface ConfigProviderProps {
input?: {
autoComplete?: string;
};
pagination?: {
showSizeChanger?: boolean;
};
locale?: Locale;
pageHeader?: {
ghost: boolean;

22
components/pagination/Pagination.tsx
View File

@ -1,16 +1,16 @@
import * as React from 'react';
import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
import LeftOutlined from '@ant-design/icons/LeftOutlined';
import RightOutlined from '@ant-design/icons/RightOutlined';
import classNames from 'classnames';
import type { PaginationProps as RcPaginationProps } from 'rc-pagination';
import RcPagination, { PaginationLocale } from 'rc-pagination';
import enUS from 'rc-pagination/lib/locale/en_US';
import classNames from 'classnames';
import LeftOutlined from '@ant-design/icons/LeftOutlined';
import RightOutlined from '@ant-design/icons/RightOutlined';
import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
import { MiniSelect, MiddleSelect } from './Select';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import useBreakpoint from '../grid/hooks/useBreakpoint';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { MiddleSelect, MiniSelect } from './Select';
export interface PaginationProps extends RcPaginationProps {
showQuickJumper?: boolean | { goButton?: React.ReactNode };
@ -36,13 +36,16 @@ const Pagination: React.FC<PaginationProps> = ({
locale: customLocale,
selectComponentClass,
responsive,
showSizeChanger,
...restProps
}) => {
const { xs } = useBreakpoint(responsive);
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const { getPrefixCls, direction, pagination = {} } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('pagination', customizePrefixCls);
const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger;
const getIconsProps = () => {
const ellipsis = <span className={`${prefixCls}-item-ellipsis`}>•••</span>;
let prevIcon = (
@ -107,6 +110,7 @@ const Pagination: React.FC<PaginationProps> = ({
className={extendedClassName}
selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)}
locale={locale}
showSizeChanger={mergedShowSizeChanger}
/>
);
};