@douyinfe/semi-foundation 2.36.0-beta.0 → 2.36.0

package/lib/es/form/foundation.js

@@ -1,7 +1,6 @@
 import _toPath from "lodash/toPath";
 import _isFunction from "lodash/isFunction";
 import _isUndefined from "lodash/isUndefined";
-
 /* eslint-disable prefer-const, max-len */
 import BaseFoundation from '../base/foundation';
 import * as ObjectUtil from '../utils/object';
@@ -19,26 +18,24 @@ export default class FormFoundation extends BaseFoundation {
          这里也需要读一次initValue，因为Form级别可设置初始值，Field级别也可设置初始值.
         Form中设置的字段，不一定会存在Field实体，所以不能完全依赖register时刻来设置初始值
     */
-
     let {
       initValues
     } = this._adapter.getProps();
-
     initValues = this._adapter.cloneDeep(initValues);
     this.data = {
       values: initValues ? initValues : {},
       errors: {},
-      touched: {} // invalid: false,
+      touched: {}
+      // invalid: false,
       // dirty: false,
-
-    }; // Map store all fields
+    };
+    // Map store all fields
     // key: fieldName
     // value:  { field, fieldApi, keepState, initValue}
-
-    this.fields = new Map(); // Record all registered fields
-
-    this.registered = {}; // Record all registered ArrayField
-
+    this.fields = new Map();
+    // Record all registered fields
+    this.registered = {};
+    // Record all registered ArrayField
     this.registeredArrayField = new Map();
     this.register = this.register.bind(this);
     this.unRegister = this.unRegister.bind(this);
@@ -61,23 +58,20 @@ export default class FormFoundation extends BaseFoundation {
     this.getFieldExist = this.getFieldExist.bind(this);
     this.scrollToField = this.scrollToField.bind(this);
   }
-
   init() {
     this._adapter.initFormId();
   }
-
   getField(field) {
     const targetField = this.fields.get(field);
     return targetField;
   }
-
   register(field, fieldState, fieldStuff) {
     // determine if this field has been register before
     const registered = this.registered[field];
     this.registered[field] = true;
     this.fields.set(field, fieldStuff);
-
-    if (fieldStuff.keepState) {// TODO support keepState
+    if (fieldStuff.keepState) {
+      // TODO support keepState
     } else {
       const allowEmpty = fieldStuff.allowEmpty || false;
       const opts = {
@@ -85,24 +79,22 @@ export default class FormFoundation extends BaseFoundation {
         notUpdate: false,
         allowEmpty
       };
-      let fieldValue = fieldState.value; // When allowEmpty is false, 'is equivalent to undefined, and the key of the field does not need to be reflected on values
-
+      let fieldValue = fieldState.value;
+      // When allowEmpty is false, 'is equivalent to undefined, and the key of the field does not need to be reflected on values
       if (!allowEmpty && fieldValue === '') {
         fieldValue = undefined;
       }
-
       this.updateStateValue(field, fieldValue, opts);
-
       if (fieldState.error) {
         this.updateStateError(field, fieldState.error, opts);
       }
-    } // this.log(this.fields);
-
+    }
+    // this.log(this.fields);
   }
 
   unRegister(field) {
-    const targetField = this.fields.get(field); // delete data
-
+    const targetField = this.fields.get(field);
+    // delete data
     try {
       if (!targetField.keepState) {
         ObjectUtil.remove(this.data.values, field);
@@ -111,50 +103,40 @@ export default class FormFoundation extends BaseFoundation {
       }
     } catch (error) {
       console.error(`some thing wrong when unregister field:${field}`);
-    } // delete field
-
-
+    }
+    // delete field
     this.fields.delete(field);
-
     this._adapter.notifyChange(this.data);
-
     this._adapter.forceUpdate();
-  } // in order to slove byted-issue-289
-
-
+  }
+  // in order to slove byted-issue-289
   registerArrayField(arrayFieldPath, val) {
     this.updateArrayField(arrayFieldPath, {
       updateKey: new Date().valueOf(),
       initValue: val
     });
   }
