fix: shouldUpdate should also work on setFields (#69)

* init test case

* fix should update by `setFields`

* update package.json

Author: zombieJ

package.json

@@ -2,6 +2,9 @@
   "name": "rc-field-form",
   "version": "0.0.0-alpha.30",
   "description": "React Form Component",
+  "engines": {
+    "node": ">=8.x"
+  },
   "keywords": [
     "react",
     "react-component",

src/Field.tsx

@@ -26,6 +26,32 @@ import {
   getValue,
 } from './utils/valueUtil';
 
+export type ShouldUpdate =
+  | true
+  | ((
+      prevValues: Store,
+      nextValues: Store,
+      info: { source?: string },
+    ) => boolean);
+
+function requireUpdate(
+  shouldUpdate: ShouldUpdate,
+  prev: StoreValue,
+  next: StoreValue,
+  prevValue: StoreValue,
+  nextValue: StoreValue,
+  info: NotifyInfo,
+): boolean {
+  if (typeof shouldUpdate === 'function') {
+    return shouldUpdate(
+      prev,
+      next,
+      'source' in info ? { source: info.source } : {},
+    );
+  }
+  return prevValue !== nextValue;
+}
+
 interface ChildProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [name: string]: any;
@@ -53,13 +79,7 @@ export interface FieldProps {
     allValues: Store,
   ) => StoreValue;
   rules?: Rule[];
-  shouldUpdate?:
-    | true
-    | ((
-        prevValues: Store,
-        nextValues: Store,
-        info: { source?: string },
-      ) => boolean);
+  shouldUpdate?: ShouldUpdate;
   trigger?: string;
   validateTrigger?: string | string[] | false;
   valuePropName?: string;
@@ -219,6 +239,23 @@ class Field extends React.Component<FieldProps, FieldState>
           this.reRender();
           return;
         }
+
+        // Handle update by `setField` with `shouldUpdate`
+        if (
+          shouldUpdate &&
+          !namePath.length &&
+          requireUpdate(
+            shouldUpdate,
+            prevStore,
+            values,
+            prevValue,
+            curValue,
+            info,
+          )
+        ) {
+          this.reRender();
+          return;
+        }
         break;
       }
 
@@ -251,13 +288,14 @@ class Field extends React.Component<FieldProps, FieldState>
           dependencies.some(dependency =>
             containsNamePath(namePathList, getNamePath(dependency)),
           ) ||
-          (typeof shouldUpdate === 'function'
-            ? shouldUpdate(
-                prevStore,
-                values,
-                'source' in info ? { source: info.source } : {},
-              )
-            : prevValue !== curValue)
+          requireUpdate(
+            shouldUpdate,
+            prevStore,
+            values,
+            prevValue,
+            curValue,
+            info,
+          )
         ) {
           this.reRender();
           return;

tests/index.test.js

@@ -476,35 +476,69 @@ describe('Form.Basic', () => {
     expect(hasError).toBeTruthy();
   });
 
-  it('setFields', () => {
-    let form;
-    const wrapper = mount(
-      <div>
-        <Form
-          ref={instance => {
-            form = instance;
-          }}
-        >
-          <InfoField name="username">
-            <Input />
-          </InfoField>
-        </Form>
-      </div>,
-    );
+  describe('setFields', () => {
+    it('should work', () => {
+      let form;
+      const wrapper = mount(
+        <div>
+          <Form
+            ref={instance => {
+              form = instance;
+            }}
+          >
+            <InfoField name="username">
+              <Input />
+            </InfoField>
+          </Form>
+        </div>,
+      );
 
-    form.setFields([
-      {
-        name: 'username',
-        touched: false,
-        validating: true,
-        errors: ['Set It!'],
-      },
-    ]);
-    wrapper.update();
+      form.setFields([
+        {
+          name: 'username',
+          touched: false,
+          validating: true,
+          errors: ['Set It!'],
+        },
+      ]);
+      wrapper.update();
 
-    matchError(wrapper, 'Set It!');
-    expect(wrapper.find('.validating').length).toBeTruthy();
-    expect(form.isFieldsTouched()).toBeFalsy();
+      matchError(wrapper, 'Set It!');
+      expect(wrapper.find('.validating').length).toBeTruthy();
+      expect(form.isFieldsTouched()).toBeFalsy();
+    });
+
+    it('should trigger by setField', () => {
+      const triggerUpdate = jest.fn();
+      const formRef = React.createRef();
+
+      const wrapper = mount(
+        <div>
+          <Form ref={formRef}>
+            <Field shouldUpdate={(prev, next) => prev.value !== next.value}>
+              {() => {
+                triggerUpdate();
+                return <input />;
+              }}
+            </Field>
+          </Form>
+        </div>,
+      );
+      wrapper.update();
+      triggerUpdate.mockReset();
+
+      // Not trigger render
+      formRef.current.setFields([
+        { name: 'others', value: 'no need to update' },
+      ]);
+      wrapper.update();
+      expect(triggerUpdate).not.toHaveBeenCalled();
+
+      // Trigger render
+      formRef.current.setFields([{ name: 'value', value: 'should update' }]);
+      wrapper.update();
+      expect(triggerUpdate).toHaveBeenCalled();
+    });
   });
 
   it('render props get meta', () => {