refactor(Pagination): rewrite with hook (#24302)

* refactor(Pagination): rewrite with hook

* Update Pagination.tsx

* Update index.tsx

components/pagination/MiniSelect.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import Select from '../select';
 
-export default class MiniSelect extends React.Component<any, any> {
-  static Option = Select.Option;
-
-  render() {
-    return <Select size="small" {...this.props} />;
-  }
+interface MiniSelectInterface extends React.FC<any> {
+  Option: typeof Select.Option;
 }
+
+const MiniSelect: MiniSelectInterface = props => <Select size="small" {...props} />;
+
+MiniSelect.Option = Select.Option;
+
+export default MiniSelect;

components/pagination/Pagination.tsx

@@ -7,11 +7,11 @@ import RightOutlined from '@ant-design/icons/RightOutlined';
 import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
 import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
 
-import ResponsiveObserve from '../_util/responsiveObserve';
 import MiniSelect from './MiniSelect';
 import Select from '../select';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
+import useBreakpoint from '../grid/hooks/useBreakpoint';
 
 export interface PaginationProps {
   total?: number;
@@ -53,28 +53,20 @@ export interface PaginationConfig extends PaginationProps {
 
 export type PaginationLocale = any;
 
-export default class Pagination extends React.Component<PaginationProps, {}> {
-  private token: string;
+const Pagination: React.FC<PaginationProps> = ({
+  prefixCls: customizePrefixCls,
+  selectPrefixCls: customizeSelectPrefixCls,
+  className,
+  size,
+  locale: customLocale,
+  ...restProps
+}) => {
+  const { xs } = useBreakpoint();
 
-  private inferredSmall: boolean = false;
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('pagination', customizePrefixCls);
 
-  componentDidMount() {
-    this.token = ResponsiveObserve.subscribe(screens => {
-      const { xs } = screens;
-      const { size, responsive } = this.props;
-      const inferredSmall = !!(xs && !size && responsive);
-      if (this.inferredSmall !== inferredSmall) {
-        this.inferredSmall = inferredSmall;
-        this.forceUpdate();
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    ResponsiveObserve.unsubscribe(this.token);
-  }
-
-  getIconsProps = (prefixCls: string, direction: 'ltr' | 'rtl' | undefined) => {
+  const getIconsProps = () => {
     let prevIcon = (
       <a className={`${prefixCls}-item-link`}>
         <LeftOutlined />
@@ -123,48 +115,33 @@ export default class Pagination extends React.Component<PaginationProps, {}> {
     };
   };
 
-  renderPagination = (contextLocale: PaginationLocale) => {
-    const {
-      prefixCls: customizePrefixCls,
-      selectPrefixCls: customizeSelectPrefixCls,
-      className,
-      size,
-      locale: customLocale,
-      ...restProps
-    } = this.props;
+  const renderPagination = (contextLocale: PaginationLocale) => {
     const locale = { ...contextLocale, ...customLocale };
-    const isSmall = size === 'small' || this.inferredSmall;
-    return (
-      <ConfigConsumer>
-        {({ getPrefixCls, direction }: ConfigConsumerProps) => {
-          const prefixCls = getPrefixCls('pagination', customizePrefixCls);
-          const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
-          const extendedClassName = classNames(className, {
-            mini: isSmall,
-            [`${prefixCls}-rtl`]: direction === 'rtl',
-          });
+    const isSmall = size === 'small' || !!(xs && !size && restProps.responsive);
+    const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
+    const extendedClassName = classNames(className, {
+      mini: isSmall,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    });
 
-          return (
-            <RcPagination
-              {...restProps}
-              prefixCls={prefixCls}
-              selectPrefixCls={selectPrefixCls}
-              {...this.getIconsProps(prefixCls, direction)}
-              className={extendedClassName}
-              selectComponentClass={isSmall ? MiniSelect : Select}
-              locale={locale}
-            />
-          );
-        }}
-      </ConfigConsumer>
+    return (
+      <RcPagination
+        {...restProps}
+        prefixCls={prefixCls}
+        selectPrefixCls={selectPrefixCls}
+        {...getIconsProps()}
+        className={extendedClassName}
+        selectComponentClass={isSmall ? MiniSelect : Select}
+        locale={locale}
+      />
     );
   };
 
-  render() {
-    return (
-      <LocaleReceiver componentName="Pagination" defaultLocale={enUS}>
-        {this.renderPagination}
-      </LocaleReceiver>
-    );
-  }
-}
+  return (
+    <LocaleReceiver componentName="Pagination" defaultLocale={enUS}>
+      {renderPagination}
+    </LocaleReceiver>
+  );
+};
+
+export default Pagination;

components/pagination/style/index.tsx

@@ -2,4 +2,5 @@ import '../../style/index.less';
 import './index.less';
 
 // style dependencies
+// deps-lint-skip: grid
 import '../../select/style';