feat: support clearOnDestroy (#692)

* feat: form destory reset stroe

* feat: test

* feat: clearStoreOnDestroy

* feat: clearStoreOnDestroy

* feat: clearStoreOnDestroy

* feat: add test

* feat: clearOnDestroy

* feat: 移除依赖

* feat: add test

* feat: add test

* feat: test

* feat: test

* test: fill more test

* chore: fix miss type

* refactor: skip if no need

---------

Co-authored-by: 二货机器人 <[email protected]>

Author: crazyair

docs/demo/clearOnDestroy.md

@@ -0,0 +1,3 @@
+## clearOnDestroy
+
+<code src="../examples/clearOnDestroy.tsx"></code>

docs/examples/clearOnDestroy.tsx

@@ -0,0 +1,39 @@
+import Form, { Field } from 'rc-field-form';
+import React, { useState } from 'react';
+import Input from './components/Input';
+
+export default () => {
+  const [load, setLoad] = useState(false);
+  const [count, setCount] = useState(0);
+
+  const [form] = Form.useForm(undefined);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setCount(c => c + 1);
+          setLoad(c => !c);
+        }}
+      >
+        load
+      </button>
+
+      <button
+        onClick={() => {
+          console.log(form.getFieldsValue(true));
+        }}
+      >
+        values
+      </button>
+      {load && (
+        <Form form={form} initialValues={{ count }} clearOnDestroy>
+          <Field name="count">
+            <Input placeholder="count" />
+          </Field>
+          <button type="submit">Submit</button>
+        </Form>
+      )}
+    </>
+  );
+};

src/Form.tsx

@@ -33,6 +33,7 @@ export interface FormProps<Values = any> extends BaseFormProps {
   onFinishFailed?: Callbacks<Values>['onFinishFailed'];
   validateTrigger?: string | string[] | false;
   preserve?: boolean;
+  clearOnDestroy?: boolean;
 }
 
 const Form: React.ForwardRefRenderFunction<FormInstance, FormProps> = (
@@ -50,6 +51,7 @@ const Form: React.ForwardRefRenderFunction<FormInstance, FormProps> = (
     onFieldsChange,
     onFinish,
     onFinishFailed,
+    clearOnDestroy,
     ...restProps
   }: FormProps,
   ref,
@@ -112,7 +114,7 @@ const Form: React.ForwardRefRenderFunction<FormInstance, FormProps> = (
   }
 
   React.useEffect(
-    () => destroyForm,
+    () => () => destroyForm(clearOnDestroy),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );

src/interface.ts

@@ -225,7 +225,7 @@ export interface InternalHooks {
   registerField: (entity: FieldEntity) => () => void;
   useSubscribe: (subscribable: boolean) => void;
   setInitialValues: (values: Store, init: boolean) => void;
-  destroyForm: () => void;
+  destroyForm: (clearOnDestroy?: boolean) => void;
   setCallbacks: (callbacks: Callbacks) => void;
   registerWatch: (callback: WatchCallBack) => () => void;
   getFields: (namePathList?: InternalNamePath[]) => FieldData[];
@@ -240,8 +240,8 @@ type RecursivePartial<T> = NonNullable<T> extends object
       [P in keyof T]?: NonNullable<T[P]> extends (infer U)[]
         ? RecursivePartial<U>[]
         : NonNullable<T[P]> extends object
-        ? RecursivePartial<T[P]>
-        : T[P];
+          ? RecursivePartial<T[P]>
+          : T[P];
     }
   : T;
 

src/useForm.ts

@@ -156,15 +156,20 @@ export class FormStore {
     }
   };
 
-  private destroyForm = () => {
-    const prevWithoutPreserves = new NameMap<boolean>();
-    this.getFieldEntities(true).forEach(entity => {
-      if (!this.isMergedPreserve(entity.isPreserve())) {
-        prevWithoutPreserves.set(entity.getNamePath(), true);
-      }
-    });
-
-    this.prevWithoutPreserves = prevWithoutPreserves;
+  private destroyForm = (clearOnDestroy?: boolean) => {
+    if (clearOnDestroy) {
+      // destroy form reset store
+      this.updateStore({});
+    } else {
+      // Fill preserve fields
+      const prevWithoutPreserves = new NameMap<boolean>();
+      this.getFieldEntities(true).forEach(entity => {
+        if (!this.isMergedPreserve(entity.isPreserve())) {
+          prevWithoutPreserves.set(entity.getNamePath(), true);
+        }
+      });
+      this.prevWithoutPreserves = prevWithoutPreserves;
+    }
   };
 
   private getInitialValue = (namePath: InternalNamePath) => {

tests/clearOnDestroy.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render } from '@testing-library/react';
+import React, { useState } from 'react';
+import Form, { Field, type FormInstance } from '../src';
+import { changeValue, getInput } from './common';
+import { Input } from './common/InfoField';
+
+describe('Form.clearOnDestroy', () => {
+  it('works', async () => {
+    let formCache: FormInstance | undefined;
+    const Demo = ({ load }: { load?: boolean }) => {
+      const [form] = Form.useForm();
+      formCache = form;
+
+      return (
+        <>
+          {load && (
+            <Form form={form} initialValues={{ count: '1' }} clearOnDestroy>
+              <Field name="count">
+                <Input />
+              </Field>
+            </Form>
+          )}
+        </>
+      );
+    };
+    const { rerender } = render(<Demo load />);
+    expect(formCache.getFieldsValue(true)).toEqual({ count: '1' });
+    rerender(<Demo />);
+    expect(formCache.getFieldsValue(true)).toEqual({});
+
+    // Rerender back should filled again
+    rerender(<Demo load />);
+    expect(formCache.getFieldsValue(true)).toEqual({ count: '1' });
+  });
+
+  it('change value', async () => {
+    let formCache: FormInstance | undefined;
+    const Demo = () => {
+      const [load, setLoad] = useState(true);
+
+      const [form] = Form.useForm();
+      formCache = form;
+
+      return (
+        <>
+          <button onClick={() => setLoad(c => !c)}>load</button>
+          {load && (
+            <Form form={form} clearOnDestroy>
+              <Field name="count">
+                <Input />
+              </Field>
+            </Form>
+          )}
+        </>
+      );
+    };
+    const { container, queryByText } = render(<Demo />);
+    await changeValue(getInput(container), 'bamboo');
+    expect(formCache.getFieldsValue(true)).toEqual({ count: 'bamboo' });
+    fireEvent.click(queryByText('load'));
+    expect(formCache.getFieldsValue(true)).toEqual({});
+    formCache.setFields([{ name: 'count', value: '1' }]);
+    expect(formCache.getFieldsValue(true)).toEqual({ count: '1' });
+  });
+});