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 {
-      state = { showButton: false };
-
-      componentDidMount() {
-        this.setState({ showButton: true });
-      }
-
-      // eslint-disable-next-line class-methods-use-this
-      openConfirm = () => {
+    const App: React.FC = () => {
+      const [showButton, setShowButton] = useState<boolean>(false);
+      useEffect(() => {
+        setShowButton(true);
+      }, []);
+      const 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 ? (
-              <ConfigProvider locale={enUS}>
-                <button type="button" onClick={this.openConfirm}>
-                  open
-                </button>
-              </ConfigProvider>
-            ) : null}
-          </ConfigProvider>
-        );
-      }
-    }
-
+      return (
+        <ConfigProvider locale={zhCN}>
+          {showButton ? (
+            <ConfigProvider locale={enUS}>
+              <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;
-      class Test extends React.Component {
-        state = { value: null };
+      let rangePickerValue: dayjs.Dayjs[] = [];
+      const Test: React.FC = () => {
+        const [value, setValue] = useState<RangeValue<dayjs.Dayjs>>(null);
+        return (
+          <RangePicker
+            value={value}
+            mode={['month', 'month']}
+            onPanelChange={(v) => {
+              setValue(v);
+              rangePickerValue = v as dayjs.Dayjs[];
+            }}
+          />
+        );
+      };
 
-        render() {
-          return (
-            <RangePicker
-              value={this.state.value}
-              mode={['month', 'month']}
-              onPanelChange={(value) => {
-                this.setState({ value });
-                rangePickerValue = value as any;
-              }}
-            />
-          );
-        }
-      }
       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,111 +9,94 @@ interface DrawerPropsType {
   placement?: DrawerPopupProps['placement'];
 }
 
-interface DrawerStateType {
-  open: boolean;
-  hasChildren: boolean;
-  childrenDrawer: boolean;
-}
+const MultiDrawer: React.FC<DrawerPropsType> = (props) => {
+  const { placement, push } = props;
 
-class MultiDrawer extends React.Component<DrawerPropsType, DrawerStateType> {
-  state = { open: false, childrenDrawer: false, hasChildren: true };
+  const [open, setOpen] = useState<boolean>(false);
+  const [hasChildren, setHasChildren] = useState<boolean>(true);
+  const [childrenDrawer, setChildrenDrawer] = useState<boolean>(false);
 
-  showDrawer = () => {
-    this.setState({
-      open: true,
-      hasChildren: true,
-    });
+  const showDrawer = () => {
+    setOpen(true);
+    setHasChildren(true);
   };
 
-  onClose = () => {
-    this.setState({
-      open: false,
-    });
+  const onClose = () => {
+    setOpen(false);
   };
 
-  showChildrenDrawer = () => {
-    this.setState({
-      childrenDrawer: true,
-      hasChildren: true,
-    });
+  const showChildrenDrawer = () => {
+    setChildrenDrawer(true);
+    setHasChildren(true);
   };
 
-  onChildrenDrawerClose = () => {
-    this.setState({
-      childrenDrawer: false,
-    });
+  const onChildrenDrawerClose = () => {
+    setChildrenDrawer(false);
   };
 
-  onRemoveChildDrawer = () => {
-    this.setState({
-      hasChildren: false,
-    });
+  const onRemoveChildDrawer = () => {
+    setHasChildren(false);
   };
 
-  render() {
-    const { childrenDrawer, open, hasChildren } = this.state;
-    const { placement, push } = this.props;
-    return (
-      <div>
-        <Button type="primary" id="open_drawer" onClick={this.showDrawer}>
-          Open drawer
+  return (
+    <div>
+      <Button type="primary" id="open_drawer" onClick={showDrawer}>
+        Open drawer
+      </Button>
+      <Button type="primary" id="remove_drawer" onClick={onRemoveChildDrawer}>
+        rm child drawer
+      </Button>
+      <Drawer
+        title="Multi-level drawer"
+        className="test_drawer"
+        width={520}
+        onClose={onClose}
+        getContainer={false}
+        placement={placement}
+        open={open}
+        push={push}
+      >
+        <Button type="primary" id="open_two_drawer" onClick={showChildrenDrawer}>
+          Two-level drawer
         </Button>
-        <Button type="primary" id="remove_drawer" onClick={this.onRemoveChildDrawer}>
-          rm child drawer
-        </Button>
-        <Drawer
-          title="Multi-level drawer"
-          className="test_drawer"
-          width={520}
-          onClose={this.onClose}
-          getContainer={false}
-          placement={placement}
-          open={open}
-          push={push}
-        >
-          <Button type="primary" id="open_two_drawer" onClick={this.showChildrenDrawer}>
-            Two-level drawer
-          </Button>
-          {hasChildren && (
-            <Drawer
-              title="Two-level Drawer"
-              width={320}
-              className="Two-level"
-              getContainer={false}
-              placement={placement}
-              onClose={this.onChildrenDrawerClose}
-              open={childrenDrawer}
-            >
-              <div id="two_drawer_text">This is two-level drawer</div>
-            </Drawer>
-          )}
-          <div
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              width: '100%',
-              borderTop: '1px solid #e8e8e8',
-              padding: '10px 16px',
-              textAlign: 'right',
-              left: 0,
-              backgroundColor: '#fff',
-              borderRadius: '0 0 4px 4px',
-            }}
+        {hasChildren && (
+          <Drawer
+            title="Two-level Drawer"
+            width={320}
+            className="Two-level"
+            getContainer={false}
+            placement={placement}
+            onClose={onChildrenDrawerClose}
+            open={childrenDrawer}
           >
-            <Button style={{ marginRight: 8 }} onClick={this.onClose}>
-              Cancel
-            </Button>
-            <Button onClick={this.onClose} type="primary">
-              Submit
-            </Button>
-          </div>
-        </Drawer>
-
-        <div className="childrenDrawer">{String(childrenDrawer)}</div>
-      </div>
-    );
-  }
-}
+            <div id="two_drawer_text">This is two-level drawer</div>
+          </Drawer>
+        )}
+        <div
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            width: '100%',
+            borderTop: '1px solid #e8e8e8',
+            padding: '10px 16px',
+            textAlign: 'right',
+            left: 0,
+            backgroundColor: '#fff',
+            borderRadius: '0 0 4px 4px',
+          }}
+        >
+          <Button style={{ marginRight: 8 }} onClick={onClose}>
+            Cancel
+          </Button>
+          <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 }> {
-  state = { open: false };
-
-  componentDidMount() {
-    this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state
-  }
-
-  container = React.createRef<HTMLDivElement>();
-
-  getContainer = () => this.container?.current!;
-
-  render() {
-    const { open } = this.state;
-    return (
-      <div>
-        <div ref={this.container} />
-        <Modal {...this.props} open={open} getContainer={this.getContainer}>
-          Here is content of Modal
-        </Modal>
-      </div>
-    );
-  }
-}
+const ModalTester: React.FC<ModalProps> = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const container = React.useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    setOpen(true);
+  }, []);
+  return (
+    <div>
+      <div ref={container} />
+      <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;