chore: Improve react import type (#6245)

* chore: improve import type

* chore: improve import ReactNode type

* chore: improve import CSSProperties type

* chore: improve import ReactElement type

* fix: delete old type

src/components/action-sheet/action-sheet.tsx

@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode, CSSProperties } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import classNames from 'classnames'
@@ -21,16 +22,16 @@ export type Action = {
 export type ActionSheetProps = {
   visible?: boolean
   actions: Action[]
-  extra?: React.ReactNode
-  cancelText?: React.ReactNode
+  extra?: ReactNode
+  cancelText?: ReactNode
   onAction?: (action: Action, index: number) => void
   onClose?: () => void
   onMaskClick?: () => void
   closeOnAction?: boolean
   closeOnMaskClick?: boolean
   safeArea?: boolean
   popupClassName?: string
-  popupStyle?: React.CSSProperties
+  popupStyle?: CSSProperties
 } & Pick<
   PopupProps,
   'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'

src/components/auto-center/auto-center.tsx

@@ -1,9 +1,10 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 const classPrefix = 'adm-auto-center'
 
-export type AutoCenterProps = { children?: React.ReactNode } & NativeProps
+export type AutoCenterProps = { children?: ReactNode } & NativeProps
 
 export const AutoCenter: FC<AutoCenterProps> = props => {
   return withNativeProps(

src/components/avatar/avatar.tsx

@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
 import { Fallback } from './fallback'

src/components/badge/badge.tsx

@@ -1,18 +1,19 @@
 import classNames from 'classnames'
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode, CSSProperties } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
 const classPrefix = `adm-badge`
 
 export const dot = <React.Fragment />
 
 export type BadgeProps = {
-  content?: React.ReactNode | typeof dot
+  content?: ReactNode | typeof dot
   color?: string
   bordered?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
   wrapperClassName?: string
-  wrapperStyle?: React.CSSProperties
+  wrapperStyle?: CSSProperties
 } & NativeProps<'--right' | '--top' | '--color'>
 
 export const Badge: FC<BadgeProps> = props => {

src/components/button/button.tsx

@@ -1,4 +1,10 @@
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import type {
+  ReactNode,
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  MouseEventHandler,
+} from 'react'
 import classNames from 'classnames'
 import DotLoading from '../dot-loading'
 import { mergeProps } from '../../utils/with-default-props'
@@ -7,8 +13,8 @@ import { isPromise } from '../../utils/validate'
 
 const classPrefix = `adm-button`
 
-type NativeButtonProps = React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
+type NativeButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 >
 
@@ -19,14 +25,14 @@ export type ButtonProps = {
   block?: boolean
   loading?: boolean | 'auto'
   loadingText?: string
-  loadingIcon?: React.ReactNode
+  loadingIcon?: ReactNode
   disabled?: boolean
   onClick?: (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => void | Promise<void> | unknown
   type?: 'submit' | 'reset' | 'button'
   shape?: 'default' | 'rounded' | 'rectangular'
-  children?: React.ReactNode
+  children?: ReactNode
 } & Pick<
   NativeButtonProps,
   'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd' | 'id'
@@ -68,7 +74,7 @@ export const Button = forwardRef<ButtonRef, ButtonProps>((p, ref) => {
     },
   }))
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = async e => {
+  const handleClick: MouseEventHandler<HTMLButtonElement> = async e => {
     if (!props.onClick) return
 
     const promise = props.onClick(e)

src/components/calendar/arrow-left-double.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 
 export const ArrowLeftDouble: FC = () => {
   return (

src/components/calendar/arrow-left.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 
 export const ArrowLeft: FC = () => {
   return (

src/components/calendar/calendar.tsx

@@ -1,10 +1,10 @@
 import React, {
   forwardRef,
-  ReactNode,
   useState,
   useImperativeHandle,
   useMemo,
 } from 'react'
+import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import dayjs from 'dayjs'
 import classNames from 'classnames'
@@ -32,14 +32,14 @@ export type CalendarRef = {
 }
 
 export type CalendarProps = {
-  prevMonthButton?: React.ReactNode
-  prevYearButton?: React.ReactNode
-  nextMonthButton?: React.ReactNode
-  nextYearButton?: React.ReactNode
+  prevMonthButton?: ReactNode
+  prevYearButton?: ReactNode
+  nextMonthButton?: ReactNode
+  nextYearButton?: ReactNode
   onPageChange?: (year: number, month: number) => void
   weekStartsOn?: 'Monday' | 'Sunday'
-  renderLabel?: (date: Date) => React.ReactNode
-  renderDate?: (date: Date) => React.ReactNode
+  renderLabel?: (date: Date) => ReactNode
+  renderDate?: (date: Date) => ReactNode
   allowClear?: boolean
   max?: Date
   min?: Date

src/components/capsule-tabs/capsule-tabs.tsx

@@ -1,10 +1,5 @@
-import React, {
-  FC,
-  ReactNode,
-  ReactElement,
-  isValidElement,
-  useRef,
-} from 'react'
+import React, { isValidElement, useRef } from 'react'
+import type { FC, ReactNode, ReactElement } from 'react'
 import classNames from 'classnames'
 import { animated } from '@react-spring/web'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
@@ -31,7 +26,7 @@ export type CapsuleTabsProps = {
   activeKey?: string | null
   defaultActiveKey?: string | null
   onChange?: (key: string) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 export const CapsuleTabs: FC<CapsuleTabsProps> = props => {

src/components/card/card.tsx

@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode, CSSProperties } from 'react'
 import classNames from 'classnames'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 
@@ -7,14 +8,14 @@ const classPrefix = `adm-card`
 export type CardProps = {
   title?: ReactNode
   extra?: ReactNode
-  headerStyle?: React.CSSProperties
+  headerStyle?: CSSProperties
   headerClassName?: string
-  bodyStyle?: React.CSSProperties
+  bodyStyle?: CSSProperties
   bodyClassName?: string
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   onBodyClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   onHeaderClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 export const Card: FC<CardProps> = props => {

src/components/cascade-picker-view/cascade-picker-view.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC } from 'react'
 import PickerView from '../picker-view'
 import type { PickerViewProps } from '../picker-view'
 import type { CascadePickerOption } from '../cascade-picker'

src/components/cascade-picker/prompt.tsx

@@ -1,5 +1,6 @@
 import { CascadePicker, CascadePickerProps } from './cascade-picker'
-import React, { FC, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import type { FC } from 'react'
 import { renderToBody } from '../../utils/render-to-body'
 import type { PickerValue } from '../picker'
 

src/components/cascader-view/cascader-view.tsx

@@ -1,4 +1,5 @@
-import React, { FC, ReactNode, useState, useEffect, useMemo } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
+import type { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 import Tabs from '../tabs'
 import CheckList from '../check-list'

src/components/cascader/prompt.tsx

@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
+import type { FC } from 'react'
 import { renderToBody } from '../../utils/render-to-body'
 import { Cascader } from './cascader'
 import type { CascaderProps, CascaderValue } from './index'

src/components/center-popup/center-popup.tsx

@@ -1,4 +1,5 @@
-import React, { FC, PropsWithChildren, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
+import type { FC, PropsWithChildren } from 'react'
 import { renderToContainer } from '../../utils/render-to-container'
 import Mask from '../mask'
 import { withStopPropagation } from '../../utils/with-stop-propagation'

src/components/check-list/check-list-item.tsx

@@ -1,4 +1,5 @@
-import React, { FC, useContext } from 'react'
+import React, { useContext } from 'react'
+import type { FC } from 'react'
 import List, { ListItemProps } from '../list'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { CheckListContext } from './context'

src/components/check-list/check-list.tsx

@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import List, { ListProps } from '../list'
 import { mergeProps } from '../../utils/with-default-props'
@@ -17,7 +18,7 @@ export type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
   extra?: (active: boolean) => ReactNode
   disabled?: boolean
   readOnly?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 const defaultProps = {

src/components/check-list/context.tsx

@@ -1,4 +1,5 @@
-import { createContext, ReactNode } from 'react'
+import { createContext } from 'react'
+import type { ReactNode } from 'react'
 
 export const CheckListContext = createContext<{
   value: string[]

src/components/checkbox/checkbox.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, useContext, useImperativeHandle } from 'react'
+import type { ReactNode } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import classNames from 'classnames'
 import { CheckboxGroupContext } from './group-context'
@@ -23,8 +24,8 @@ export type CheckboxProps = {
   indeterminate?: boolean
   block?: boolean
   id?: string
-  icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode
-  children?: React.ReactNode
+  icon?: (checked: boolean, indeterminate: boolean) => ReactNode
+  children?: ReactNode
   onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void
 } & NativeProps<'--icon-size' | '--font-size' | '--gap'>
 

src/components/checkbox/demos/demo3.tsx

@@ -1,4 +1,5 @@
-import React, { FC, PropsWithChildren, useRef } from 'react'
+import React, { useRef } from 'react'
+import type { FC, PropsWithChildren } from 'react'
 import { Checkbox, List } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 import { CheckboxRef } from '../checkbox'

src/components/checkbox/group.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import React from 'react'
+import type { FC, ReactNode } from 'react'
 import { mergeProps } from '../../utils/with-default-props'
 import { CheckboxValue } from '.'
 import { CheckboxGroupContext } from './group-context'
@@ -9,7 +10,7 @@ export interface CheckboxGroupProps {
   onChange?: (val: CheckboxValue[]) => void
   defaultValue?: CheckboxValue[]
   disabled?: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 const defaultProps = {

src/components/checkbox/native-input.tsx

@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
+import type { FC } from 'react'
 import { useMemoizedFn } from 'ahooks'
 
 interface Props {

src/components/collapse/collapse.tsx

@@ -1,4 +1,5 @@
-import React, { FC, ReactElement, isValidElement, useRef } from 'react'
+import React, { isValidElement, useRef } from 'react'
+import type { FC, ReactNode, ReactElement } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import List from '../list'
 import { DownOutline } from 'antd-mobile-icons'
@@ -14,13 +15,13 @@ const classPrefix = `adm-collapse`
 
 export type CollapsePanelProps = {
   key: string
-  title: React.ReactNode
+  title: ReactNode
   disabled?: boolean
   forceRender?: boolean
   destroyOnClose?: boolean
   onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void
-  arrow?: React.ReactNode | ((active: boolean) => React.ReactNode)
-  children?: React.ReactNode
+  arrow?: ReactNode | ((active: boolean) => ReactNode)
+  children?: ReactNode
 } & NativeProps
 
 export const CollapsePanel: FC<CollapsePanelProps> = () => {
@@ -31,7 +32,7 @@ const CollapsePanelContent: FC<{
   visible: boolean
   forceRender: boolean
   destroyOnClose: boolean
-  children?: React.ReactNode
+  children?: ReactNode
 }> = props => {
   const { visible } = props
   const innerRef = useRef<HTMLDivElement>(null)
@@ -105,7 +106,7 @@ type ValueProps<T> = {
   activeKey?: T
   defaultActiveKey?: T
   onChange?: (activeKey: T) => void
-  arrow?: React.ReactNode | ((active: boolean) => React.ReactNode)
+  arrow?: ReactNode | ((active: boolean) => ReactNode)
 }
 
 export type CollapseProps = (
@@ -116,7 +117,7 @@ export type CollapseProps = (
       accordion: true
     } & ValueProps<string | null>)
 ) & {
-  children?: React.ReactNode
+  children?: ReactNode
 } & NativeProps
 
 export const Collapse: FC<CollapseProps> = props => {

src/components/config-provider/config-provider.tsx

@@ -1,10 +1,11 @@
-import React, { FC, useContext } from 'react'
+import React, { useContext } from 'react'
+import type { FC, ReactNode } from 'react'
 import { Locale } from '../../locales/base'
 import zhCN from '../../locales/zh-CN'
 
 type Config = {
   locale: Locale
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export const defaultConfigRef: {

src/components/date-picker-view/date-picker-view.tsx

@@ -1,4 +1,5 @@
-import React, { FC, ReactNode, useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
+import type { FC, ReactNode } from 'react'
 import PickerView from '../picker-view'
 import type { PickerValue, PickerViewProps } from '../picker-view'
 import { NativeProps, withNativeProps } from '../../utils/native-props'