fix(form): reset ProFormList when new form

ant-design · Nov 11, 2022 · b9ba5d0 · b9ba5d0
1 parent 7cf5dea
commit b9ba5d0
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 37 deletions.
diff --git a/packages/form/src/BaseForm/BaseForm.tsx b/packages/form/src/BaseForm/BaseForm.tsx
@@ -40,6 +40,7 @@ import React, {
 } from 'react';
 import type { SubmitterProps } from '../components';
 import { Submitter } from '../components';
+import { FormListContext } from '../components/List';
 import FieldContext from '../FieldContext';
 import { GridContext, useGridHelpers } from '../helpers';
 import type { FieldProps, GroupProps, ProFormGridConfig } from '../typing';
@@ -697,44 +698,46 @@ function BaseForm<T = Record<string, any>>(props: BaseFormProps<T>) {
             },
           }}
         >
-          <Form
-            onKeyPress={(event) => {
-              if (!isKeyPressSubmit) return;
-              if (event.key === 'Enter') {
-                formRef.current?.submit();
-              }
-            }}
-            autoComplete="off"
-            form={form}
-            {...omit(propRest, ['labelWidth', 'autoFocusFirstInput'] as any[])}
-            // 组合 urlSearch 和 initialValues
-            initialValues={
-              syncToUrlAsImportant
-                ? { ...initialValues, ...initialData, ...urlParamsMergeInitialValues }
-                : { ...urlParamsMergeInitialValues, ...initialValues, ...initialData }
-            }
-            onValuesChange={(changedValues, values) => {
-              propRest?.onValuesChange?.(
-                transformKey(changedValues, !!omitNil),
-                transformKey(values, !!omitNil),
-              );
-            }}
-            className={classNames(props.className, prefixCls, hashId)}
-            onFinish={onFinish}
-          >
-            <BaseFormComponents
-              transformKey={transformKey}
+          <FormListContext.Provider value={{}}>
+            <Form
+              onKeyPress={(event) => {
+                if (!isKeyPressSubmit) return;
+                if (event.key === 'Enter') {
+                  formRef.current?.submit();
+                }
+              }}
               autoComplete="off"
-              loading={loading}
-              onUrlSearchChange={setUrlSearch}
-              {...props}
-              formRef={formRef}
-              initialValues={{
-                ...initialValues,
-                ...initialData,
+              form={form}
+              {...omit(propRest, ['labelWidth', 'autoFocusFirstInput'] as any[])}
+              // 组合 urlSearch 和 initialValues
+              initialValues={
+                syncToUrlAsImportant
+                  ? { ...initialValues, ...initialData, ...urlParamsMergeInitialValues }
+                  : { ...urlParamsMergeInitialValues, ...initialValues, ...initialData }
+              }
+              onValuesChange={(changedValues, values) => {
+                propRest?.onValuesChange?.(
+                  transformKey(changedValues, !!omitNil),
+                  transformKey(values, !!omitNil),
+                );
               }}
-            />
-          </Form>
+              className={classNames(props.className, prefixCls, hashId)}
+              onFinish={onFinish}
+            >
+              <BaseFormComponents
+                transformKey={transformKey}
+                autoComplete="off"
+                loading={loading}
+                onUrlSearchChange={setUrlSearch}
+                {...props}
+                formRef={formRef}
+                initialValues={{
+                  ...initialValues,
+                  ...initialData,
+                }}
+              />
+            </Form>
+          </FormListContext.Provider>
         </FieldContext.Provider>
       </ConfigProviderWrap>
     </EditOrReadOnlyContext.Provider>,

diff --git a/packages/provider/src/index.tsx b/packages/provider/src/index.tsx
@@ -322,7 +322,6 @@ export const ConfigProviderWrap: React.FC<{
   const { locale, getPrefixCls } = useContext(AntdConfigProvider.ConfigContext);
   const tokenContext = useToken?.();
 
-  console.log(tokenContext);
   // 如果 locale 不存在自动注入的 AntdConfigProvider
   const ANTDProvider = locale === undefined ? AntdConfigProvider : React.Fragment;
   const proProvide = useContext(ConfigContext);

diff --git a/tests/form/formList.test.tsx b/tests/form/formList.test.tsx
@@ -50,6 +50,50 @@ describe('ProForm List', () => {
     expect(fn).toBeCalledWith(['name', 'nickName']);
   });
 
+  it('⛲ ProForm.List for deps ProFormDependency', async () => {
+    const fn = jest.fn();
+    const html = render(
+      <ProForm
+        onFinish={async (values) => {
+          fn(Object.keys(values.users[0]));
+        }}
+      >
+        <ProFormList
+          name="users"
+          label="用户信息"
+          initialValue={[
+            {
+              name: '1111',
+              nickName: '1111',
+            },
+          ]}
+        >
+          <ProForm>
+            <ProFormText name="name" placeholder="用户信息的名字" />
+            <ProFormDependency name={['name']}>
+              {({ name }) => {
+                return name;
+              }}
+            </ProFormDependency>
+          </ProForm>
+        </ProFormList>
+      </ProForm>,
+    );
+
+    const input = await html.findByPlaceholderText('用户信息的名字');
+    act(() => {
+      fireEvent.change(input, {
+        target: {
+          value: '121212',
+        },
+      });
+    });
+
+    const text = await html.findByText('121212');
+
+    expect(!!text).toBeTruthy();
+  });
+
   it('⛲ ProForm.List add button', async () => {
     const fn = jest.fn();
     const html = mount(