feat: Add StateForm

examples/StateForm-redux.tsx

@@ -24,8 +24,8 @@ let App: any = ({ dispatch, fields }) => {
   return (
     <StateForm
       fields={fields}
-      onValuesChange={values => {
-        console.log('Value Change:', values);
+      onValuesChange={(changedValues, allValues) => {
+        console.log('Value Change:', changedValues, allValues);
       }}
       onFieldsChange={(changedFields, allFields) => {
         console.log('Field Change:', changedFields, allFields);
@@ -42,15 +42,27 @@ let App: any = ({ dispatch, fields }) => {
         <Input />
       </LabelField>
 
-      <button onClick={() => {
-        dispatch({
-          type: 'updateFields',
-          fields: [{
-            name: 'field',
-            value: 'redux it!',
-          }],
-        });
-      }}>dispatch to change</button>
+      <LabelField name="required" placeholder="required" rules={[{ required: true }]}>
+        <Input />
+      </LabelField>
+
+      <button
+        onClick={() => {
+          dispatch({
+            type: 'updateFields',
+            fields: [
+              {
+                name: 'field',
+                value: 'redux it!',
+                touched: true,
+                validating: true,
+              },
+            ],
+          });
+        }}
+      >
+        dispatch to change
+      </button>
     </StateForm>
   );
 };

src/StateForm/StateFormField.tsx

@@ -124,15 +124,17 @@ class StateFormField extends React.Component<StateFormFieldProps, StateFormField
         break;
 
       case 'setField': {
-        const { data } = info;
-        if ('touched' in data) {
-          this.touched = data.touched;
-        }
-        if ('validating' in data) {
-          this.validatePromise = data.validating ? Promise.resolve() : null;
-        }
+        if (namePathList && containsNamePath(namePathList, namePath)) {
+          const { data } = info;
+          if ('touched' in data) {
+            this.touched = data.touched;
+          }
+          if ('validating' in data) {
+            this.validatePromise = data.validating ? Promise.resolve() : null;
+          }
 
-        this.forceUpdate();
+          this.forceUpdate();
+        }
         break;
       }
 
@@ -196,10 +198,11 @@ class StateFormField extends React.Component<StateFormFieldProps, StateFormField
 
   // ============================= Child Component =============================
   public getMeta = (): Meta => {
+    const { name } = this.props;
     const { getFieldError } = this.context;
     // Make error & validating in cache to save perf
     this.prevValidating = this.isFieldValidating();
-    this.prevErrors = getFieldError(name);
+    this.prevErrors = getFieldError(getNamePath(name));
 
     const meta: Meta = {
       touched: this.isFieldTouched(),

src/StateForm/interface.ts

@@ -77,6 +77,6 @@ export type NotifyInfo =
     };
 
 export interface Callbacks {
-  onValuesChange?: (values: Store) => void;
+  onValuesChange?: (changedValues: Store, values: Store) => void;
   onFieldsChange?: (changedFields: FieldData[], allFields: FieldData[]) => void;
 }

src/StateForm/useForm.ts

@@ -16,6 +16,7 @@ import { allPromiseFinish } from './utils/asyncUtil';
 import NameMap from './utils/NameMap';
 import { ErrorCache } from './utils/validateUtil';
 import {
+  cloneByNamePathList,
   containsNamePath,
   getNamePath,
   getValue,
@@ -262,18 +263,14 @@ export class FormStore {
     this.validateFields(childrenFields);
 
     // trigger callback function
-    const { onValuesChange, onFieldsChange } = this.callbacks;
+    const { onValuesChange } = this.callbacks;
 
     if (onValuesChange) {
-      onValuesChange(this.store);
-    }
-    if (onFieldsChange) {
-      const fields = this.getFields();
-      const changedField = fields.find(({ name: fieldName }) => {
-        return matchNamePath(fieldName as any, namePath);
-      });
-      onFieldsChange([changedField], fields);
+      const changedValues = cloneByNamePathList(this.store, [namePath]);
+      onValuesChange(changedValues, this.store);
     }
+
+    this.triggerOnFieldsChange([namePath]);
   };
 
   // Let all child Field get update.
@@ -326,6 +323,18 @@ export class FormStore {
     return childrenFields;
   };
 
+  private triggerOnFieldsChange = (namePathList: InternalNamePath[]) => {
+    const { onFieldsChange } = this.callbacks;
+
+    if (onFieldsChange) {
+      const fields = this.getFields();
+      const changedFields = fields.filter(({ name: fieldName }) => {
+        return containsNamePath(namePathList, fieldName as any);
+      });
+      onFieldsChange(changedFields, fields);
+    }
+  };
+
   // =========================== Validate ===========================
   private validateFields: ValidateFields = (nameList?: NamePath[], options?: ValidateOptions) => {
     const namePathList: InternalNamePath[] | undefined = nameList && nameList.map(getNamePath);
@@ -363,9 +372,11 @@ export class FormStore {
     summaryPromise
       .catch(results => results)
       .then((results: FieldError[]) => {
+        const resultNamePathList: InternalNamePath[] = results.map(({ name }) => name);
+
         this.errorCache.updateError(results);
-        console.log('>????', results);
-        this.notifyObservers(this.store, results.map(({ name }) => name), { type: 'errorUpdate' });
+        this.notifyObservers(this.store, resultNamePathList, { type: 'errorUpdate' });
+        this.triggerOnFieldsChange(resultNamePathList);
       });
 
     const returnPromise = summaryPromise

src/StateForm/utils/valueUtil.ts

@@ -27,6 +27,16 @@ export function setValue(store: any, namePath: InternalNamePath, value: any) {
   return newStore;
 }
 
+export function cloneByNamePathList(store: any, namePathList: InternalNamePath[]) {
+  let newStore = {};
+  namePathList.forEach(namePath => {
+    const value = getValue(store, namePath);
+    newStore = setValue(store, namePath, value);
+  });
+
+  return newStore;
+}
+
 export function containsNamePath(namePathList: InternalNamePath[], namePath: InternalNamePath) {
   return namePathList && namePathList.some(path => matchNamePath(path, namePath));
 }