feat: Form context nest support

Author: zombieJ

src/Form.tsx

@@ -62,11 +62,12 @@ const Form: React.FunctionComponent<FormProps> = (
   React.useImperativeHandle(ref, () => formInstance);
 
   // Register form into Context
-  React.useEffect(() => formContext.registerForm(name, formInstance), [
-    formContext,
-    formInstance,
-    name,
-  ]);
+  React.useEffect(() => {
+    formContext.registerForm(name, formInstance);
+    return () => {
+      formContext.unregisterForm(name);
+    };
+  }, [formContext, formInstance, name]);
 
   // Pass props to store
   setValidateMessages({

src/FormContext.tsx

@@ -17,12 +17,14 @@ export interface FormProviderProps {
 
 export interface FormContextProps extends FormProviderProps {
   triggerFormChange: (name: string, changedFields: FieldData[]) => void;
-  registerForm: (name: string, form: FormInstance) => () => void;
+  registerForm: (name: string, form: FormInstance) => void;
+  unregisterForm: (name: string) => void;
 }
 
 const FormContext = React.createContext<FormContextProps>({
   triggerFormChange: () => {},
-  registerForm: () => () => {},
+  registerForm: () => {},
+  unregisterForm: () => {},
 });
 
 const FormProvider: React.FunctionComponent<FormProviderProps> = ({
@@ -38,7 +40,7 @@ const FormProvider: React.FunctionComponent<FormProviderProps> = ({
     <FormContext.Provider
       value={{
         ...formContext,
-        validateMessages,
+        validateMessages: { ...formContext.validateMessages, ...validateMessages },
 
         // =========================================================
         // =                  Global Form Control                  =
@@ -50,6 +52,8 @@ const FormProvider: React.FunctionComponent<FormProviderProps> = ({
               forms: formsRef.current,
             });
           }
+
+          formContext.triggerFormChange(name, changedFields);
         },
         registerForm: (name, form) => {
           if (name) {
@@ -59,11 +63,14 @@ const FormProvider: React.FunctionComponent<FormProviderProps> = ({
             };
           }
 
-          return () => {
-            const newForms = { ...formsRef.current };
-            delete newForms[name];
-            formsRef.current = newForms;
-          };
+          formContext.registerForm(name, form);
+        },
+        unregisterForm: name => {
+          const newForms = { ...formsRef.current };
+          delete newForms[name];
+          formsRef.current = newForms;
+
+          formContext.unregisterForm(name);
         },
       }}
     >

tests/context.test.js

@@ -43,26 +43,56 @@ describe('Form.Context', () => {
     );
   });
 
-  it('adjust sub form', async () => {
-    const onFormChange = jest.fn();
+  describe('adjust sub form', () => {
+    it('basic', async () => {
+      const onFormChange = jest.fn();
 
-    const wrapper = mount(
-      <FormProvider onFormChange={onFormChange}>
-        <Form name="form1" />
-      </FormProvider>,
-    );
+      const wrapper = mount(
+        <FormProvider onFormChange={onFormChange}>
+          <Form name="form1" />
+        </FormProvider>,
+      );
 
-    wrapper.setProps({
-      children: (
-        <Form name="form2">
-          <InfoField name="test" />
-        </Form>
-      ),
+      wrapper.setProps({
+        children: (
+          <Form name="form2">
+            <InfoField name="test" />
+          </Form>
+        ),
+      });
+
+      await changeValue(getField(wrapper), 'Bamboo');
+      const { forms } = onFormChange.mock.calls[0][1];
+      expect(Object.keys(forms)).toEqual(['form2']);
     });
 
-    await changeValue(getField(wrapper), 'Bamboo');
-    const { forms } = onFormChange.mock.calls[0][1];
-    expect(Object.keys(forms)).toEqual(['form2']);
+    it('multiple context', async () => {
+      const onFormChange = jest.fn();
+
+      const Demo = changed => (
+        <FormProvider onFormChange={onFormChange}>
+          <FormProvider>
+            {!changed ? (
+              <Form name="form1" />
+            ) : (
+              <Form name="form2">
+                <InfoField name="test" />
+              </Form>
+            )}
+          </FormProvider>
+        </FormProvider>
+      );
+
+      const wrapper = mount(<Demo />);
+
+      wrapper.setProps({
+        changed: true,
+      });
+
+      await changeValue(getField(wrapper), 'Bamboo');
+      const { forms } = onFormChange.mock.calls[0][1];
+      expect(Object.keys(forms)).toEqual(['form2']);
+    });
   });
 
   it('do nothing if no Provider in use', () => {