feat: Form.List nest Field.Item support preserve={false} (#258)

zombieJ · web-flow · commit dd8f0860067b · 2021-02-07T10:37:10.000+08:00
* chore: Update comment

* test: Test driven

* fix: preserve can delete nest field

* support omit value
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "async-validator": "^3.0.3",
-    "rc-util": "^5.0.0"
+    "rc-util": "^5.8.0"
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.5",
diff --git a/src/Field.tsx b/src/Field.tsx
@@ -107,7 +107,11 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     resetCount: 0,
   };
 
-  private cancelRegisterFunc: (isListField?: boolean, preserve?: boolean) => void | null = null;
+  private cancelRegisterFunc: (
+    isListField?: boolean,
+    preserve?: boolean,
+    namePath?: InternalNamePath,
+  ) => void | null = null;
 
   private mounted = false;
 
@@ -162,10 +166,10 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
   }
 
   public cancelRegister = () => {
-    const { preserve, isListField } = this.props;
+    const { preserve, isListField, name } = this.props;
 
     if (this.cancelRegisterFunc) {
-      this.cancelRegisterFunc(isListField, preserve);
+      this.cancelRegisterFunc(isListField, preserve, getNamePath(name));
     }
     this.cancelRegisterFunc = null;
   };
@@ -553,11 +557,15 @@ function WrapperField<Values = any>({ name, ...restProps }: FieldProps<Values>)
     key = `_${(namePath || []).join('_')}`;
   }
 
-  if (process.env.NODE_ENV !== 'production') {
-    warning(
-      restProps.preserve !== false || !restProps.isListField,
-      '`preserve` should not apply on Form.List fields.',
-    );
+  // Warning if it's a directly list field.
+  // We can still support multiple level field preserve.
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    restProps.preserve === false &&
+    restProps.isListField &&
+    namePath.length <= 1
+  ) {
+    warning(false, '`preserve` should not apply on Form.List fields.');
   }
 
   return <Field key={key} name={namePath} {...restProps} fieldContext={fieldContext} />;
diff --git a/src/useForm.ts b/src/useForm.ts
@@ -536,14 +536,16 @@ export class FormStore {
     }
 
     // un-register field callback
