chore: eslint add consistent-type-imports (#35419)

* chore: eslint add consistent-type-imports

* fix avatar

* Update Item.tsx

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
         'no-unused-expressions': 'off',
         '@typescript-eslint/no-unused-expressions': 2,
+        '@typescript-eslint/consistent-type-imports': 2,
       },
     },
     {

components/_util/ActionButton.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import useState from 'rc-util/lib/hooks/useState';
 import Button from '../button';
-import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
+import type { LegacyButtonType, ButtonProps } from '../button/button';
+import { convertLegacyProps } from '../button/button';
 
 export interface ActionButtonProps {
   type?: LegacyButtonType;

components/_util/colors.ts

@@ -1,4 +1,5 @@
-import { ElementOf, tuple } from './type';
+import type { ElementOf } from './type';
+import { tuple } from './type';
 
 export const PresetStatusColorTypes = tuple('success', 'processing', 'error', 'default', 'warning');
 // eslint-disable-next-line import/prefer-default-export

components/_util/getRenderPropValue.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 export type RenderFunction = () => React.ReactNode;
 

components/_util/motion.tsx

@@ -1,5 +1,5 @@
-import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
-import { MotionEvent } from 'rc-motion/lib/interface';
+import type { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
+import type { MotionEvent } from 'rc-motion/lib/interface';
 import { tuple } from './type';
 
 // ================== Collapse Motion ==================

components/_util/placements.tsx

@@ -1,5 +1,5 @@
 import { placements } from 'rc-tooltip/lib/placements';
-import { BuildInPlacements } from 'rc-trigger';
+import type { BuildInPlacements } from 'rc-trigger';
 
 const autoAdjustOverflowEnabled = {
   adjustX: 1,

components/_util/statusUtils.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ValidateStatus } from '../form/FormItem';
+import type { ValidateStatus } from '../form/FormItem';
 import { tuple } from './type';
 
 const InputStatuses = tuple('warning', 'error', '');

components/_util/wave.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 import { supportRef, composeRef } from 'rc-util/lib/ref';
 import raf from './raf';
-import { ConfigConsumer, ConfigConsumerProps, CSPConfig, ConfigContext } from '../config-provider';
+import type { ConfigConsumerProps, CSPConfig } from '../config-provider';
+import { ConfigConsumer, ConfigContext } from '../config-provider';
 import { cloneElement } from './reactNode';
 
 let styleForPseudo: HTMLStyleElement | null;

components/affix/__tests__/Affix.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import Affix, { AffixProps, AffixState } from '..';
+import type { ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import type { AffixProps, AffixState } from '..';
+import Affix from '..';
 import { getObserverEntities } from '../utils';
 import Button from '../../button';
 import rtlTest from '../../../tests/shared/rtlTest';

components/affix/index.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import ResizeObserver from 'rc-resize-observer';
-import { ConfigContext, ConfigConsumerProps } from '../config-provider';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
 
 import {

components/anchor/Anchor.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import memoizeOne from 'memoize-one';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Affix from '../affix';
-import { ConfigContext, ConfigConsumerProps } from '../config-provider';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import scrollTo from '../_util/scrollTo';
 import getScroll from '../_util/getScroll';
 import AnchorContext from './context';

components/anchor/AnchorLink.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { AntAnchor } from './Anchor';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import type { AntAnchor } from './Anchor';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigConsumer } from '../config-provider';
 import AnchorContext from './context';
 
 export interface AnchorLinkProps {

components/anchor/context.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AntAnchor } from './Anchor';
+import type { AntAnchor } from './Anchor';
 
 const AnchorContext = React.createContext<AntAnchor>(null as any);
 

components/auto-complete/demo/uncertain-category.md

@@ -16,7 +16,7 @@ Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/s
 ```tsx
 import React, { useState } from 'react';
 import { Input, AutoComplete } from 'antd';
-import { SelectProps } from 'antd/es/select';
+import type { SelectProps } from 'antd/es/select';
 
 function getRandomInt(max: number, min: number = 0) {
   return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators

components/auto-complete/index.tsx

@@ -11,16 +11,18 @@ import toArray from 'rc-util/lib/Children/toArray';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import type { BaseSelectRef } from 'rc-select';
-import Select, {
+import type {
   BaseOptionType,
   DefaultOptionType,
   InternalSelectProps,
   RefSelectProps,
 } from '../select';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import Select from '../select';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigConsumer } from '../config-provider';
 import devWarning from '../_util/devWarning';
 import { isValidElement } from '../_util/reactNode';
-import { InputStatus } from '../_util/statusUtils';
+import type { InputStatus } from '../_util/statusUtils';
 
 const { Option } = Select;
 

components/avatar/SizeContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ScreenSizeMap } from '../_util/responsiveObserve';
+import type { ScreenSizeMap } from '../_util/responsiveObserve';
 
 export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
 

components/avatar/avatar.tsx

@@ -4,9 +4,11 @@ import ResizeObserver from 'rc-resize-observer';
 import { composeRef } from 'rc-util/lib/ref';
 import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
-import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
+import type { Breakpoint } from '../_util/responsiveObserve';
+import { responsiveArray } from '../_util/responsiveObserve';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
-import SizeContext, { AvatarSize } from './SizeContext';
+import type { AvatarSize } from './SizeContext';
+import SizeContext from './SizeContext';
 
 export interface AvatarProps {
   /** Shape of avatar, options: `circle`, `square` */

components/avatar/group.tsx

@@ -5,7 +5,8 @@ import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import Avatar from './avatar';
 import Popover from '../popover';
-import { AvatarSize, SizeContextProvider } from './SizeContext';
+import type { AvatarSize } from './SizeContext';
+import { SizeContextProvider } from './SizeContext';
 
 export interface GroupProps {
   className?: string;

components/avatar/index.tsx

@@ -1,12 +1,13 @@
-import * as React from 'react';
-import InternalAvatar, { AvatarProps } from './avatar';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { AvatarProps } from './avatar';
+import InternalAvatar from './avatar';
 import Group from './group';
 
 export { AvatarProps } from './avatar';
 export { GroupProps } from './group';
 
 interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>> {
+  extends ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLElement>> {
   Group: typeof Group;
 }
 

components/badge/Ribbon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { LiteralUnion } from '../_util/type';
-import { PresetColorType } from '../_util/colors';
+import type { LiteralUnion } from '../_util/type';
+import type { PresetColorType } from '../_util/colors';
 import { ConfigContext } from '../config-provider';
 import { isPresetColor } from './utils';
 

components/badge/index.tsx

@@ -4,9 +4,9 @@ import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
 import ScrollNumber from './ScrollNumber';
 import Ribbon from './Ribbon';
-import { PresetColorType, PresetStatusColorType } from '../_util/colors';
+import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
 import { ConfigContext } from '../config-provider';
-import { LiteralUnion } from '../_util/type';
+import type { LiteralUnion } from '../_util/type';
 import { cloneElement } from '../_util/reactNode';
 import { isPresetColor } from './utils';
 

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import DownOutlined from '@ant-design/icons/DownOutlined';
 
-import Dropdown, { DropdownProps } from '../dropdown/dropdown';
+import type { DropdownProps } from '../dropdown/dropdown';
+import Dropdown from '../dropdown/dropdown';
 import { ConfigContext } from '../config-provider';
 
 export interface BreadcrumbItemProps {

components/button/__tests__/index.test.tsx

@@ -8,7 +8,7 @@ import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { sleep, render, fireEvent } from '../../../tests/utils';
-import { SizeType } from '../../config-provider/SizeContext';
+import type { SizeType } from '../../config-provider/SizeContext';
 
 describe('Button', () => {
   mountTest(Button);

components/button/button-group.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { SizeType } from '../config-provider/SizeContext';
+import type { SizeType } from '../config-provider/SizeContext';
 import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
 

components/button/button.tsx

@@ -8,7 +8,8 @@ import { ConfigContext } from '../config-provider';
 import Wave from '../_util/wave';
 import { tuple } from '../_util/type';
 import devWarning from '../_util/devWarning';
-import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import type { SizeType } from '../config-provider/SizeContext';
+import SizeContext from '../config-provider/SizeContext';
 import LoadingIcon from './LoadingIcon';
 import { cloneElement } from '../_util/reactNode';
 

components/button/demo/multiple.md

@@ -14,7 +14,8 @@ title:
 If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
 
 ```tsx
-import { Button, Menu, Dropdown, MenuProps } from 'antd';
+import type { MenuProps } from 'antd';
+import { Button, Menu, Dropdown } from 'antd';
 
 const onMenuClick: MenuProps['onClick'] = e => {
   console.log('click', e);

components/calendar/Header.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { GenerateConfig } from 'rc-picker/lib/generate';
-import { Locale } from 'rc-picker/lib/interface';
+import type { GenerateConfig } from 'rc-picker/lib/generate';
+import type { Locale } from 'rc-picker/lib/interface';
 import { useContext, useMemo } from 'react';
 import { FormItemInputContext } from '../form/context';
 import Select from '../select';
 import { Group, Button } from '../radio';
-import { CalendarMode } from './generateCalendar';
+import type { CalendarMode } from './generateCalendar';
 
 const YearSelectOffset = 10;
 const YearSelectTotal = 20;

components/calendar/generateCalendar.tsx

@@ -3,9 +3,9 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import classNames from 'classnames';
 import padStart from 'lodash/padStart';
 import { PickerPanel as RCPickerPanel } from 'rc-picker';
-import { Locale } from 'rc-picker/lib/interface';
-import { GenerateConfig } from 'rc-picker/lib/generate';
-import {
+import type { Locale } from 'rc-picker/lib/interface';
+import type { GenerateConfig } from 'rc-picker/lib/generate';
+import type {
   PickerPanelBaseProps as RCPickerPanelBaseProps,
   PickerPanelDateProps as RCPickerPanelDateProps,
   PickerPanelTimeProps as RCPickerPanelTimeProps,

components/calendar/index.tsx

@@ -1,4 +1,4 @@
-import { Moment } from 'moment';
+import type { Moment } from 'moment';
 import momentGenerateConfig from 'rc-picker/lib/generate/moment';
 import generateCalendar, { CalendarProps } from './generateCalendar';
 

components/card/Grid.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigConsumer } from '../config-provider';
 
 export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;

components/card/Meta.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigConsumer } from '../config-provider';
 
 export interface CardMetaProps {
   prefixCls?: string;

components/card/index.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import Grid from './Grid';
 import Meta from './Meta';
-import Tabs, { TabsProps } from '../tabs';
+import type { TabsProps } from '../tabs';
+import Tabs from '../tabs';
 import Row from '../row';
 import Col from '../col';
 import { ConfigContext } from '../config-provider';

components/carousel/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import SlickCarousel, { Settings } from '@ant-design/react-slick';
+import type { Settings } from '@ant-design/react-slick';
+import SlickCarousel from '@ant-design/react-slick';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
 

components/cascader/__tests__/type.test.tsx

@@ -1,6 +1,7 @@
 import { mount } from 'enzyme';
 import * as React from 'react';
-import Cascader, { BaseOptionType } from '..';
+import type { BaseOptionType } from '..';
+import Cascader from '..';
 
 describe('Cascader.typescript', () => {
   it('options value', () => {

components/cascader/index.tsx

@@ -19,9 +19,11 @@ import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import getIcons from '../select/utils/iconUtil';
-import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
+import type { SelectCommonPlacement } from '../_util/motion';
+import { getTransitionName, getTransitionDirection } from '../_util/motion';
 import { FormItemInputContext } from '../form/context';
-import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
+import type { InputStatus } from '../_util/statusUtils';
+import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content

components/checkbox/Group.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import Checkbox, { CheckboxChangeEvent } from './Checkbox';
+import type { CheckboxChangeEvent } from './Checkbox';
+import Checkbox from './Checkbox';
 import { ConfigContext } from '../config-provider';
 
 export type CheckboxValueType = string | number | boolean;

components/checkbox/index.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import InternalCheckbox, { CheckboxProps } from './Checkbox';
+import type * as React from 'react';
+import type { CheckboxProps } from './Checkbox';
+import InternalCheckbox from './Checkbox';
 import Group from './Group';
 
 export { CheckboxProps, CheckboxChangeEvent } from './Checkbox';

components/collapse/Collapse.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import RcCollapse from 'rc-collapse';
-import { CSSMotionProps } from 'rc-motion';
+import type { CSSMotionProps } from 'rc-motion';
 import classNames from 'classnames';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 
 import toArray from 'rc-util/lib/Children/toArray';
 import omit from 'rc-util/lib/omit';
-import CollapsePanel, { CollapsibleType } from './CollapsePanel';
+import type { CollapsibleType } from './CollapsePanel';
+import CollapsePanel from './CollapsePanel';
 import { ConfigContext } from '../config-provider';
 import collapseMotion from '../_util/motion';
 import { cloneElement } from '../_util/reactNode';