chore: Update deps test case and logic (#7)

* adjust deps logic

* update demo

* adjust deps logic

* update test case

Author: zombieJ

examples/StateForm-basic.tsx

@@ -38,7 +38,8 @@ export default class Demo extends React.Component {
           <Field dependencies={['username']}>
             {(control, meta, context) => {
               const { username } = context.getFieldsValue();
-              return username === '111' ? <Input {...control} placeholder="I am secret!" /> : null;
+              console.log('my render!', username);
+              return username === '111' && <Input {...control} placeholder="I am secret!" />;
             }}
           </Field>
 

src/Field.tsx

@@ -169,6 +169,20 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
         break;
       }
 
+      case 'dependenciesUpdate': {
+        /**
+         * Trigger when marked `dependencies` updated. Related fields will all update
+         */
+        const dependencyList = dependencies.map(getNamePath);
+        if (
+          (namePathList && containsNamePath(namePathList, namePath)) ||
+          dependencyList.some(dependency => containsNamePath(info.relatedFields, dependency))
+        ) {
+          this.forceUpdate();
+        }
+        break;
+      }
+
       default:
         /**
          * - If `namePath` exists in `namePathList`, means it's related value and should update.

src/interface.ts

@@ -97,6 +97,15 @@ export type NotifyInfo =
   | {
       type: 'setField';
       data: FieldData;
+    }
+  | {
+      type: 'dependenciesUpdate';
+      /**
+       * Contains all the related `InternalNamePath[]`.
+       * a <- b <- c : change `a`
+       * relatedFields=[a, b, c]
+       */
+      relatedFields: InternalNamePath[];
     };
 
 export interface Callbacks {

src/useForm.ts

@@ -316,6 +316,11 @@ export class FormStore {
     const childrenFields = this.getDependencyChildrenFields(namePath);
     this.validateFields(childrenFields);
 
+    this.notifyObservers(prevStore, childrenFields, {
+      type: 'dependenciesUpdate',
+      relatedFields: [namePath, ...childrenFields],
+    });
+
     // trigger callback function
     const { onValuesChange } = this.callbacks;
 

tests/common/InfoField.tsx

@@ -6,18 +6,16 @@ interface InfoFieldProps extends FieldProps {
   children: ReactElement;
 }
 
+export const Input = ({ value = '', ...props }) => <input {...props} value={value} />;
+
 /**
  * Return a wrapped Field with meta info
  */
 const InfoField: React.FC<InfoFieldProps> = ({ children, ...props }) => (
   <Field {...props}>
     {(control, { errors }) => (
       <div>
-        {children ? (
-          React.cloneElement(children, control)
-        ) : (
-          <input {...control} value={control.value || ''} />
-        )}
+        {children ? React.cloneElement(children, control) : <Input {...control} />}
         <ul className="errors">
           {errors.map(error => (
             <li key={error}>{error}</li>

tests/common/index.js

@@ -1,5 +1,5 @@
 import timeout from './timeout';
-import InfoField from './InfoField';
+import InfoField, { Input } from './InfoField';
 
 export async function changeValue(wrapper, value) {
   wrapper.find('input').simulate('change', { target: { value } });
@@ -22,3 +22,7 @@ export function matchError(wrapper, error) {
 export function getField(wrapper, index = 0) {
   return wrapper.find(InfoField).at(index);
 }
+
+export function getInput(wrapper, index = 0) {
+  return wrapper.find(Input).at(index);
+}

tests/dependencies.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Form from '../src';
-import InfoField from './common/InfoField';
-import { changeValue, matchError, getField } from './common';
+import Form, { Field } from '../src';
+import InfoField, { Input } from './common/InfoField';
+import { changeValue, matchError, getField, getInput } from './common';
 
 describe('dependencies', () => {
   it('touched', async () => {
@@ -30,4 +30,43 @@ describe('dependencies', () => {
     await changeValue(getField(wrapper, 0), '');
     matchError(getField(wrapper, 1), true);
   });
+
+  it('nest dependencies', async () => {
+    let form = null;
+    let rendered = false;
+
+    const wrapper = mount(
+      <div>
+        <Form
+          ref={instance => {
+            form = instance;
+          }}
+        >
+          <Field name="field_1">
+            <Input />
+          </Field>
+          <Field name="field_2" dependencies={['field_1']}>
+            <Input />
+          </Field>
+          <Field name="field_3" dependencies={['field_2']}>
+            {control => {
+              rendered = true;
+              return <Input {...control} />;
+            }}
+          </Field>
+        </Form>
+      </div>,
+    );
+
+    form.setFields([
+      { name: 'field_1', touched: true },
+      { name: 'field_2', touched: true },
+      { name: 'field_3', touched: true },
+    ]);
+
+    rendered = false;
+    await changeValue(getInput(wrapper), '1');
+
+    expect(rendered).toBeTruthy();
+  });
 });