From 765cafb2cd4c25297e0e0e61ce8451d9681812f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Thu, 25 May 2023 19:58:07 +0800
Subject: [PATCH] refactor: ConfigProvider form dependency inversion (#42604)

* refactor: dependency inversion

* chore: use rc-util
---
 components/config-provider/index.tsx | 13 +++++++-----
 components/form/Form.tsx             | 31 ++++++++++++++++++----------
 components/form/context.tsx          |  4 +++-
 package.json                         |  2 +-
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 32cdd11f59..c5aa14d07a 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -1,13 +1,13 @@
 import { createTheme } from '@ant-design/cssinjs';
 import IconContext from '@ant-design/icons/lib/components/Context';
-import { FormProvider as RcFormProvider } from 'rc-field-form';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
-import { setValues } from 'rc-field-form/lib/utils/valueUtil';
 import useMemo from 'rc-util/lib/hooks/useMemo';
+import { merge } from 'rc-util/lib/utils/set';
 import type { ReactElement } from 'react';
 import * as React from 'react';
 import type { Options } from 'scroll-into-view-if-needed';
 import warning from '../_util/warning';
+import { ValidateMessagesContext } from '../form/context';
 import type { RequiredMark } from '../form/Form';
 import type { Locale } from '../locale';
 import LocaleProvider, { ANT_MARK } from '../locale';
@@ -293,8 +293,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
 
   const validateMessages = React.useMemo(
     () =>
-      setValues(
-        {},
+      merge(
         defaultLocale.Form?.defaultValidateMessages || {},
         memoedConfig.locale?.Form?.defaultValidateMessages || {},
         form?.validateMessages || {},
@@ -303,7 +302,11 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   );
 
   if (Object.keys(validateMessages).length > 0) {
-    childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
+    childNode = (
+      <ValidateMessagesContext.Provider value={validateMessages}>
+        {children}
+      </ValidateMessagesContext.Provider>
+    );
   }
 
   if (locale) {
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index b37e5a781b..f52410f5a1 100644
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -12,7 +12,7 @@ import { SizeContextProvider } from '../config-provider/SizeContext';
 import useSize from '../config-provider/hooks/useSize';
 import type { ColProps } from '../grid/col';
 import type { FormContextProps } from './context';
-import { FormContext } from './context';
+import { FormContext, FormProvider, ValidateMessagesContext } from './context';
 import useForm, { type FormInstance } from './hooks/useForm';
 import useFormWarning from './hooks/useFormWarning';
 import type { FormLabelAlign } from './interface';
@@ -67,6 +67,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
 
   const mergedSize = useSize(size);
 
+  const contextValidateMessages = React.useContext(ValidateMessagesContext);
+
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFormWarning(props);
@@ -158,16 +160,23 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
   return wrapSSR(
     <DisabledContextProvider disabled={disabled}>
       <SizeContextProvider size={mergedSize}>
-        <FormContext.Provider value={formContextValue}>
-          <FieldForm
-            id={name}
-            {...restFormProps}
-            name={name}
-            onFinishFailed={onInternalFinishFailed}
-            form={wrapForm}
-            className={formClassName}
-          />
-        </FormContext.Provider>
+        <FormProvider
+          {...{
+            // This is not list in API, we pass with spread
+            validateMessages: contextValidateMessages,
+          }}
+        >
+          <FormContext.Provider value={formContextValue}>
+            <FieldForm
+              id={name}
+              {...restFormProps}
+              name={name}
+              onFinishFailed={onInternalFinishFailed}
+              form={wrapForm}
+              className={formClassName}
+            />
+          </FormContext.Provider>
+        </FormProvider>
       </SizeContextProvider>
     </DisabledContextProvider>,
   );
diff --git a/components/form/context.tsx b/components/form/context.tsx
index ed6bb91f66..07b117874f 100644
--- a/components/form/context.tsx
+++ b/components/form/context.tsx
@@ -1,6 +1,6 @@
 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 type { Meta, ValidateMessages } from 'rc-field-form/lib/interface';
 import omit from 'rc-util/lib/omit';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import * as React from 'react';
@@ -92,3 +92,5 @@ export const NoFormStyle: FC<NoFormStyleProps> = ({ children, status, override }
     </FormItemInputContext.Provider>
   );
 };
+
+export const ValidateMessagesContext = React.createContext<ValidateMessages | undefined>(undefined);
diff --git a/package.json b/package.json
index f56e7ed3f6..47c422fd09 100644
--- a/package.json
+++ b/package.json
@@ -153,7 +153,7 @@
     "rc-tree": "~5.7.4",
     "rc-tree-select": "~5.9.0",
     "rc-upload": "~4.3.0",
-    "rc-util": "^5.31.2",
+    "rc-util": "^5.32.0",
     "scroll-into-view-if-needed": "^3.0.3",
     "throttle-debounce": "^5.0.0"
   },