fix shouldUpdate logic

Author: zombieJ

examples/StateForm-validate-perf.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react';
-import Form, { FormInstance } from '../src/';
+import Form, { Field, FormInstance } from '../src/';
 import Input from './components/Input';
 import LabelField from './components/LabelField';
 import { ValidateMessages } from '../src/interface';
@@ -78,7 +78,19 @@ export default class Demo extends React.Component {
             <Input />
           </LabelField>
 
-          <button type="submit">Submit</button>
+          <Field shouldUpdate>
+            {(_, __, { getFieldsError, isFieldsTouched }) => {
+              const isAllTouched = isFieldsTouched(true);
+              const hasErrors = !!getFieldsError().filter(({ errors }) => errors.length).length;
+
+              return (
+                <button type="submit" disabled={!isAllTouched || hasErrors}>
+                  Submit
+                </button>
+              );
+            }}
+          </Field>
+
           <button
             type="button"
             onClick={() => {

src/Field.tsx

@@ -172,6 +172,7 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
           this.validatePromise = null;
 
           this.refresh();
+          return;
         }
         break;
 
@@ -186,6 +187,7 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
           }
 
           this.refresh();
+          return;
         }
         break;
       }
@@ -196,6 +198,7 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
 
         if (this.prevValidating !== validating || !isSimilar(this.prevErrors, errors)) {
           this.reRender();
+          return;
         }
         break;
       }
@@ -210,6 +213,7 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
           dependencyList.some(dependency => containsNamePath(info.relatedFields, dependency))
         ) {
           this.reRender();
+          return;
         }
         break;
       }
@@ -226,15 +230,19 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
           dependencies.some(dependency =>
             containsNamePath(namePathList, getNamePath(dependency)),
           ) ||
-          shouldUpdate === true ||
           (typeof shouldUpdate === 'function'
             ? shouldUpdate(prevStore, values, info)
             : prevValue !== curValue)
         ) {
           this.reRender();
+          return;
         }
         break;
     }
+
+    if (shouldUpdate === true) {
+      this.reRender();
+    }
   };
 
   public isFieldTouched = () => this.touched;

src/interface.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { ReducerAction } from './useForm';
 
 export type InternalNamePath = (string | number)[];
@@ -50,7 +51,7 @@ interface BaseRule {
   enum?: StoreValue[];
   len?: number;
   max?: number;
-  message?: string;
+  message?: string | ReactElement;
   min?: number;
   pattern?: RegExp;
   required?: boolean;
@@ -142,17 +143,14 @@ export interface InternalHooks {
   setValidateMessages: (validateMessages: ValidateMessages) => void;
 }
 
-export type IsFieldsTouched =
-  | ((allFieldsTouched?: boolean) => boolean)
-  | ((nameList: NamePath[], allFieldsTouched?: boolean) => boolean);
-
 export interface FormInstance {
   // Origin Form API
   getFieldValue: (name: NamePath) => StoreValue;
   getFieldsValue: (nameList?: NamePath[]) => Store;
   getFieldError: (name: NamePath) => string[];
   getFieldsError: (nameList?: NamePath[]) => FieldError[];
-  isFieldsTouched: IsFieldsTouched;
+  isFieldsTouched(nameList?: NamePath[], allFieldsTouched?: boolean): boolean;
+  isFieldsTouched(allFieldsTouched?: boolean): boolean;
   isFieldTouched: (name: NamePath) => boolean;
   isFieldValidating: (name: NamePath) => boolean;
   isFieldsValidating: (nameList: NamePath[]) => boolean;

tests/index.test.js

@@ -130,6 +130,39 @@ describe('Basic', () => {
 
     resetTest('with field name', ['username']);
     resetTest('without field name');
+
+    it('not affect others', async () => {
+      let form;
+
+      const wrapper = mount(
+        <div>
+          <Form
+            ref={instance => {
+              form = instance;
+            }}
+          >
+            <Field name="username" rules={[{ required: true }]}>
+              <Input />
+            </Field>
+
+            <Field name="password" rules={[{ required: true }]}>
+              <Input />
+            </Field>
+          </Form>
+        </div>,
+      );
+
+      await changeValue(getField(wrapper, 'username'), 'Bamboo');
+      await changeValue(getField(wrapper, 'password'), '');
+      form.resetFields(['username']);
+
+      expect(form.getFieldValue('username')).toEqual(undefined);
+      expect(form.getFieldError('username')).toEqual([]);
+      expect(form.isFieldTouched('username')).toBeFalsy();
+      expect(form.getFieldValue('password')).toEqual('');
+      expect(form.getFieldError('password')).toEqual(["'password' is required"]);
+      expect(form.isFieldTouched('password')).toBeTruthy();
+    });
   });
 
   describe('initialValues', () => {
@@ -320,28 +353,43 @@ describe('Basic', () => {
     errorSpy.mockRestore();
   });
 
-  it('shouldUpdate return true will update whatever notification updated', async () => {
-    let renderCount = 0;
+  it('shouldUpdate', async () => {
+    let isAllTouched;
+    let hasError;
 
     const wrapper = mount(
       <Form>
-        <Field rules={[{ required: true }]}>
+        <Field name="username" rules={[{ required: true }]}>
+          <Input />
+        </Field>
+        <Field name="password" rules={[{ required: true }]}>
           <Input />
         </Field>
         <Field shouldUpdate>
-          {() => {
-            renderCount += 1;
+          {(_, __, { getFieldsError, isFieldsTouched }) => {
+            isAllTouched = isFieldsTouched(true);
+            hasError = getFieldsError().filter(({ errors }) => errors.length).length;
+
             return null;
           }}
         </Field>
       </Form>,
     );
 
-    const baseRenderCount = renderCount;
-    changeValue(getField(wrapper), '');
-    expect(renderCount).toEqual(baseRenderCount + 1);
+    await changeValue(getField(wrapper, 'username'), '');
+    expect(isAllTouched).toBeFalsy();
+    expect(hasError).toBeTruthy();
 
-    await timeout();
-    expect(renderCount).toEqual(baseRenderCount + 2);
+    await changeValue(getField(wrapper, 'username'), 'Bamboo');
+    expect(isAllTouched).toBeFalsy();
+    expect(hasError).toBeFalsy();
+
+    await changeValue(getField(wrapper, 'password'), 'Light');
+    expect(isAllTouched).toBeTruthy();
+    expect(hasError).toBeFalsy();
+
+    await changeValue(getField(wrapper, 'password'), '');
+    expect(isAllTouched).toBeTruthy();
+    expect(hasError).toBeTruthy();
   });
 });