-
   unRegisterArrayField(arrayField) {
     this.registeredArrayField.delete(arrayField);
   }
-
   getArrayField(arrayField) {
     return this.registeredArrayField.get(arrayField);
   }
-
   updateArrayField(arrayField, updateValue) {
     const mergeVal = Object.assign(Object.assign({}, this.registeredArrayField.get(arrayField)), updateValue);
     this.registeredArrayField.set(arrayField, mergeVal);
   }
-
   validate(fieldPaths) {
     const {
       validateFields
     } = this.getProps();
-
     if (validateFields && _isFunction(validateFields)) {
       return this._formValidate();
     } else {
       return this._fieldsValidate(fieldPaths);
     }
-  } // form level validate
-
-
+  }
+  // form level validate
   _formValidate() {
     const {
       values
@@ -164,14 +146,12 @@ export default class FormFoundation extends BaseFoundation {
     } = this.getProps();
     return new Promise((resolve, reject) => {
       let maybePromisedErrors;
-
       try {
         maybePromisedErrors = validateFields(values);
       } catch (errors) {
         // error throw by sync validate directly
         maybePromisedErrors = errors;
       }
-
       if (!maybePromisedErrors) {
         resolve(values);
         this.injectErrorToField({});
@@ -183,55 +163,42 @@ export default class FormFoundation extends BaseFoundation {
             this.injectErrorToField({});
           } else {
             this.data.errors = result;
-
             this._adapter.notifyChange(this.data);
-
             this.injectErrorToField(result);
-
             this._adapter.forceUpdate();
-
             this._autoScroll(100);
-
             reject(result);
           }
         }, errors => {
           // validate failed
           // this._adapter.notifyChange(this.data);
           this._autoScroll(100);
-
           reject(errors);
         });
       } else {
         // TODO: current design, returning an empty object will be considered a checksum failure and will be rejected. Only returning an empty string will be considered a success, consider resetting it in 1.0?
         this.data.errors = maybePromisedErrors;
         this.injectErrorToField(maybePromisedErrors);
-
         this._adapter.notifyChange(this.data);
-
         this._adapter.forceUpdate();
-
         this._autoScroll(100);
-
         reject(maybePromisedErrors);
       }
     });
