test: refactor test case demo CC => FC (#40070)

* test: refactor test case demo CC => FC

* add type

* type

components/config-provider/__tests__/locale.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { closePicker, openPicker, selectCell } from '../../date-picker/__tests__/utils';
 import ConfigProvider from '..';
 import DatePicker from '../../date-picker';
@@ -27,15 +27,12 @@ describe('ConfigProvider.Locale', () => {
 
   // https://github.com/ant-design/ant-design/issues/18731
   it('should not reset locale for Modal', () => {
-    class App extends React.Component {
+    const App: React.FC = () => {
-      state = { showButton: false };
+      const [showButton, setShowButton] = useState<boolean>(false);
-
+      useEffect(() => {
-      componentDidMount() {
+        setShowButton(true);
-        this.setState({ showButton: true });
+      }, []);
-      }
+      const openConfirm = () => {
-
-      // eslint-disable-next-line class-methods-use-this
-      openConfirm = () => {
         jest.useFakeTimers();
         Modal.confirm({ title: 'title', content: 'Some descriptions' });
         act(() => {
@@ -43,22 +40,18 @@ describe('ConfigProvider.Locale', () => {
         });
         jest.useRealTimers();
       };
-
-      render() {
       return (
         <ConfigProvider locale={zhCN}>
-            {this.state.showButton ? (
+          {showButton ? (
             <ConfigProvider locale={enUS}>
-                <button type="button" onClick={this.openConfirm}>
+              <button type="button" onClick={openConfirm}>
                 open
               </button>
             </ConfigProvider>
           ) : null}
         </ConfigProvider>
       );
-      }
+    };
-    }
-
     const wrapper = render(<App />);
     fireEvent.click(wrapper.container.querySelector('button')!);
     expect($$('.ant-btn-primary')[0].textContent).toBe('OK');

components/date-picker/__tests__/RangePicker.test.tsx

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import React from 'react';
+import React, { useState } from 'react';
+import type { RangeValue } from 'rc-picker/lib/interface';
 import { resetWarned } from '../../_util/warning';
 import DatePicker from '..';
 import focusTest from '../../../tests/shared/focusTest';
@@ -57,23 +58,21 @@ describe('RangePicker', () => {
   // https://github.com/ant-design/ant-design/issues/13302
   describe('in "month" mode, when the left and right panels select the same month', () => {
     it('the cell status is correct', () => {
-      let rangePickerValue: dayjs.Dayjs[] = [] as any;
+      let rangePickerValue: dayjs.Dayjs[] = [];
-      class Test extends React.Component {
+      const Test: React.FC = () => {
-        state = { value: null };
+        const [value, setValue] = useState<RangeValue<dayjs.Dayjs>>(null);
-
-        render() {
         return (
           <RangePicker
-              value={this.state.value}
+            value={value}
             mode={['month', 'month']}
-              onPanelChange={(value) => {
+            onPanelChange={(v) => {
-                this.setState({ value });
+              setValue(v);
-                rangePickerValue = value as any;
+              rangePickerValue = v as dayjs.Dayjs[];
             }}
           />
         );
-        }
+      };
-      }
+
       const wrapper = render(<Test />);
 
       openPicker(wrapper);

components/drawer/__tests__/MultiDrawer.test.tsx

@@ -1,5 +1,5 @@
 import type { DrawerPopupProps } from 'rc-drawer/lib/DrawerPopup';
-import React from 'react';
+import React, { useState } from 'react';
 import Drawer from '..';
 import { fireEvent, render } from '../../../tests/utils';
 import Button from '../../button';
@@ -9,69 +9,54 @@ interface DrawerPropsType {
   placement?: DrawerPopupProps['placement'];
 }
 
-interface DrawerStateType {
+const MultiDrawer: React.FC<DrawerPropsType> = (props) => {
-  open: boolean;
+  const { placement, push } = props;
-  hasChildren: boolean;
-  childrenDrawer: boolean;
-}
 
-class MultiDrawer extends React.Component<DrawerPropsType, DrawerStateType> {
+  const [open, setOpen] = useState<boolean>(false);
-  state = { open: false, childrenDrawer: false, hasChildren: true };
+  const [hasChildren, setHasChildren] = useState<boolean>(true);
+  const [childrenDrawer, setChildrenDrawer] = useState<boolean>(false);
 
-  showDrawer = () => {
+  const showDrawer = () => {
-    this.setState({
+    setOpen(true);
-      open: true,
+    setHasChildren(true);
-      hasChildren: true,
-    });
   };
 
-  onClose = () => {
+  const onClose = () => {
-    this.setState({
+    setOpen(false);
-      open: false,
-    });
   };
 
-  showChildrenDrawer = () => {
+  const showChildrenDrawer = () => {
-    this.setState({
+    setChildrenDrawer(true);
-      childrenDrawer: true,
+    setHasChildren(true);
-      hasChildren: true,
-    });
   };
 
-  onChildrenDrawerClose = () => {
+  const onChildrenDrawerClose = () => {
-    this.setState({
+    setChildrenDrawer(false);
-      childrenDrawer: false,
-    });
   };
 
-  onRemoveChildDrawer = () => {
+  const onRemoveChildDrawer = () => {
-    this.setState({
+    setHasChildren(false);
-      hasChildren: false,
-    });
   };
 
-  render() {
-    const { childrenDrawer, open, hasChildren } = this.state;
-    const { placement, push } = this.props;
   return (
     <div>
-        <Button type="primary" id="open_drawer" onClick={this.showDrawer}>
+      <Button type="primary" id="open_drawer" onClick={showDrawer}>
         Open drawer
       </Button>
-        <Button type="primary" id="remove_drawer" onClick={this.onRemoveChildDrawer}>
+      <Button type="primary" id="remove_drawer" onClick={onRemoveChildDrawer}>
         rm child drawer
       </Button>
       <Drawer
         title="Multi-level drawer"
         className="test_drawer"
         width={520}
-          onClose={this.onClose}
+        onClose={onClose}
         getContainer={false}
         placement={placement}
         open={open}
         push={push}
       >
-          <Button type="primary" id="open_two_drawer" onClick={this.showChildrenDrawer}>
+        <Button type="primary" id="open_two_drawer" onClick={showChildrenDrawer}>
           Two-level drawer
         </Button>
         {hasChildren && (
@@ -81,7 +66,7 @@ class MultiDrawer extends React.Component<DrawerPropsType, DrawerStateType> {
             className="Two-level"
             getContainer={false}
             placement={placement}
-              onClose={this.onChildrenDrawerClose}
+            onClose={onChildrenDrawerClose}
             open={childrenDrawer}
           >
             <div id="two_drawer_text">This is two-level drawer</div>
@@ -100,20 +85,18 @@ class MultiDrawer extends React.Component<DrawerPropsType, DrawerStateType> {
             borderRadius: '0 0 4px 4px',
           }}
         >
-            <Button style={{ marginRight: 8 }} onClick={this.onClose}>
+          <Button style={{ marginRight: 8 }} onClick={onClose}>
             Cancel
           </Button>
-            <Button onClick={this.onClose} type="primary">
+          <Button onClick={onClose} type="primary">
             Submit
           </Button>
         </div>
       </Drawer>
-
       <div className="childrenDrawer">{String(childrenDrawer)}</div>
     </div>
   );
-  }
+};
-}
 
 describe('Drawer', () => {
   it('render right MultiDrawer', () => {

components/modal/__tests__/Modal.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import type { ModalProps } from '..';
 import Modal from '..';
 import mountTest from '../../../tests/shared/mountTest';
@@ -8,29 +8,21 @@ import { resetWarned } from '../../_util/warning';
 
 jest.mock('rc-util/lib/Portal');
 
-class ModalTester extends React.Component<ModalProps, { open: boolean }> {
+const ModalTester: React.FC<ModalProps> = (props) => {
-  state = { open: false };
+  const [open, setOpen] = React.useState(false);
-
+  const container = React.useRef<HTMLDivElement>(null);
-  componentDidMount() {
+  useEffect(() => {
-    this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state
+    setOpen(true);
-  }
+  }, []);
-
-  container = React.createRef<HTMLDivElement>();
-
-  getContainer = () => this.container?.current!;
-
-  render() {
-    const { open } = this.state;
   return (
     <div>
-        <div ref={this.container} />
+      <div ref={container} />
-        <Modal {...this.props} open={open} getContainer={this.getContainer}>
+      <Modal {...props} open={open} getContainer={container.current!}>
         Here is content of Modal
       </Modal>
     </div>
   );
-  }
+};
-}
 
 describe('Modal', () => {
   mountTest(Modal);

components/tooltip/index.tsx

@@ -5,6 +5,7 @@ import type { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
 import type { AlignType } from 'rc-trigger/lib/interface';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
+import type { CSSProperties } from 'react';
 import { ConfigContext } from '../config-provider';
 import type { PresetColorType } from '../_util/colors';
 import { getTransitionName } from '../_util/motion';
@@ -95,7 +96,7 @@ export interface TooltipPropsWithTitle extends AbstractTooltipProps {
 
 export declare type TooltipProps = TooltipPropsWithTitle | TooltipPropsWithOverlay;
 
-const splitObject = <T extends React.CSSProperties>(
+const splitObject = <T extends CSSProperties>(
   obj: T,
   keys: (keyof T)[],
 ): Record<'picked' | 'omitted', T> => {

components/tree/Tree.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree';
 import RcTree from 'rc-tree';
 import type { DataNode, Key } from 'rc-tree/lib/interface';
-import * as React from 'react';
+import type { Component } from 'react';
+import React from 'react';
 import { ConfigContext } from '../config-provider';
 import initCollapseMotion from '../_util/motion';
 import dropIndicatorRender from './utils/dropIndicator';
@@ -53,7 +54,7 @@ export interface AntTreeNodeProps {
   [customProp: string]: any;
 }
 
-export interface AntTreeNode extends React.Component<AntTreeNodeProps, {}> {}
+export interface AntTreeNode extends Component<AntTreeNodeProps, {}> {}
 
 export interface AntTreeNodeBaseEvent {
   node: AntTreeNode;