-    return (isListField?: boolean, preserve?: boolean) => {
+    return (isListField?: boolean, preserve?: boolean, subNamePath: InternalNamePath = []) => {
       this.fieldEntities = this.fieldEntities.filter(item => item !== entity);
 
-      // Clean up store value if preserve
+      // Clean up store value if not preserve
       const mergedPreserve = preserve !== undefined ? preserve : this.preserve;
-      if (mergedPreserve === false && !isListField) {
+
+      if (mergedPreserve === false && (!isListField || subNamePath.length > 1)) {
         const namePath = entity.getNamePath();
-        const defaultValue = getValue(this.initialValues, namePath);
+
+        const defaultValue = isListField ? undefined : getValue(this.initialValues, namePath);
 
         if (
           namePath.length &&
@@ -554,7 +556,7 @@ export class FormStore {
               !matchNamePath(field.getNamePath(), namePath),
           )
         ) {
-          this.store = setValue(this.store, namePath, defaultValue);
+          this.store = setValue(this.store, namePath, defaultValue, true);
         }
       }
     };
diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts
@@ -19,8 +19,13 @@ export function getValue(store: Store, namePath: InternalNamePath) {
   return value;
 }
 
-export function setValue(store: Store, namePath: InternalNamePath, value: StoreValue): Store {
-  const newStore = set(store, namePath, value);
+export function setValue(
+  store: Store,
+  namePath: InternalNamePath,
+  value: StoreValue,
+  removeIfUndefined = false,
+): Store {
+  const newStore = set(store, namePath, value, removeIfUndefined);
   return newStore;
 }
 
diff --git a/tests/preserve.test.tsx b/tests/preserve.test.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Form, { FormInstance } from '../src';
-import InfoField from './common/InfoField';
+import InfoField, { Input } from './common/InfoField';
 import timeout from './common/timeout';
 
 describe('Form.Preserve', () => {
@@ -99,7 +99,7 @@ describe('Form.Preserve', () => {
     expect(onFinish).toHaveBeenCalledWith({ test: 'light' });
   });
 
-  it('form perishable but field !perishable', async () => {
+  it('form preserve but field !preserve', async () => {
     const onFinish = jest.fn();
     const wrapper = mount(
       <Demo removeField={false} onFinish={onFinish} formPreserve={false} fieldPreserve />,
@@ -117,67 +117,173 @@ describe('Form.Preserve', () => {
     await matchTest(false, { keep: 233, remove: 666 });
   });
 
-  it('form perishable should not crash Form.List', async () => {
-    let form: FormInstance;
+  describe('Form.List', () => {
+    it('form preserve should not crash', async () => {
+      let form: FormInstance;
 
-    const wrapper = mount(
-      <Form
-        initialValues={{ list: ['light', 'bamboo', 'little'] }}
-        preserve={false}
-        ref={instance => {
-          form = instance;
-        }}
-      >
-        <Form.List name="list">
-          {(fields, { remove }) => {
-            return (
-              <div>
+      const wrapper = mount(
+        <Form
+          initialValues={{ list: ['light', 'bamboo', 'little'] }}
+          preserve={false}
+          ref={instance => {
+            form = instance;
+          }}
+        >
+          <Form.List name="list">
+            {(fields, { remove }) => {
+              return (
+                <div>
+                  {fields.map(field => (
+                    <Form.Field {...field}>
+                      <input />
+                    </Form.Field>
+                  ))}
+                  <button
+                    type="button"
+                    onClick={() => {
+                      remove(0);
+                    }}
+                  />
+                </div>
+              );
+            }}
+          </Form.List>
+        </Form>,
+      );
+
+      wrapper.find('button').simulate('click');
+      wrapper.update();
+
+      expect(form.getFieldsValue()).toEqual({ list: ['bamboo', 'little'] });
+    });
+
+    it('warning when Form.List use preserve', () => {
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      let form: FormInstance;
+
+      const wrapper = mount(
+        <Form
+          ref={instance => {
+            form = instance;
+          }}
+          initialValues={{ list: ['bamboo'] }}
+        >
+          <Form.List name="list">
+            {(fields, { remove }) => (
+              <>
                 {fields.map(field => (
-                  <Form.Field {...field}>
+                  <Form.Field {...field} preserve={false}>
                     <input />
                   </Form.Field>
                 ))}
                 <button
-                  type="button"
                   onClick={() => {
                     remove(0);
                   }}
-                />
-              </div>
-            );
+                >
+                  Remove
+                </button>
+              </>
+            )}
+          </Form.List>
+        </Form>,
+      );
+
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: `preserve` should not apply on Form.List fields.',
+      );
+
+      errorSpy.mockRestore();
+
+      // Remove should not work
+      wrapper.find('button').simulate('click');
+      expect(form.getFieldsValue()).toEqual({ list: [] });
+    });
+
+    it('multiple level field can use preserve', async () => {
+      let form: FormInstance;
+
+      const wrapper = mount(
+        <Form
+          initialValues={{ list: [{ type: 'light' }] }}
+          preserve={false}
+          ref={instance => {
+            form = instance;
           }}
-        </Form.List>
-      </Form>,
-    );
+        >
+          <Form.List name="list">
+            {(fields, { remove }) => {
+              return (
+                <>
+                  {fields.map(field => (
+                    <div key={field.key}>
+                      <Form.Field {...field} name={[field.name, 'type']}>
+                        <Input />
+                      </Form.Field>
+                      <Form.Field shouldUpdate>
+                        {(_, __, { getFieldValue }) =>
+                          getFieldValue(['list', field.name, 'type']) === 'light' ? (
+                            <Form.Field
+                              {...field}
+                              key="light"
+                              preserve={false}
+                              name={[field.name, 'light']}
+                            >
+                              <Input />
+                            </Form.Field>
+                          ) : (
+                            <Form.Field
+                              {...field}
+                              key="bamboo"
+                              preserve={false}
+                              name={[field.name, 'bamboo']}
+                            >
+                              <Input />
+                            </Form.Field>
+                          )
+                        }
+                      </Form.Field>
+                    </div>
+                  ))}
+                  <button
+                    onClick={() => {
+                      remove(0);
+                    }}
+                  >
+                    Remove
+                  </button>
+                </>
+              );
+            }}
+          </Form.List>
+        </Form>,
+      );
 
-    wrapper.find('button').simulate('click');
-    wrapper.update();
+      // Change light value
+      wrapper
+        .find('input')
+        .last()
+        .simulate('change', { target: { value: '1128' } });
 
-    expect(form.getFieldsValue()).toEqual({ list: ['bamboo', 'little'] });
-  });
+      // Change type
+      wrapper
+        .find('input')
+        .first()
+        .simulate('change', { target: { value: 'bamboo' } });
 
-  it('warning when Form.List use preserve', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
-    mount(
-      <Form initialValues={{ list: ['bamboo'] }}>
-        <Form.List name="list">
-          {fields =>
-            fields.map(field => (
-              <Form.Field {...field} preserve={false}>
-                <input />
-              </Form.Field>
-            ))
-          }
-        </Form.List>
-      </Form>,
-    );
+      // Change bamboo value
+      wrapper
+        .find('input')
+        .last()
+        .simulate('change', { target: { value: '903' } });
 
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: `preserve` should not apply on Form.List fields.',
-    );
+      expect(form.getFieldsValue()).toEqual({ list: [{ type: 'bamboo', bamboo: '903' }] });
 
-    errorSpy.mockRestore();
+      // ============== Remove Test ==============
+      // Remove field
+      wrapper.find('button').simulate('click');
+      expect(form.getFieldsValue()).toEqual({ list: [] });
+    });
   });
 
   it('nest render props should not clean full store', () => {

Original file line number	Diff line number	Diff line change
`@@ -19,8 +19,13 @@ export function getValue(store: Store, namePath: InternalNamePath) {`
`19`	`19`	`return value;`
`20`	`20`	`}`
`21`	`21`
`22`		`-export function setValue(store: Store, namePath: InternalNamePath, value: StoreValue): Store {`
`23`		`- const newStore = set(store, namePath, value);`
	`22`	`+export function setValue(`
	`23`	`+ store: Store,`
	`24`	`+ namePath: InternalNamePath,`
	`25`	`+ value: StoreValue,`
	`26`	`+ removeIfUndefined = false,`
	`27`	`+): Store {`
	`28`	`+ const newStore = set(store, namePath, value, removeIfUndefined);`
`24`	`29`	`return newStore;`
`25`	`30`	`}`
`26`	`31`