feat: Form support validateTrigger (#130)

* feat: Form support validateTrigger

* test case

* back of test case

Author: zombieJ

src/Field.tsx

@@ -83,15 +83,17 @@ export interface FieldState {
 }
 
 // We use Class instead of Hooks here since it will cost much code by using Hooks.
-class Field extends React.Component<InternalFieldProps, FieldState> implements FieldEntity {
+class Field extends React.Component<InternalFieldProps, FieldState, InternalFormInstance>
+  implements FieldEntity {
   public static contextType = FieldContext;
 
   public static defaultProps = {
     trigger: 'onChange',
-    validateTrigger: 'onChange',
     valuePropName: 'value',
   };
 
+  context: InternalFormInstance;
+
   public state = {
     resetCount: 0,
   };
@@ -391,6 +393,10 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
       valuePropName,
       getValueProps,
     } = this.props;
+
+    const mergedValidateTrigger =
+      validateTrigger !== undefined ? validateTrigger : this.context.validateTrigger;
+
     const namePath = this.getNamePath();
     const { getInternalHooks, getFieldsValue }: InternalFormInstance = this.context;
     const { dispatch } = getInternalHooks(HOOK_MARK);
@@ -434,7 +440,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     };
 
     // Add validateTrigger
-    const validateTriggerList: string[] = toArray(validateTrigger || []);
+    const validateTriggerList: string[] = toArray(mergedValidateTrigger || []);
 
     validateTriggerList.forEach((triggerName: string) => {
       // Wrap additional function of component, so that we can get latest value from store

src/Form.tsx

@@ -29,6 +29,7 @@ export interface FormProps extends BaseFormProps {
   onFieldsChange?: Callbacks['onFieldsChange'];
   onFinish?: Callbacks['onFinish'];
   onFinishFailed?: Callbacks['onFinishFailed'];
+  validateTrigger?: string | string[] | false;
 }
 
 const Form: React.ForwardRefRenderFunction<FormInstance, FormProps> = (
@@ -40,6 +41,7 @@ const Form: React.ForwardRefRenderFunction<FormInstance, FormProps> = (
     children,
     component: Component = 'form',
     validateMessages,
+    validateTrigger = 'onChange',
     onValuesChange,
     onFieldsChange,
     onFinish,
@@ -122,10 +124,16 @@ const Form: React.ForwardRefRenderFunction<FormInstance, FormProps> = (
     prevFieldsRef.current = fields;
   }, [fields, formInstance]);
 
+  const formContextValue = React.useMemo(
+    () => ({
+      ...(formInstance as InternalFormInstance),
+      validateTrigger,
+    }),
+    [formInstance, validateTrigger],
+  );
+
   const wrapperNode = (
-    <FieldContext.Provider value={formInstance as InternalFormInstance}>
-      {childrenNode}
-    </FieldContext.Provider>
+    <FieldContext.Provider value={formContextValue}>{childrenNode}</FieldContext.Provider>
   );
 
   if (Component === false) {

src/interface.ts

@@ -184,6 +184,8 @@ export type InternalFormInstance = Omit<FormInstance, 'validateFields'> & {
    */
   prefixName?: InternalNamePath;
 
+  validateTrigger?: string | string[] | false;
+
   /**
    * Form component should register some content into store.
    * We pass the `HOOK_MARK` as key to avoid user call the function.

tests/validate.test.js

@@ -250,40 +250,63 @@ describe('Form.Validate', () => {
       await timeout();
       expect(form.getFieldError('test')).toEqual(["'test' is required"]);
     });
-  });
 
-  it('change validateTrigger', async () => {
-    let form;
+    it('change validateTrigger', async () => {
+      let form;
 
-    const Test = ({ init = false }) => (
-      <Form
-        ref={instance => {
-          form = instance;
-        }}
-      >
-        <Field
-          name="title"
-          validateTrigger={init ? 'onChange' : 'onBlur'}
-          rules={[
-            { required: true, message: 'Title is required' },
-            { min: 3, message: 'Title should be 3+ characters' },
-          ]}
+      const Test = ({ init = false }) => (
+        <Form
+          ref={instance => {
+            form = instance;
+          }}
         >
-          <Input />
-        </Field>
-      </Form>
-    );
+          <Field
+            name="title"
+            validateTrigger={init ? 'onChange' : 'onBlur'}
+            rules={[
+              { required: true, message: 'Title is required' },
+              { min: 3, message: 'Title should be 3+ characters' },
+            ]}
+          >
+            <Input />
+          </Field>
+        </Form>
+      );
 
-    const wrapper = mount(<Test />);
+      const wrapper = mount(<Test />);
 
-    getField(wrapper).simulate('blur');
-    await timeout();
-    expect(form.getFieldError('title')).toEqual(['Title is required']);
+      getField(wrapper).simulate('blur');
+      await timeout();
+      expect(form.getFieldError('title')).toEqual(['Title is required']);
 
-    wrapper.setProps({ init: true });
-    await changeValue(getField(wrapper), '1');
-    expect(form.getFieldValue('title')).toBe('1');
-    expect(form.getFieldError('title')).toEqual(['Title should be 3+ characters']);
+      wrapper.setProps({ init: true });
+      await changeValue(getField(wrapper), '1');
+      expect(form.getFieldValue('title')).toBe('1');
+      expect(form.getFieldError('title')).toEqual(['Title should be 3+ characters']);
+    });
+
+    it('form context', async () => {
+      const wrapper = mount(
+        <Form validateTrigger="onBlur">
+          <InfoField name="test" rules={[{ required: true }]} />
+        </Form>,
+      );
+
+      // Not trigger validate since Form set `onBlur`
+      await changeValue(getField(wrapper), '');
+      matchError(wrapper, false);
+
+      // Trigger onBlur
+      wrapper.find('input').simulate('blur');
+      await timeout();
+      wrapper.update();
+      matchError(wrapper, true);
+
+      // Update Form context
+      wrapper.setProps({ validateTrigger: 'onChange' });
+      await changeValue(getField(wrapper), '1');
+      matchError(wrapper, false);
+    });
   });
 
   describe('validate only accept exist fields', () => {