feat: Support submit & onFormFinish (#21)

* context support onFinish

* add test case

* update doc

Author: zombieJ

README.md

@@ -130,6 +130,7 @@ class Demo extends React.Component {
 | resetFields       | Reset fields status                        | (fields?: [NamePath](#namepath)[]) => void                                 |
 | setFields         | Set fields status                          | (fields: FieldData[]) => void                                              |
 | setFieldsValue    | Set fields value                           | (values) => void                                                           |
+| submit            | Trigger form submit                        | () => void                                                                 |
 | validateFields    | Trigger fields to validate                 | (nameList?: [NamePath](#namepath)[], options?: ValidateOptions) => Promise |
 
 ## FormProvider
@@ -138,6 +139,7 @@ class Demo extends React.Component {
 | ---------------- | ----------------------------------------- | ---------------------------------------- | ------- |
 | validateMessages | Config global `validateMessages` template | [ValidateMessages](#validatemessages)    | -       |
 | onFormChange     | Trigger by named form fields change       | (name, { changedFields, forms }) => void | -       |
+| onFormFinish     | Trigger by named form fields finish       | (name, { values, forms }) => void        | -       |
 
 ## Interface
 

examples/StateForm-context.tsx

@@ -40,7 +40,7 @@ const Form2 = () => {
   return (
     <Form form={form} style={{ ...formStyle, border: '1px solid #F00' }} name="second">
       <h4>Form 2</h4>
-      <p>Will follow Form 1 but not sync back</p>
+      <p>Will follow Form 1 but sync back only when submit</p>
       <LabelField name="username" rules={[{ required: true }]}>
         <Input placeholder="username" />
       </LabelField>
@@ -66,6 +66,12 @@ const Demo = () => {
             forms.second.setFields(changedFields);
           }
         }}
+        onFormFinish={(name, { values, forms }) => {
+          console.log('finish from:', name, values, forms);
+          if (name === 'second') {
+            forms.first.setFieldsValue(values);
+          }
+        }}
       >
         <div style={{ display: 'flex', width: '100%' }}>
           <Form1 />

src/FieldContext.ts

@@ -22,6 +22,7 @@ const Context = React.createContext<InternalFormInstance>({
   setFields: warningFunc,
   setFieldsValue: warningFunc,
   validateFields: warningFunc,
+  submit: warningFunc,
 
   getInternalHooks: () => {
     warningFunc();

src/Form.tsx

@@ -27,7 +27,7 @@ export interface FormProps extends BaseFormProps {
   validateMessages?: ValidateMessages;
   onValuesChange?: Callbacks['onValuesChange'];
   onFieldsChange?: Callbacks['onFieldsChange'];
-  onFinish?: (values: Store) => void;
+  onFinish?: Callbacks['onFinish'];
 }
 
 const Form: React.FunctionComponent<FormProps> = (
@@ -83,6 +83,13 @@ const Form: React.FunctionComponent<FormProps> = (
         onFieldsChange(changedFields, ...rest);
       }
     },
+    onFinish: (values: Store) => {
+      formContext.triggerFormFinish(name, values);
+
+      if (onFinish) {
+        onFinish(values);
+      }
+    },
   });
 
   // Set initial value, init store value when first mount
@@ -125,19 +132,11 @@ const Form: React.FunctionComponent<FormProps> = (
   return (
     <Component
       {...restProps}
-      onSubmit={event => {
+      onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         event.stopPropagation();
 
-        formInstance
-          .validateFields()
-          .then(values => {
-            if (onFinish) {
-              onFinish(values);
-            }
-          })
-          // Do nothing about submit catch
-          .catch(e => e);
+        formInstance.submit();
       }}
     >
       {wrapperNode}

src/FormContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ValidateMessages, FormInstance, FieldData } from './interface';
+import { ValidateMessages, FormInstance, FieldData, Store } from './interface';
 
 interface Forms {
   [name: string]: FormInstance;
@@ -10,26 +10,35 @@ interface FormChangeInfo {
   forms: Forms;
 }
 
+interface FormFinishInfo {
+  values: Store;
+  forms: Forms;
+}
+
 export interface FormProviderProps {
   validateMessages?: ValidateMessages;
   onFormChange?: (name: string, info: FormChangeInfo) => void;
+  onFormFinish?: (name: string, info: FormFinishInfo) => void;
 }
 
 export interface FormContextProps extends FormProviderProps {
   triggerFormChange: (name: string, changedFields: FieldData[]) => void;
+  triggerFormFinish: (name: string, values: Store) => void;
   registerForm: (name: string, form: FormInstance) => void;
   unregisterForm: (name: string) => void;
 }
 
 const FormContext = React.createContext<FormContextProps>({
   triggerFormChange: () => {},
+  triggerFormFinish: () => {},
   registerForm: () => {},
   unregisterForm: () => {},
 });
 
 const FormProvider: React.FunctionComponent<FormProviderProps> = ({
   validateMessages,
   onFormChange,
+  onFormFinish,
   children,
 }) => {
   const formContext = React.useContext(FormContext);
@@ -55,6 +64,16 @@ const FormProvider: React.FunctionComponent<FormProviderProps> = ({
 
           formContext.triggerFormChange(name, changedFields);
         },
+        triggerFormFinish: (name, values) => {
+          if (onFormFinish) {
+            onFormFinish(name, {
+              values,
+              forms: formsRef.current,
+            });
+          }
+
+          formContext.triggerFormFinish(name, values);
+        },
         registerForm: (name, form) => {
           if (name) {
             formsRef.current = {

src/interface.ts

@@ -138,6 +138,7 @@ export type NotifyInfo =
 export interface Callbacks {
   onValuesChange?: (changedValues: Store, values: Store) => void;
   onFieldsChange?: (changedFields: FieldData[], allFields: FieldData[]) => void;
+  onFinish?: (values: Store) => void;
 }
 
 export interface InternalHooks {
@@ -165,6 +166,9 @@ export interface FormInstance {
   setFields: (fields: FieldData[]) => void;
   setFieldsValue: (value: Store) => void;
   validateFields: ValidateFields;
+
+  // New API
+  submit: () => void;
 }
 
 export type InternalFormInstance = Omit<FormInstance, 'validateFields'> & {

src/useForm.ts

@@ -79,6 +79,7 @@ export class FormStore {
     setFields: this.setFields,
     setFieldsValue: this.setFieldsValue,
     validateFields: this.validateFields,
+    submit: this.submit,
 
     getInternalHooks: this.getInternalHooks,
   });
@@ -503,6 +504,19 @@ export class FormStore {
 
     return returnPromise as Promise<Store>;
   };
+
+  // ============================ Submit ============================
+  private submit = () => {
+    this.validateFields()
+      .then(values => {
+        const { onFinish } = this.callbacks;
+        if (onFinish) {
+          onFinish(values);
+        }
+      })
+      // Do nothing about submit catch
+      .catch(e => e);
+  };
 }
 
 function useForm(form?: FormInstance): [FormInstance] {

tests/context.test.js

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import Form, { FormProvider } from '../src';
 import InfoField from './common/InfoField';
 import { changeValue, matchError, getField } from './common';
+import timeout from './common/timeout';
 
 describe('Form.Context', () => {
   it('validateMessages', async () => {
@@ -95,6 +96,42 @@ describe('Form.Context', () => {
     });
   });
 
+  it('submit', async () => {
+    const onFormFinish = jest.fn();
+    let form1;
+
+    const wrapper = mount(
+      <div>
+        <FormProvider onFormFinish={onFormFinish}>
+          <Form
+            name="form1"
+            ref={instance => {
+              form1 = instance;
+            }}
+          >
+            <InfoField name="name" rules={[{ required: true }]} />
+          </Form>
+          <Form name="form2" />
+        </FormProvider>
+      </div>,
+    );
+
+    await changeValue(getField(wrapper), '');
+    form1.submit();
+    await timeout();
+    expect(onFormFinish).not.toHaveBeenCalled();
+
+    await changeValue(getField(wrapper), 'Light');
+    form1.submit();
+    await timeout();
+    expect(onFormFinish).toHaveBeenCalled();
+
+    expect(onFormFinish.mock.calls[0][0]).toEqual('form1');
+    const info = onFormFinish.mock.calls[0][1];
+    expect(info.values).toEqual({ name: 'Light' });
+    expect(Object.keys(info.forms).sort()).toEqual(['form1', 'form2'].sort());
+  });
+
   it('do nothing if no Provider in use', () => {
     const wrapper = mount(
       <div>