diff --git a/components/config-provider/__tests__/locale.test.tsx b/components/config-provider/__tests__/locale.test.tsx index 677fc3ec56..c4c1cf9799 100644 --- a/components/config-provider/__tests__/locale.test.tsx +++ b/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(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 ( - - {this.state.showButton ? ( - - - - ) : null} - - ); - } - } - + return ( + + {showButton ? ( + + + + ) : null} + + ); + }; const wrapper = render(); fireEvent.click(wrapper.container.querySelector('button')!); expect($$('.ant-btn-primary')[0].textContent).toBe('OK'); diff --git a/components/date-picker/__tests__/RangePicker.test.tsx b/components/date-picker/__tests__/RangePicker.test.tsx index 32b5a77aac..f22c6a58d9 100644 --- a/components/date-picker/__tests__/RangePicker.test.tsx +++ b/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>(null); + return ( + { + setValue(v); + rangePickerValue = v as dayjs.Dayjs[]; + }} + /> + ); + }; - render() { - return ( - { - this.setState({ value }); - rangePickerValue = value as any; - }} - /> - ); - } - } const wrapper = render(); openPicker(wrapper); diff --git a/components/drawer/__tests__/MultiDrawer.test.tsx b/components/drawer/__tests__/MultiDrawer.test.tsx index 61089fd8d7..4238ec6a40 100644 --- a/components/drawer/__tests__/MultiDrawer.test.tsx +++ b/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 = (props) => { + const { placement, push } = props; -class MultiDrawer extends React.Component { - state = { open: false, childrenDrawer: false, hasChildren: true }; + const [open, setOpen] = useState(false); + const [hasChildren, setHasChildren] = useState(true); + const [childrenDrawer, setChildrenDrawer] = useState(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 ( -
- + + + - - - - {hasChildren && ( - -
This is two-level drawer
- - )} -
- - -
- - -
{String(childrenDrawer)}
-
- ); - } -} +
This is two-level drawer
+ + )} +
+ + +
+ +
{String(childrenDrawer)}
+ + ); +}; describe('Drawer', () => { it('render right MultiDrawer', () => { diff --git a/components/modal/__tests__/Modal.test.tsx b/components/modal/__tests__/Modal.test.tsx index d0506248f0..6feace83c9 100644 --- a/components/modal/__tests__/Modal.test.tsx +++ b/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 { - state = { open: false }; - - componentDidMount() { - this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state - } - - container = React.createRef(); - - getContainer = () => this.container?.current!; - - render() { - const { open } = this.state; - return ( -
-
- - Here is content of Modal - -
- ); - } -} +const ModalTester: React.FC = (props) => { + const [open, setOpen] = React.useState(false); + const container = React.useRef(null); + useEffect(() => { + setOpen(true); + }, []); + return ( +
+
+ + Here is content of Modal + +
+ ); +}; describe('Modal', () => { mountTest(Modal); diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 004781a571..0ee7ec06a1 100644 --- a/components/tooltip/index.tsx +++ b/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 = ( +const splitObject = ( obj: T, keys: (keyof T)[], ): Record<'picked' | 'omitted', T> => { diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 0aa9b4c848..2a4eecb45e 100644 --- a/components/tree/Tree.tsx +++ b/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 {} +export interface AntTreeNode extends Component {} export interface AntTreeNodeBaseEvent { node: AntTreeNode;