feat: use deps as a shortcut of shouldUpdate when name is not set (#158)

* feat: use `deps` as a shortcut of `shouldUpdate` when name is not set

* chore

* refactor

* refactor

* refactor: remove redundant deps check

* chore

* chore

* perf: remove useless rerender

Author: 07akioni

examples/deps.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Form, { Field } from '../src';
+import Input from './components/Input';
+
+let x = 0;
+
+export default function Demo() {
+  return (
+    <Form>
+      <Field dependencies={['field_1']}>
+        {() => {
+          x += 1;
+          return `gogogo${x}`;
+        }}
+      </Field>
+      <Field name="field_1">
+        <Input />
+      </Field>
+      <Field name="field_2">
+        <Input />
+      </Field>
+    </Form>
+  );
+}

src/Field.tsx

@@ -257,29 +257,31 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
          * Trigger when marked `dependencies` updated. Related fields will all update
          */
         const dependencyList = dependencies.map(getNamePath);
-        if (
-          namePathMatch ||
-          dependencyList.some(dependency => containsNamePath(info.relatedFields, dependency))
-        ) {
+        // No need for `namePathMath` check and `shouldUpdate` check, since `valueUpdate` will be
+        // emitted earlier and they will work there
+        // If set it may cause unnecessary twice rerendering
+        if (dependencyList.some(dependency => containsNamePath(info.relatedFields, dependency))) {
           this.reRender();
           return;
         }
         break;
       }
 
       default:
-        /**
-         * - If `namePath` exists in `namePathList`, means it's related value and should update.
-         * - If `dependencies` exists in `namePathList`, means upstream trigger update.
-         * - If `shouldUpdate` provided, use customize logic to update the field
-         *   - else to check if value changed
-         */
+        // 1. If `namePath` exists in `namePathList`, means it's related value and should update
+        //      For example <List name="list"><Field name={['list', 0]}></List>
+        //      If `namePathList` is [['list']] (List value update), Field should be updated
+        //      If `namePathList` is [['list', 0]] (Field value update), List shouldn't be updated
+        // 2.
+        //   2.1 If `dependencies` is set, `name` is not set and `shouldUpdate` is not set,
+        //       don't use `shouldUpdate`. `dependencies` is view as a shortcut if `shouldUpdate`
+        //       is not provided
+        //   2.2 If `shouldUpdate` provided, use customize logic to update the field
+        //       else to check if value changed
         if (
           namePathMatch ||
-          dependencies.some(dependency =>
-            containsNamePath(namePathList, getNamePath(dependency)),
-          ) ||
-          requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)
+          ((!dependencies.length || namePath.length || shouldUpdate) &&
+            requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info))
         ) {
           this.reRender();
           return;

tests/dependencies.test.js

@@ -122,4 +122,87 @@ describe('Form.Dependencies', () => {
     await changeValue(getField(wrapper, 1), 'light');
     matchError(getField(wrapper, 0), false);
   });
+
+  it('should work as a shortcut when name is not provided', async () => {
+    const spy = jest.fn();
+    const wrapper = mount(
+      <Form>
+        <Field dependencies={['field_1']}>
+          {() => {
+            spy();
+            return 'gogogo';
+          }}
+        </Field>
+        <Field name="field_1">
+          <Input />
+        </Field>
+        <Field name="field_2">
+          <Input />
+        </Field>
+      </Form>,
+    );
+    expect(spy).toHaveBeenCalledTimes(1);
+    await changeValue(getField(wrapper, 2), 'value2');
+    // sync start
+    //   valueUpdate -> not rerender
+    //   depsUpdate  -> not rerender
+    // sync end
+    // async start
+    //   validateFinish -> not rerender
+    // async end
+    expect(spy).toHaveBeenCalledTimes(1);
+    await changeValue(getField(wrapper, 1), 'value1');
+    // sync start
+    //   valueUpdate -> not rerender
+    //   depsUpdate  -> rerender by deps
+    //   [ react rerender once -> 2 ]
+    // sync end
+    // async start
+    //   validateFinish -> not rerender
+    // async end
+    expect(spy).toHaveBeenCalledTimes(2);
+  });
+
+  it("shouldn't work when shouldUpdate is set", async () => {
+    const spy = jest.fn();
+    const wrapper = mount(
+      <Form>
+        <Field dependencies={['field_1']} shouldUpdate={() => true}>
+          {() => {
+            spy();
+            return 'gogogo';
+          }}
+        </Field>
+        <Field name="field_1">
+          <Input />
+        </Field>
+        <Field name="field_2">
+          <Input />
+        </Field>
+      </Form>,
+    );
+    expect(spy).toHaveBeenCalledTimes(1);
+    await changeValue(getField(wrapper, 2), 'value2');
+    // sync start
+    //   valueUpdate -> rerender by shouldUpdate
+    //   depsUpdate  -> rerender by deps
+    //   [ react rerender once -> 2 ]
+    // sync end
+    // async start
+    //   validateFinish -> rerender by shouldUpdate
+    //   [ react rerender once -> 3 ]
+    // async end
+    expect(spy).toHaveBeenCalledTimes(3);
+    await changeValue(getField(wrapper, 1), 'value1');
+    // sync start
+    //   valueUpdate -> rerender by shouldUpdate
+    //   depsUpdate  -> rerender by deps
+    //   [ react rerender once -> 4 ]
+    // sync end
+    // async start
+    //   validateFinish -> rerender by shouldUpdate
+    //   [ react rerender once -> 5 ]
+    // async end
+    expect(spy).toHaveBeenCalledTimes(5);
+  });
 });