diff --git a/components/locale-provider/LocaleReceiver.tsx b/components/locale-provider/LocaleReceiver.tsx index 9c2cd57366..0d75cf76a4 100644 --- a/components/locale-provider/LocaleReceiver.tsx +++ b/components/locale-provider/LocaleReceiver.tsx @@ -3,14 +3,21 @@ import defaultLocaleData from './default'; import LocaleContext from './context'; import { Locale } from '.'; -export interface LocaleReceiverProps { +export type LocaleComponentName = Exclude; + +export interface LocaleReceiverProps { componentName: C; defaultLocale?: Locale[C] | (() => Locale[C]); - children: (locale: Exclude, localeCode?: string, fullLocale?: object) => React.ReactNode; + children: ( + locale: Exclude, + localeCode?: string, + fullLocale?: object, + ) => React.ReactNode; } - -export default class LocaleReceiver extends React.Component> { +export default class LocaleReceiver< + C extends LocaleComponentName = LocaleComponentName, +> extends React.Component> { static defaultProps = { componentName: 'global', }; @@ -19,8 +26,7 @@ export default class LocaleReceiver exten getLocale(): Exclude { const { componentName, defaultLocale } = this.props; - const locale = - defaultLocale || defaultLocaleData[componentName ?? 'global']; + const locale = defaultLocale || defaultLocaleData[componentName ?? 'global']; const antLocale = this.context; const localeFromContext = componentName && antLocale ? antLocale[componentName] : {}; return { @@ -44,8 +50,7 @@ export default class LocaleReceiver exten } } -type LocaleComponent = keyof Locale; -export function useLocaleReceiver( +export function useLocaleReceiver( componentName: T, defaultLocale?: Locale[T] | Function, ): [Locale[T]] { diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 33f6d612ff..ca2fa00550 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -1,5 +1,8 @@ import * as React from 'react'; -import RcPagination, { PaginationLocale } from 'rc-pagination'; +import RcPagination, { + PaginationLocale, + PaginationProps as RcPaginationProps, +} from 'rc-pagination'; import enUS from 'rc-pagination/lib/locale/en_US'; import classNames from 'classnames'; import LeftOutlined from '@ant-design/icons/LeftOutlined'; @@ -13,36 +16,16 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver'; import { ConfigContext } from '../config-provider'; import useBreakpoint from '../grid/hooks/useBreakpoint'; -export interface PaginationProps { - total?: number; - defaultCurrent?: number; - disabled?: boolean; - current?: number; - defaultPageSize?: number; - pageSize?: number; - onChange?: (page: number, pageSize?: number) => void; - hideOnSinglePage?: boolean; - showSizeChanger?: boolean; - pageSizeOptions?: string[]; - onShowSizeChange?: (current: number, size: number) => void; +export interface PaginationProps extends RcPaginationProps { showQuickJumper?: boolean | { goButton?: React.ReactNode }; - showTitle?: boolean; - showTotal?: (total: number, range: [number, number]) => React.ReactNode; size?: 'default' | 'small'; responsive?: boolean; - simple?: boolean; - style?: React.CSSProperties; - locale?: Partial; - className?: string; - prefixCls?: string; - selectPrefixCls?: string; itemRender?: ( page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', originalElement: React.ReactElement, ) => React.ReactNode; role?: string; - showLessItems?: boolean; totalBoundaryShowSizeChanger?: number; } @@ -60,6 +43,7 @@ const Pagination: React.FC = ({ className, size, locale: customLocale, + selectComponentClass, ...restProps }) => { const { xs } = useBreakpoint(); @@ -124,12 +108,12 @@ const Pagination: React.FC = ({ return ( ); diff --git a/components/pagination/__tests__/index.test.js b/components/pagination/__tests__/index.test.js index 1644390029..6e2271124a 100644 --- a/components/pagination/__tests__/index.test.js +++ b/components/pagination/__tests__/index.test.js @@ -1,6 +1,7 @@ import React from 'react'; import { render, mount } from 'enzyme'; import Pagination from '..'; +import Select from '../../select'; import ConfigProvider from '../../config-provider'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; @@ -55,4 +56,17 @@ describe('Pagination', () => { wrapper.find('.ant-select-item-option').at(1).simulate('click'); expect(onChange).toHaveBeenCalledWith(1, 20); }); + + it('should support custom selectComponentClass', () => { + const CustomSelect = ({ className, ...props }) => ( +