From f78f7bfef91e0af52a4dc383019f1b667ff23cb3 Mon Sep 17 00:00:00 2001
From: thinkasany <117748716+thinkasany@users.noreply.github.com>
Date: Tue, 25 Jul 2023 19:47:05 +0800
Subject: [PATCH] chore(form): code style optimization (#43793)

* chore(form): code style optimization

* fix: add type CSSMotionProps

* Update ErrorList.tsx

* Update FormItemLabel.tsx

* Update FormItemLabel.tsx
---
 components/form/ErrorList.tsx     | 11 +++++++----
 components/form/FormItemInput.tsx |  8 ++++----
 components/form/FormItemLabel.tsx |  4 ++--
 components/form/context.tsx       |  4 ++--
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
index 8893e9375b..4ab2f8bc02 100644
--- a/components/form/ErrorList.tsx
+++ b/components/form/ErrorList.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import type { CSSMotionProps } from 'rc-motion';
 import CSSMotion, { CSSMotionList } from 'rc-motion';
 import * as React from 'react';
 import { useMemo } from 'react';
@@ -40,7 +41,7 @@ export interface ErrorListProps {
   onVisibleChanged?: (visible: boolean) => void;
 }
 
-export default function ErrorList({
+const ErrorList: React.FC<ErrorListProps> = ({
   help,
   helpStatus,
   errors = EMPTY_LIST,
@@ -48,14 +49,14 @@ export default function ErrorList({
   className: rootClassName,
   fieldId,
   onVisibleChanged,
-}: ErrorListProps) {
+}) => {
   const { prefixCls } = React.useContext(FormItemPrefixContext);
 
   const baseClassName = `${prefixCls}-item-explain`;
 
   const [, hashId] = useStyle(prefixCls);
 
-  const collapseMotion = useMemo(() => initCollapseMotion(prefixCls), [prefixCls]);
+  const collapseMotion: CSSMotionProps = 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
@@ -131,4 +132,6 @@ export default function ErrorList({
       }}
     </CSSMotion>
   );
-}
+};
+
+export default ErrorList;
diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx
index c81a5ce4da..a806be1794 100644
--- a/components/form/FormItemInput.tsx
+++ b/components/form/FormItemInput.tsx
@@ -63,13 +63,13 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
   delete subFormContext.labelCol;
   delete subFormContext.wrapperCol;
 
-  const inputDom = (
+  const inputDom: React.ReactNode = (
     <div className={`${baseClassName}-control-input`}>
       <div className={`${baseClassName}-control-input-content`}>{children}</div>
     </div>
   );
   const formItemContext = React.useMemo(() => ({ prefixCls, status }), [prefixCls, status]);
-  const errorListDom =
+  const errorListDom: React.ReactNode =
     marginBottom !== null || errors.length || warnings.length ? (
       <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
         <FormItemPrefixContext.Provider value={formItemContext}>
@@ -95,13 +95,13 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
 
   // If extra = 0, && will goes wrong
   // 0&&error -> 0
-  const extraDom = extra ? (
+  const extraDom: React.ReactNode = extra ? (
     <div {...extraProps} className={`${baseClassName}-extra`}>
       {extra}
     </div>
   ) : null;
 
-  const dom =
+  const dom: React.ReactNode =
     formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? (
       formItemRender.render(props, { input: inputDom, errorList: errorListDom, extra: extraDom })
     ) : (
diff --git a/components/form/FormItemLabel.tsx b/components/form/FormItemLabel.tsx
index a8f4dace0e..69fed60960 100644
--- a/components/form/FormItemLabel.tsx
+++ b/components/form/FormItemLabel.tsx
@@ -84,7 +84,7 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
     },
   );
 
-  let labelChildren = label;
+  let labelChildren: React.ReactNode = label;
 
   // Keep label is original where there should have no colon
   const computedColon = colon === true || (contextColon !== false && colon !== false);
@@ -100,7 +100,7 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
 
   if (tooltipProps) {
     const { icon = <QuestionCircleOutlined />, ...restTooltipProps } = tooltipProps;
-    const tooltipNode = (
+    const tooltipNode: React.ReactNode = (
       <Tooltip {...restTooltipProps}>
         {React.cloneElement(icon, { className: `${prefixCls}-item-tooltip`, title: '' })}
       </Tooltip>
diff --git a/components/form/context.tsx b/components/form/context.tsx
index ed6bb91f66..7a3f388b58 100644
--- a/components/form/context.tsx
+++ b/components/form/context.tsx
@@ -2,7 +2,7 @@ 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';
 import omit from 'rc-util/lib/omit';
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
 import type { ColProps } from '../grid/col';
@@ -70,7 +70,7 @@ export type NoFormStyleProps = PropsWithChildren<{
   override?: boolean;
 }>;
 
-export const NoFormStyle: FC<NoFormStyleProps> = ({ children, status, override }) => {
+export const NoFormStyle: React.FC<NoFormStyleProps> = ({ children, status, override }) => {
   const formItemInputContext = useContext(FormItemInputContext);
 
   const newFormItemInputContext = useMemo(() => {