feat: support useWatch (#413)

zombieJ · crazyair · web-flow · commit f27229fab672 · 2022-04-13T22:54:44.000+08:00
* feat: init

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* fix: resetFields

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: add test

* feat: add test

* feat: add test

* feat: add test

* feat: add test

* feat: add test

* feat: add test

* feat: test

* feat: test

* feat: test

* feat: add list

* feat: add list

* feat: add test

* feat: add demo

* feat: add demo

* feat: api

* feat: api

* feat: review

* feat: watchId

* feat: watch

* feat: review

* feat: review

* feat: all values

* feat: all values

* feat: all values

* feat: all values

* feat: test

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: file name

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: watch

* feat: review

* feat: review

* feat: review

* feat: review

* feat: review

* feat: review

* feat: review

* feat: add demo

* feat: values

* feat: remove getRegisterFieldsValue

* feat: watch

* feat: remove setWatchCallbacks

* feat: submit demo

* feat: remove ref id

* feat: ts

* feat: rename

* feat: init map

* refactor: Internal namePath logic adjust

* chore: misc update

* fix: not crash if form is not exist

* fix: form warning check

* chore: adjust init logic

* chore: clean up

Co-authored-by: crazyair &lt;645381995@qq.com&gt;
diff --git a/docs/demo/useWatch-list.md b/docs/demo/useWatch-list.md
@@ -0,0 +1,3 @@
+## useWatch-list
+
+<code src="../examples/useWatch-list.tsx" />
diff --git a/docs/demo/useWatch.md b/docs/demo/useWatch.md
@@ -0,0 +1,3 @@
+## useWatch
+
+<code src="../examples/useWatch.tsx" />
diff --git a/docs/examples/useWatch-list.tsx b/docs/examples/useWatch-list.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Form, { Field } from 'rc-field-form';
+import Input from './components/Input';
+
+const { List, useForm } = Form;
+
+const Demo = () => {
+  const [form] = useForm();
+  const users = Form.useWatch(['users'], form) || [];
+
+  console.log('values', users);
+
+  return (
+    <div>
+      <Form form={form} style={{ border: '1px solid red', padding: 15 }}>
+        list length:{users.length}
+        <br />
+        Users: {JSON.stringify(users, null, 2)}
+        <Field name="main">
+          <Input />
+        </Field>
+        <List name="users" initialValue={['bamboo', 'light']}>
+          {(fields, { add, remove }) => {
+            return (
+              <div>
+                {fields.map((field, index) => (
+                  <Field key={field.key} {...field} rules={[{ required: true }]}>
+                    {control => (
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        {index + 1}
+                        <Input {...control} />
+                        <a onClick={() => remove(index)}>Remove</a>
+                      </div>
+                    )}
+                  </Field>
+                ))}
+                <button type="button" onClick={() => add()}>
+                  + New User
+                </button>
+              </div>
+            );
+          }}
+        </List>
+      </Form>
+    </div>
+  );
+};
+
+export default Demo;
diff --git a/docs/examples/useWatch.tsx b/docs/examples/useWatch.tsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import Form, { Field } from 'rc-field-form';
+import Input from './components/Input';
+
+let x = 0;
+
+const Demo = React.memo(() => {
+  const values = Form.useWatch(['demo']);
+  console.log('demo watch', values);
+  return (
+    <Field name="demo">
+      <Input />
+    </Field>
+  );
+});
+const Demo2 = React.memo(() => {
+  const values = Form.useWatch(['demo2']);
+  console.log('demo2 watch', values);
+  return (
+    <Field name="demo2">
+      <Input />
+    </Field>
+  );
+});
+
+export default () => {
+  const [form] = Form.useForm();
+  const [visible, setVisible] = useState(true);
+  const [visible2, setVisible2] = useState(true);
+  const [visible3, setVisible3] = useState(true);
+  const values = Form.useWatch([], form);
+  console.log('main watch', values);
+  return (
+    <>
+      <Form
+        form={form}
+        initialValues={{ id: 1, age: '10', name: 'default' }}
+        onFinish={v => console.log('submit values', v)}
+      >
+        no render
+        <Field name="main">
+          <Input />
+        </Field>
+        name
+        {visible && (
+          <Field name="name">
+            <Input />
+          </Field>
+        )}
+        age
+        <Field name="age">
+          <Input />
+        </Field>
+        initialValue
+        {visible3 && (
+          <Field name="initialValue" initialValue="initialValue">
+            <Input />
+          </Field>
+        )}
+        name、age 改变 render
+        <Field dependencies={['field_1']}>
+          {() => {
+            x += 1;
+            return ` ${x}`;
+          }}
+        </Field>
+        <br />
+        demo1
+        <Demo />
+        demo2
+        {visible2 && <Demo2 />}
+        <button type="submit">submit</button>
+      </Form>
+      <button
+        onClick={() => {
+          console.log('values', form.getFieldsValue());
+          console.log('values all', form.getFieldsValue(true));
+        }}
+      >
+        getFieldsValue
+      </button>
+      <button
+        onClick={() => {
+          form.setFields([
+            { name: 'name', value: 'name' },
+            { name: 'age', value: 'age' },
+          ]);
+        }}
+      >
+        setFields
+      </button>
+      <button onClick={() => form.resetFields()}>resetFields</button>
+      <button onClick={() => form.setFieldsValue({ name: `${form.getFieldValue('name') || ''}1` })}>
+        setFieldsValue
+      </button>
+      <button onClick={() => setVisible(c => !c)}>isShow name</button>
+      <button onClick={() => setVisible3(c => !c)}>isShow initialValue</button>
+      <button onClick={() => setVisible2(c => !c)}>isShow demo2</button>
+    </>
+  );
+};
diff --git a/src/FieldContext.ts b/src/FieldContext.ts
@@ -36,6 +36,7 @@ const Context = React.createContext<InternalFormInstance>({
       setInitialValues: warningFunc,
       destroyForm: warningFunc,
       setCallbacks: warningFunc,
+      registerWatch: warningFunc,
       getFields: warningFunc,
       setValidateMessages: warningFunc,
       setPreserve: warningFunc,
diff --git a/src/index.tsx b/src/index.tsx
@@ -7,6 +7,7 @@ import FieldForm, { FormProps } from './Form';
 import { FormProvider } from './FormContext';
 import FieldContext from './FieldContext';
 import ListContext from './ListContext';
+import useWatch from './useWatch';
 
 const InternalForm = React.forwardRef<FormInstance, FormProps>(FieldForm) as <Values = any>(
   props: FormProps<Values> & { ref?: React.Ref<FormInstance<Values>> },
@@ -18,6 +19,7 @@ interface RefFormType extends InternalFormType {
   Field: typeof Field;
   List: typeof List;
   useForm: typeof useForm;
+  useWatch: typeof useWatch;
 }
 
 const RefForm: RefFormType = InternalForm as RefFormType;
@@ -26,6 +28,7 @@ RefForm.FormProvider = FormProvider;
 RefForm.Field = Field;
 RefForm.List = List;
 RefForm.useForm = useForm;
+RefForm.useWatch = useWatch;
 
 export { FormInstance, Field, List, useForm, FormProvider, FormProps, FieldContext, ListContext };
 
diff --git a/src/interface.ts b/src/interface.ts
@@ -193,6 +193,8 @@ export interface Callbacks<Values = any> {
   onFinishFailed?: (errorInfo: ValidateErrorEntity<Values>) => void;
 }
 
+export type WatchCallBack = (values: Store, namePathList: InternalNamePath[]) => void;
+
 export interface InternalHooks {
   dispatch: (action: ReducerAction) => void;
   initEntityValue: (entity: FieldEntity) => void;
@@ -201,6 +203,7 @@ export interface InternalHooks {
   setInitialValues: (values: Store, init: boolean) => void;
   destroyForm: () => void;
   setCallbacks: (callbacks: Callbacks) => void;
+  registerWatch: (callback: WatchCallBack) => () => void;
   getFields: (namePathList?: InternalNamePath[]) => FieldData[];
   setValidateMessages: (validateMessages: ValidateMessages) => void;
   setPreserve: (preserve?: boolean) => void;
@@ -255,6 +258,9 @@ export type InternalFormInstance = Omit<FormInstance, 'validateFields'> & {
    * We pass the `HOOK_MARK` as key to avoid user call the function.
    */
   getInternalHooks: (secret: string) => InternalHooks | null;
+
+  /** @private Internal usage. Do not use it in your production */
+  _init?: boolean;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/useForm.ts b/src/useForm.ts
@@ -21,6 +21,7 @@ import type {
   InternalFieldData,
   ValuedNotifyInfo,
   RuleError,
+  WatchCallBack,
 } from './interface';
 import { HOOK_MARK } from './FieldContext';
 import { allPromiseFinish } from './utils/asyncUtil';
@@ -93,6 +94,7 @@ export class FormStore {
     setFieldsValue: this.setFieldsValue,
     validateFields: this.validateFields,
     submit: this.submit,
+    _init: true,
 
     getInternalHooks: this.getInternalHooks,
   });
@@ -114,6 +116,7 @@ export class FormStore {
         getFields: this.getFields,
         setPreserve: this.setPreserve,
         getInitialValue: this.getInitialValue,
+        registerWatch: this.registerWatch,
       };
     }
 
@@ -141,6 +144,7 @@ export class FormStore {
 
       // We will take consider prev form unmount fields.
       // When the field is not `preserve`, we need fill this with initialValues instead of store.
+      // eslint-disable-next-line array-callback-return
       this.prevWithoutPreserves?.map(({ key: namePath }) => {
         nextStore = setValue(nextStore, namePath, getValue(initialValues, namePath));
       });
@@ -180,6 +184,28 @@ export class FormStore {
     this.preserve = preserve;
   };
 
+  // ============================= Watch ============================
+  private watchList: WatchCallBack[] = [];
+
+  private registerWatch: InternalHooks['registerWatch'] = callback => {
+    this.watchList.push(callback);
+
+    return () => {
+      this.watchList = this.watchList.filter(fn => fn !== callback);
+    };
+  };
+
+  private notifyWatch = (namePath: InternalNamePath[] = []) => {
+    // No need to cost perf when nothing need to watch
+    if (this.watchList.length) {
+      const values = this.getFieldsValue();
+
+      this.watchList.forEach(callback => {
+        callback(values, namePath);
+      });
+    }
+  };
+
   // ========================== Dev Warning =========================
   private timeoutId: any = null;
 
@@ -498,6 +524,7 @@ export class FormStore {
       this.updateStore(setValues({}, this.initialValues));
       this.resetWithFieldInitialValue();
       this.notifyObservers(prevStore, null, { type: 'reset' });
+      this.notifyWatch();
       return;
     }
 
@@ -509,16 +536,20 @@ export class FormStore {
     });
     this.resetWithFieldInitialValue({ namePathList });
     this.notifyObservers(prevStore, namePathList, { type: 'reset' });
+    this.notifyWatch(namePathList);
   };
 
   private setFields = (fields: FieldData[]) => {
     this.warningUnhooked();
 
     const prevStore = this.store;
 
+    const namePathList: InternalNamePath[] = [];
+
     fields.forEach((fieldData: FieldData) => {
       const { name, errors, ...data } = fieldData;
       const namePath = getNamePath(name);
+      namePathList.push(namePath);
 
       // Value
       if ('value' in data) {
@@ -530,6 +561,8 @@ export class FormStore {
         data: fieldData,
       });
     });
+
+    this.notifyWatch(namePathList);
   };
 
   private getFields = (): InternalFieldData[] => {
@@ -573,6 +606,8 @@ export class FormStore {
 
   private registerField = (entity: FieldEntity) => {
     this.fieldEntities.push(entity);
+    const namePath = entity.getNamePath();
+    this.notifyWatch([namePath]);
 
     // Set initial values
     if (entity.props.initialValue !== undefined) {
@@ -591,8 +626,6 @@ export class FormStore {
       const mergedPreserve = preserve !== undefined ? preserve : this.preserve;
 
       if (mergedPreserve === false && (!isListField || subNamePath.length > 1)) {
-        const namePath = entity.getNamePath();
-
         const defaultValue = isListField ? undefined : this.getInitialValue(namePath);
 
         if (
@@ -614,6 +647,8 @@ export class FormStore {
           this.triggerDependenciesUpdate(prevStore, namePath);
         }
       }
+
+      this.notifyWatch([namePath]);
     };
   };
 
@@ -679,6 +714,7 @@ export class FormStore {
       type: 'valueUpdate',
       source: 'internal',
     });
+    this.notifyWatch([namePath]);
 
     // Dependencies update
     const childrenFields = this.triggerDependenciesUpdate(prevStore, namePath);
@@ -701,13 +737,15 @@ export class FormStore {
     const prevStore = this.store;
 
     if (store) {
-      this.updateStore(setValues(this.store, store));
+      const nextStore = setValues(this.store, store);
+      this.updateStore(nextStore);
     }
 
     this.notifyObservers(prevStore, null, {
       type: 'valueUpdate',
       source: 'external',
     });
+    this.notifyWatch();
   };
 
   private getDependencyChildrenFields = (rootNamePath: InternalNamePath): InternalNamePath[] => {
diff --git a/src/useWatch.ts b/src/useWatch.ts
diff --git a/tests/useWatch.test.tsx b/tests/useWatch.test.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## useWatch-list`
	`2`	`+`
	`3`	`+<code src="../examples/useWatch-list.tsx" />`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## useWatch`
	`2`	`+`
	`3`	`+<code src="../examples/useWatch.tsx" />`