Merge branch 'master' of https://github.com/react-component/field-form

Author: zombieJ

docs/examples/validate-perf.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable react/prop-types */
+/* eslint-disable react/prop-types, @typescript-eslint/consistent-type-imports */
 
 import React from 'react';
 import Form, { Field, FormInstance } from 'rc-field-form';
@@ -34,7 +34,7 @@ export default class Demo extends React.Component {
     console.log('Failed:', errorInfo);
   };
 
-  public onPasswordError = (errors: string[]) => {
+  public onPasswordError = ({ errors }: { errors: string[] }) => {
     console.log('🐞 Password Error:', errors);
   };
 
@@ -64,12 +64,13 @@ export default class Demo extends React.Component {
                 },
               },
             ]}
-            onError={this.onPasswordError}
+            onMetaChange={this.onPasswordError}
           >
             <Input placeholder="password" />
           </LabelField>
 
           <LabelField
+            initialValue="123"
             name="password2"
             dependencies={['password']}
             messageVariables={{ displayName: '密码2' }}

src/Field.tsx

@@ -126,7 +126,11 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
    */
   private touched: boolean = false;
 
-  /** Mark when touched & validated. Currently only used for `dependencies` */
+  /**
+   * Mark when touched & validated. Currently only used for `dependencies`.
+   * Note that we do not think field with `initialValue` is dirty
+   * but this will be by `isFieldDirty` func.
+   */
   private dirty: boolean = false;
 
   private validatePromise: Promise<string[]> | null = null;
@@ -418,7 +422,21 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
 
   public isFieldTouched = () => this.touched;
 
-  public isFieldDirty = () => this.dirty;
+  public isFieldDirty = () => {
+    // Touched or validate or has initialValue
+    if (this.dirty || this.props.initialValue !== undefined) {
+      return true;
+    }
+
+    // Form set initialValue
+    const { fieldContext } = this.props;
+    const { getInitialValue } = fieldContext.getInternalHooks(HOOK_MARK);
+    if (getInitialValue(this.getNamePath()) !== undefined) {
+      return true;
+    }
+
+    return false;
+  };
 
   public getErrors = () => this.errors;
 

src/FieldContext.ts

@@ -38,6 +38,7 @@ const Context = React.createContext<InternalFormInstance>({
       getFields: warningFunc,
       setValidateMessages: warningFunc,
       setPreserve: warningFunc,
+      getInitialValue: warningFunc,
     };
   },
 });

src/interface.ts

@@ -198,6 +198,7 @@ export interface InternalHooks {
   getFields: (namePathList?: InternalNamePath[]) => FieldData[];
   setValidateMessages: (validateMessages: ValidateMessages) => void;
   setPreserve: (preserve?: boolean) => void;
+  getInitialValue: (namePath: InternalNamePath) => StoreValue;
 }
 
 /** Only return partial when type is not any */

src/useForm.ts

@@ -111,6 +111,7 @@ export class FormStore {
         setValidateMessages: this.setValidateMessages,
         getFields: this.getFields,
         setPreserve: this.setPreserve,
+        getInitialValue: this.getInitialValue,
       };
     }
 

tests/dependencies.test.js

@@ -32,6 +32,41 @@ describe('Form.Dependencies', () => {
     matchError(getField(wrapper, 1), true);
   });
 
+  describe('initialValue', () => {
+    function test(name, formProps, fieldProps) {
+      it(name, async () => {
+        let validated = false;
+
+        const wrapper = mount(
+          <div>
+            <Form {...formProps}>
+              <InfoField name="field_1" />
+              <InfoField
+                name="field_2"
+                rules={[
+                  {
+                    validator: async () => {
+                      validated = true;
+                    },
+                  },
+                ]}
+                dependencies={['field_1']}
+                {...fieldProps}
+              />
+            </Form>
+          </div>,
+        );
+
+        // Not trigger if not touched
+        await changeValue(getField(wrapper, 0), '');
+        expect(validated).toBeTruthy();
+      });
+    }
+
+    test('form level', { initialValues: { field_2: 'bamboo' } });
+    test('field level', null, { initialValue: 'little' });
+  });
+
   it('nest dependencies', async () => {
     let form = null;
     let rendered = false;