feat: inherit rc-pagination props, more customizable (#32132)

* feat: inherit rc-pagination props, more customizable

close #32128, #32129

* chore: CustomSelect.Option is required by rc-pagination

* fix: LocaleReceivier types issue

* fix: lint issue, pageSize must be presented

components/locale-provider/LocaleReceiver.tsx

@@ -3,14 +3,21 @@ import defaultLocaleData from './default';
 import LocaleContext from './context';
 import { Locale } from '.';
 
-export interface LocaleReceiverProps<C extends keyof Locale = keyof Locale> {
+export type LocaleComponentName = Exclude<keyof Locale, 'locale'>;
+
+export interface LocaleReceiverProps<C extends LocaleComponentName = LocaleComponentName> {
   componentName: C;
   defaultLocale?: Locale[C] | (() => Locale[C]);
-  children: (locale: Exclude<Locale[C], undefined>, localeCode?: string, fullLocale?: object) => React.ReactNode;
+  children: (
+    locale: Exclude<Locale[C], undefined>,
+    localeCode?: string,
+    fullLocale?: object,
+  ) => React.ReactNode;
 }
 
-
-export default class LocaleReceiver<C extends keyof Locale = keyof Locale> extends React.Component<LocaleReceiverProps<C>> {
+export default class LocaleReceiver<
+  C extends LocaleComponentName = LocaleComponentName,
+> extends React.Component<LocaleReceiverProps<C>> {
   static defaultProps = {
     componentName: 'global',
   };
@@ -19,8 +26,7 @@ export default class LocaleReceiver<C extends keyof Locale = keyof Locale> exten
 
   getLocale(): Exclude<Locale[C], undefined> {
     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<C extends keyof Locale = keyof Locale> exten
   }
 }
 
-type LocaleComponent = keyof Locale;
-export function useLocaleReceiver<T extends LocaleComponent>(
+export function useLocaleReceiver<T extends LocaleComponentName>(
   componentName: T,
   defaultLocale?: Locale[T] | Function,
 ): [Locale[T]] {

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<PaginationLocale>;
-  className?: string;
-  prefixCls?: string;
-  selectPrefixCls?: string;
   itemRender?: (
     page: number,
     type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
     originalElement: React.ReactElement<HTMLElement>,
   ) => React.ReactNode;
   role?: string;
-  showLessItems?: boolean;
   totalBoundaryShowSizeChanger?: number;
 }
 
@@ -60,6 +43,7 @@ const Pagination: React.FC<PaginationProps> = ({
   className,
   size,
   locale: customLocale,
+  selectComponentClass,
   ...restProps
 }) => {
   const { xs } = useBreakpoint();
@@ -124,12 +108,12 @@ const Pagination: React.FC<PaginationProps> = ({
 
     return (
       <RcPagination
+        {...getIconsProps()}
         {...restProps}
         prefixCls={prefixCls}
         selectPrefixCls={selectPrefixCls}
-        {...getIconsProps()}
         className={extendedClassName}
-        selectComponentClass={isSmall ? MiniSelect : Select}
+        selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : Select)}
         locale={locale}
       />
     );

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 }) => (
+      <Select className={`${className} custom-select`} {...props} />
+    );
+
+    CustomSelect.Option = Select.Option;
+
+    const wrapper = mount(
+      <Pagination defaultCurrent={1} total={500} selectComponentClass={CustomSelect} />,
+    );
+    expect(wrapper.find('.custom-select').length).toBeTruthy();
+  });
 });

components/table/Table.tsx

@@ -218,7 +218,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
 
       // Trigger pagination events
       if (pagination && pagination.onChange) {
-        pagination.onChange(1, changeInfo.pagination!.pageSize);
+        pagination.onChange(1, changeInfo.pagination!.pageSize!);
       }
     }