-  } // field level validate
-
-
+  }
+  // field level validate
   _fieldsValidate(fieldPaths) {
     const {
       values
-    } = this.data; // When there is no custom validation function at Form level, perform validation of each Field
-
+    } = this.data;
+    // When there is no custom validation function at Form level, perform validation of each Field
     return new Promise((resolve, reject) => {
       let promiseSet = [];
-
       const targetFields = this._getOperateFieldMap(fieldPaths);
-
       targetFields.forEach((field, fieldPath) => {
         // Call each fieldApi for verification
-        const fieldValue = this.getValue(fieldPath); // When centralized verification, no need to trigger forceUpdate and notify
-
+        const fieldValue = this.getValue(fieldPath);
+        // When centralized verification, no need to trigger forceUpdate and notify
         const opts = {
           notNotify: true,
           notUpdate: true
@@ -243,37 +210,29 @@ export default class FormFoundation extends BaseFoundation {
       Promise.all(promiseSet).then(() => {
         // After the centralized verification is completed, trigger notify and forceUpdate once.
         this._adapter.notifyChange(this.data);
-
         this._adapter.forceUpdate();
-
         const errors = this.getError();
-
         if (this._isValid(targetFields)) {
           resolve(values);
         } else {
           this._autoScroll();
-
           reject(errors);
         }
       });
     });
   }
-
   submit() {
     const {
       values
-    } = this.data; // validate form
-
+    } = this.data;
+    // validate form
     this.validate().then(resolveValues => {
       // if valid do submit
       const _values = this._adapter.cloneDeep(resolveValues);
-
       this._adapter.notifySubmit(_values);
     }).catch(errors => {
       const _errors = this._adapter.cloneDeep(errors);
-
       const _values = this._adapter.cloneDeep(values);
-
       this._adapter.notifySubmitFail(_errors, _values);
     });
   }
@@ -290,37 +249,30 @@ export default class FormFoundation extends BaseFoundation {
    *           activity.a => activity.a[0]、activity.a[1]
    *
    */
-
-
   _getNestedField(path) {
     const allRegisterField = this.fields;
     const allFieldPath = [...allRegisterField].map(item => item[0]);
     let nestedFieldPath = new Map();
     allFieldPath.forEach(item => {
       let itemPath = _toPath(item);
-
       let targetPath = _toPath(path);
-
       if (targetPath.every((path, i) => targetPath[i] === itemPath[i])) {
         const realField = allRegisterField.get(item);
         nestedFieldPath.set(item, realField);
       }
     });
     return nestedFieldPath;
-  } // get all operate fields, called by validate() / reset()
-
-
+  }
+  // get all operate fields, called by validate() / reset()
   _getOperateFieldMap(fieldPaths) {
     let targetFields = new Map();
-
     if (!_isUndefined(fieldPaths)) {
       // reset or validate specific fields
       fieldPaths.forEach(path => {
-        const field = this.fields.get(path); // may be undefined, if exists two fields like 'a[0]'、'a[1]', but user directly call reset(['a']) / validate(['a'])
-
+        const field = this.fields.get(path);
+        // may be undefined, if exists two fields like 'a[0]'、'a[1]', but user directly call reset(['a']) / validate(['a'])
         if (_isUndefined(field)) {
           const nestedFields = this._getNestedField(path);
-
           targetFields = new Map([...targetFields, ...nestedFields]);
         } else {
           targetFields.set(path, field);
@@ -330,29 +282,21 @@ export default class FormFoundation extends BaseFoundation {
       // reset or validate all fields
       targetFields = this.fields;
     }
-
     return targetFields;
-  } // Reset the entire form, reset all fields and remove validation results
-
-
+  }
+  // Reset the entire form, reset all fields and remove validation results
   reset(fieldPaths) {
     const targetFields = this._getOperateFieldMap(fieldPaths);
-
     targetFields.forEach(field => {
       field.fieldApi.reset();
     });
-
     if (this.registeredArrayField.size) {
       this._resetArrayField();
     }
-
     this._adapter.notifyChange(this.data);
-
     this._adapter.forceUpdate();
-
     this._adapter.notifyReset();
   }
-
   _resetArrayField() {
     /*
         When Reset, arrayField needs to be processed separately. Restore the key/value of arrayField in formState according to the initial value
@@ -371,10 +315,9 @@ export default class FormFoundation extends BaseFoundation {
         updateKey: new Date().valueOf()
       });
     });
-  } // After calling the form's custom validateFields function, reject the returned error to the corresponding field
+  }
+  // After calling the form's custom validateFields function, reject the returned error to the corresponding field
   // 调用了Form的自定义validateFields函数后，将返回的错误展示到对应的field中
-
-
   injectErrorToField(errors) {
     this.fields.forEach(field => {
       const fieldError = ObjectUtil.get(errors, field.field);
@@ -385,55 +328,45 @@ export default class FormFoundation extends BaseFoundation {
       field.fieldApi.setError(fieldError, opts);
     });
   }
-
   getValue(field, opts) {
     const isAllField = typeof field === 'undefined';
     const needClone = opts && opts.needClone;
     let result, fieldValue;
-
     switch (true) {
       case !isAllField && !needClone:
         result = ObjectUtil.get(this.data.values, field);
         break;
-
       case !isAllField && needClone:
         fieldValue = ObjectUtil.get(this.data.values, field);
         result = this._adapter.cloneDeep(fieldValue);
         break;
-
       case isAllField && !needClone:
         result = Object.assign({}, this.data.values);
         break;
-
       case isAllField && needClone:
         result = this._adapter.cloneDeep(this.data.values);
         break;
-
       default:
         break;
     }
-
     return result;
   }
-
   setValues(values, _ref) {
     let {
       isOverride = false
     } = _ref;
-
     const _values = this._adapter.cloneDeep(values);
-
     this.fields.forEach(field => {
-      const value = ObjectUtil.get(_values, field.field); // When calling setValues to override the values, only need to trigger onValueChange and onChange once, so setNotNotify of setValue to true
+      const value = ObjectUtil.get(_values, field.field);
+      // When calling setValues to override the values, only need to trigger onValueChange and onChange once, so setNotNotify of setValue to true
       // 调用setValues进行值的覆盖时，只需要回调一次onValueChange、onChange即可，所以此处将setValue的notNotify置为true
-
       const opts = {
         notNotify: true,
         notUpdate: true
       };
       field.fieldApi.setValue(value, opts);
-    }); // if there exists any arrayField component in this form
-
+    });
+    // if there exists any arrayField component in this form
     if (this.registeredArrayField.size) {
       const arrayFieldPaths = [...this.registeredArrayField.keys()];
       arrayFieldPaths.forEach(path => {
@@ -441,24 +374,19 @@ export default class FormFoundation extends BaseFoundation {
           updateKey: new Date().valueOf()
         });
       });
-    } // When isOverride is true, there may be a non-existent field in the values passed in, directly synchronized to formState.values
+    }
+    // When isOverride is true, there may be a non-existent field in the values passed in, directly synchronized to formState.values
     // 当isOverride为true，传入的values中可能存在不存在的field时，直接将其同步到formState.values中
-
-
     if (isOverride) {
       this.data.values = _values;
-    } // After completing the assignment, the unified callback can be done once.
+    }
+    // After completing the assignment, the unified callback can be done once.
     // 在完成赋值后，统一回调一次即可
-
-
     this._adapter.notifyChange(this.data);
-
     this._adapter.notifyValueChange(this.data.values, Object.assign({}, values));
-
     this._adapter.forceUpdate();
-  } // update formState value
-
-
+  }
+  // update formState value
   updateStateValue(field, value, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
@@ -469,9 +397,8 @@ export default class FormFoundation extends BaseFoundation {
      * When F orm.allow Empty is true, all fields and keys will appear in the formS tate.values. If the value is empty, it is undefined
      * When F orm.allow Empty is false, only fields with values will key appear in the formS tate.values
      */
-
-    const formAllowEmpty = this.getProp('allowEmpty'); // priority at Field level
-
+    const formAllowEmpty = this.getProp('allowEmpty');
+    // priority at Field level
     const allowEmpty = fieldAllowEmpty ? fieldAllowEmpty : formAllowEmpty;
     ObjectUtil.set(this.data.values, field, value, allowEmpty);
     /**
@@ -481,76 +408,62 @@ export default class FormFoundation extends BaseFoundation {
      * register时，Field中同步initValue到FormState时调用的setValue不应该触发notify
      * 但需要触发forceUpdate，否则useFormState、useFieldState初始渲染会有问题
      */
-
     if (!notNotify) {
       this._adapter.notifyChange(this.data);
-
       this._adapter.notifyValueChange(this.data.values, {
         [field]: value
       });
     }
-
     if (!notUpdate) {
       this._adapter.forceUpdate(callback);
     }
-  } // get touched from formState
-
-
+  }
+  // get touched from formState
   getTouched(field) {
     if (typeof field === 'undefined') {
       return this.data.touched;
     }
-
     return ObjectUtil.get(this.data.touched, field);
-  } // update formState touched
-
-
+  }
+  // update formState touched
   updateStateTouched(field, isTouched, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
     ObjectUtil.set(this.data.touched, field, isTouched);
-
     if (!notNotify) {
       this._adapter.notifyChange(this.data);
     }
-
     if (!notUpdate) {
       this._adapter.forceUpdate(callback);
     }
-  } // get error from formState
-
-
+  }
+  // get error from formState
   getError(field) {
     if (typeof field === 'undefined') {
       return this.data.errors;
     }
-
     return ObjectUtil.get(this.data.errors, field);
-  } // update formState error
-
-
+  }
+  // update formState error
   updateStateError(field, error, opts, callback) {
     const notNotify = opts && opts.notNotify;
     const notUpdate = opts && opts.notUpdate;
-    ObjectUtil.set(this.data.errors, field, error); // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
+    ObjectUtil.set(this.data.errors, field, error);
+    // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
     // 集中validate时，引起的setError不需要触发notify，否则会过于频繁调用，有多少个field就调用了多少次
-
     if (!notNotify) {
       this._adapter.notifyChange(this.data);
     }
-
     if (!notUpdate) {
       this._adapter.forceUpdate(callback);
     }
-  } // For internal use in the FormApi Operating Field
-
-
+  }
+  // For internal use in the FormApi Operating Field
   getFieldSetterApi() {
     const setValue = (field, value, opts) => {
-      const fieldApi = this.fields.get(field) ? this.fields.get(field).fieldApi : undefined; // DeepClone the value entered from the outside to avoid unexpected errors caused by not isolating the scope to the greatest extent. This setValue will be called in eg: ArrayField
-
+      const fieldApi = this.fields.get(field) ? this.fields.get(field).fieldApi : undefined;
+      // DeepClone the value entered from the outside to avoid unexpected errors caused by not isolating the scope to the greatest extent. This setValue will be called in eg: ArrayField
       const newValue = this._adapter.cloneDeep(value);
-
       if (fieldApi) {
         // If there is a corresponding Field entity, call FieldApi to update the value
         fieldApi.setValue(newValue, opts);
@@ -561,7 +474,6 @@ export default class FormFoundation extends BaseFoundation {
         // When the user directly calls formA pi.set Value ('peoples', [2,3])
         this.updateStateValue(field, newValue, opts, () => {
           let nestedFields = this._getNestedField(field);
-
           if (nestedFields.size) {
             nestedFields.forEach(fieldStaff => {
               let fieldPath = fieldStaff.field;
@@ -573,8 +485,8 @@ export default class FormFoundation extends BaseFoundation {
               fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
             });
           }
-        }); // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
-
+        });
+        // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
             updateKey: new Date().valueOf()
@@ -582,18 +494,14 @@ export default class FormFoundation extends BaseFoundation {
         }
       }
     };
-
     const setError = (field, error, opts) => {
       const fieldApi = this.fields.get(field) ? this.fields.get(field).fieldApi : undefined;
-
       const newError = this._adapter.cloneDeep(error);
-
       if (fieldApi) {
         fieldApi.setError(newError, opts);
       } else {
         this.updateStateError(field, newError, opts, () => {
           let nestedFields = this._getNestedField(field);
-
           if (nestedFields.size) {
             nestedFields.forEach(fieldStaff => {
               let fieldPath = fieldStaff.field;
@@ -606,7 +514,6 @@ export default class FormFoundation extends BaseFoundation {
             });
           }
         });
-
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
             updateKey: new Date().valueOf()
@@ -614,16 +521,14 @@ export default class FormFoundation extends BaseFoundation {
         }
       }
     };
-
     const setTouched = (field, isTouched, opts) => {
-      const fieldApi = this.fields.get(field) ? this.fields.get(field).fieldApi : undefined; // touched is boolean variable, no need to exec deepClone like setValue
-
+      const fieldApi = this.fields.get(field) ? this.fields.get(field).fieldApi : undefined;
+      // touched is boolean variable, no need to exec deepClone like setValue
       if (fieldApi) {
         fieldApi.setTouched(isTouched, opts);
       } else {
         this.updateStateTouched(field, isTouched, opts, () => {
           let nestedFields = this._getNestedField(field);
-
           if (nestedFields.size) {
             nestedFields.forEach(fieldStaff => {
               let fieldPath = fieldStaff.field;
@@ -636,7 +541,6 @@ export default class FormFoundation extends BaseFoundation {
             });
           }
         });
-
         if (this.getArrayField(field)) {
           this.updateArrayField(field, {
             updateKey: new Date().valueOf()
@@ -644,15 +548,13 @@ export default class FormFoundation extends BaseFoundation {
         }
       }
     };
-
     return {
       setValue,
       setError,
       setTouched
     };
-  } // For Field and ArrayField to read and modify FormState
-
-
+  }
+  // For Field and ArrayField to read and modify FormState
   getModifyFormStateApi() {
     return {
       register: this.register,
@@ -672,9 +574,8 @@ export default class FormFoundation extends BaseFoundation {
       getArrayField: this.getArrayField,
       updateArrayField: this.updateArrayField
     };
-  } // Form APIs for external use, exposed to the user
-
-
+  }
+  // Form APIs for external use, exposed to the user
   getFormApi() {
     const fieldSetterApi = this.getFieldSetterApi();
     return Object.assign(Object.assign({}, fieldSetterApi), {
@@ -699,13 +600,10 @@ export default class FormFoundation extends BaseFoundation {
       scrollToField: (field, scrollOpts) => this.scrollToField(field, scrollOpts)
     });
   }
-
   getFormState() {
     let needClone = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
     // NOTES：这里如果直接返回this.data，forceUpdate 触发 Form rerender 时，通过context传下去的formState会被认为是同一个对象【应该是浅对比的原因】
     // 使用了useFormState相关的component都不会触发重新渲染。所以使用...复制一次
-
     /*
         The reason for distinguishing deepClone: When semi is calling getFormState for internal consumption,
         the value of formState will not be modified, so deep cloning is not necessary, which can reduce performance loss
@@ -720,10 +618,8 @@ export default class FormFoundation extends BaseFoundation {
       return this._adapter.cloneDeep(this.data);
     }
   }
-
   _isValid(targetFields) {
     let valid = true;
-
     if (!targetFields) {
       valid = Boolean(ObjectUtil.empty(this.data.errors));
     } else {
@@ -731,62 +627,49 @@ export default class FormFoundation extends BaseFoundation {
       const targetFieldStr = [...targetFields.keys()];
       targetFieldStr.forEach(fieldStr => {
         const fieldError = ObjectUtil.get(this.data.errors, fieldStr);
-
         if (!isValid(fieldError)) {
           valid = false;
         }
       });
     }
-
     return valid;
-  } // get form.props.initValues
-
-
+  }
+  // get form.props.initValues
   getInitValues() {
     return this._adapter.getInitValues();
   }
-
   getInitValue(field) {
     if (typeof field === 'undefined') {
       return this._adapter.getInitValues();
     }
-
     return ObjectUtil.get(this._adapter.getInitValues(), field);
   }
-
   getFormProps(keys) {
     return this._adapter.getFormProps(keys);
   }
-
   getFieldExist(field) {
     return Boolean(this.fields.has(field));
   }
-
   _autoScroll(timeout) {
     const {
       autoScrollToError
     } = this.getFormProps();
-
     if (!autoScrollToError) {
       return;
     }
-
     let scrollOpts = {
       behavior: 'smooth',
       block: 'start'
     };
     typeof autoScrollToError === 'object' ? scrollOpts = autoScrollToError : null;
-
     if (timeout) {
       setTimeout(() => this._getErrorFieldAndScroll(scrollOpts), 100);
     } else {
       this._getErrorFieldAndScroll(scrollOpts);
     }
   }
-
   _getErrorFieldAndScroll(scrollOpts) {
     const errorDOM = this._adapter.getAllErrorDOM();
-
     if (errorDOM && errorDOM.length) {
       try {
         const fieldDom = errorDOM[0].parentNode.parentNode;
@@ -794,18 +677,14 @@ export default class FormFoundation extends BaseFoundation {
       } catch (error) {}
     }
   }
-
   scrollToField(field) {
     let scrollOpts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       behavior: 'smooth',
       block: 'start'
     };
-
     if (this.getFieldExist(field)) {
       const fieldDOM = this._adapter.getFieldDOM(field);
-
       scrollIntoView(fieldDOM, scrollOpts);
     }
   }
-
 }