From 93ec2929610cadfe0e15afaa066c60b06b943f1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=84=A0=EC=9E=AC?= <63578094+Sunjae95@users.noreply.github.com> Date: Sun, 15 Dec 2024 16:53:51 +0900 Subject: [PATCH] chore(import): ensure code convention compliance by importing React (#52021) * fix(import): ensure code convention compliance by importing React * fix(type): add generic type for useMemo --- components/form/ErrorList.tsx | 6 ++++-- components/form/Form.tsx | 5 ++--- components/form/context.tsx | 7 +++---- components/form/hooks/useFormInstance.ts | 4 ++-- components/form/hooks/useFormItemStatus.ts | 4 ++-- components/form/hooks/useFormWarning.ts | 4 ++-- components/form/hooks/useFrameState.ts | 7 +++---- components/form/hooks/useVariants.ts | 6 +++--- 8 files changed, 21 insertions(+), 22 deletions(-) diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx index 207c13dd3a..f614c2a6dc 100644 --- a/components/form/ErrorList.tsx +++ b/components/form/ErrorList.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useMemo } from 'react'; import classNames from 'classnames'; import type { CSSMotionProps } from 'rc-motion'; import CSSMotion, { CSSMotionList } from 'rc-motion'; @@ -58,7 +57,10 @@ const ErrorList: React.FC = ({ const rootCls = useCSSVarCls(prefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls); - const collapseMotion: CSSMotionProps = useMemo(() => initCollapseMotion(prefixCls), [prefixCls]); + const collapseMotion = React.useMemo( + () => initCollapseMotion(prefixCls), + [prefixCls], + ); // We have to debounce here again since somewhere use ErrorList directly still need no shaking // ref: https://github.com/ant-design/ant-design/issues/36336 diff --git a/components/form/Form.tsx b/components/form/Form.tsx index b2941245b6..acb24309fd 100644 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useMemo } from 'react'; import classNames from 'classnames'; import FieldForm, { List, useWatch } from 'rc-field-form'; import type { FormProps as RcFormProps } from 'rc-field-form/lib/Form'; @@ -93,7 +92,7 @@ const InternalForm: React.ForwardRefRenderFunction = (props, useFormWarning(props); } - const mergedRequiredMark = useMemo(() => { + const mergedRequiredMark = React.useMemo(() => { if (requiredMark !== undefined) { return requiredMark; } @@ -137,7 +136,7 @@ const InternalForm: React.ForwardRefRenderFunction = (props, const { __INTERNAL__ } = wrapForm; __INTERNAL__.name = name; - const formContextValue = useMemo( + const formContextValue = React.useMemo( () => ({ name, labelAlign, diff --git a/components/form/context.tsx b/components/form/context.tsx index c20f08280e..94895f55e1 100644 --- a/components/form/context.tsx +++ b/components/form/context.tsx @@ -1,6 +1,5 @@ import type { PropsWithChildren, ReactNode } from 'react'; import * as React from 'react'; -import { createContext, useContext, useMemo } from 'react'; import { FormProvider as RcFormProvider } from 'rc-field-form'; import type { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext'; import type { Meta } from 'rc-field-form/lib/interface'; @@ -78,9 +77,9 @@ export type NoFormStyleProps = PropsWithChildren<{ }>; export const NoFormStyle: React.FC = ({ children, status, override }) => { - const formItemInputContext = useContext(FormItemInputContext); + const formItemInputContext = React.useContext(FormItemInputContext); - const newFormItemInputContext = useMemo(() => { + const newFormItemInputContext = React.useMemo(() => { const newContext = { ...formItemInputContext }; if (override) { delete newContext.isFormItemInput; @@ -100,4 +99,4 @@ export const NoFormStyle: React.FC = ({ children, status, over ); }; -export const VariantContext = createContext(undefined); +export const VariantContext = React.createContext(undefined); diff --git a/components/form/hooks/useFormInstance.ts b/components/form/hooks/useFormInstance.ts index 4884206a45..c83b456ef8 100644 --- a/components/form/hooks/useFormInstance.ts +++ b/components/form/hooks/useFormInstance.ts @@ -1,10 +1,10 @@ -import { useContext } from 'react'; +import * as React from 'react'; import { FormContext } from '../context'; import type { FormInstance } from './useForm'; export default function useFormInstance(): FormInstance { - const { form } = useContext(FormContext); + const { form } = React.useContext(FormContext); return form!; } diff --git a/components/form/hooks/useFormItemStatus.ts b/components/form/hooks/useFormItemStatus.ts index bc43abe676..74318a1d40 100644 --- a/components/form/hooks/useFormItemStatus.ts +++ b/components/form/hooks/useFormItemStatus.ts @@ -1,4 +1,4 @@ -import { useContext } from 'react'; +import * as React from 'react'; import type { ValidateStatus } from 'antd/es/form/FormItem'; import { devUseWarning } from '../../_util/warning'; @@ -11,7 +11,7 @@ type UseFormItemStatus = () => { }; const useFormItemStatus: UseFormItemStatus = () => { - const { status, errors = [], warnings = [] } = useContext(FormItemInputContext); + const { status, errors = [], warnings = [] } = React.useContext(FormItemInputContext); if (process.env.NODE_ENV !== 'production') { const warning = devUseWarning('Form.Item'); diff --git a/components/form/hooks/useFormWarning.ts b/components/form/hooks/useFormWarning.ts index 31dbeddd3e..333b025895 100644 --- a/components/form/hooks/useFormWarning.ts +++ b/components/form/hooks/useFormWarning.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import * as React from 'react'; import { devUseWarning } from '../../_util/warning'; import type { FormProps } from '../Form'; @@ -8,7 +8,7 @@ const names: Record = {}; export default function useFormWarning({ name }: FormProps) { const warning = devUseWarning('Form'); - useEffect(() => { + React.useEffect(() => { if (name) { names[name] = (names[name] || 0) + 1; diff --git a/components/form/hooks/useFrameState.ts b/components/form/hooks/useFrameState.ts index 6246bbda56..53209b7147 100644 --- a/components/form/hooks/useFrameState.ts +++ b/components/form/hooks/useFrameState.ts @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useRef } from 'react'; import raf from 'rc-util/lib/raf'; type Updater = (prev?: ValueType) => ValueType; @@ -8,9 +7,9 @@ export default function useFrameState( defaultValue: ValueType, ): [ValueType, (updater: Updater) => void] { const [value, setValue] = React.useState(defaultValue); - const frameRef = useRef(null); - const batchRef = useRef[]>([]); - const destroyRef = useRef(false); + const frameRef = React.useRef(null); + const batchRef = React.useRef[]>([]); + const destroyRef = React.useRef(false); React.useEffect(() => { destroyRef.current = false; diff --git a/components/form/hooks/useVariants.ts b/components/form/hooks/useVariants.ts index f405e89eba..6e04e33577 100644 --- a/components/form/hooks/useVariants.ts +++ b/components/form/hooks/useVariants.ts @@ -1,4 +1,4 @@ -import { useContext } from 'react'; +import * as React from 'react'; import { VariantContext } from '../context'; import type { Variant, ConfigProviderProps } from '../../config-provider'; @@ -26,8 +26,8 @@ const useVariant = ( variant: Variant | undefined, legacyBordered: boolean | undefined = undefined, ): [Variant, boolean] => { - const { variant: configVariant, [component]: componentConfig } = useContext(ConfigContext); - const ctxVariant = useContext(VariantContext); + const { variant: configVariant, [component]: componentConfig } = React.useContext(ConfigContext); + const ctxVariant = React.useContext(VariantContext); const configComponentVariant = componentConfig?.variant; let mergedVariant: Variant;