@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/form/foundation.js

@@ -0,0 +1,845 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _values2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _toPath2 = _interopRequireDefault(require("lodash/toPath"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var ObjectUtil = _interopRequireWildcard(require("../utils/object"));
+
+var _isPromise = _interopRequireDefault(require("../utils/isPromise"));
+
+var _utils = require("./utils");
+
+var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable prefer-const, max-len */
+class FormFoundation extends _foundation.default {
+  constructor(adapter) {
+    var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20;
+
+    super((0, _assign.default)({}, adapter));
+    /*
+        Also need to read initValue here, because the Form level can set the initial value,
+        and the Field level can also set the initial value.
+        The field set in the Form does not necessarily have a Field entity,
+        so you cannot completely rely on the register moment to set the initial value
+         这里也需要读一次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,
+      // dirty: false,
+
+    }; // Map store all fields
+    // key: fieldName
+    // value:  { field, fieldApi, keepState, initValue}
+
+    this.fields = new _map.default(); // Record all registered fields
+
+    this.registered = {}; // Record all registered ArrayField
+
+    this.registeredArrayField = new _map.default();
+    this.register = (0, _bind.default)(_context = this.register).call(_context, this);
+    this.unRegister = (0, _bind.default)(_context2 = this.unRegister).call(_context2, this);
+    this.registerArrayField = (0, _bind.default)(_context3 = this.registerArrayField).call(_context3, this);
+    this.unRegisterArrayField = (0, _bind.default)(_context4 = this.unRegisterArrayField).call(_context4, this);
+    this.getArrayField = (0, _bind.default)(_context5 = this.getArrayField).call(_context5, this);
+    this.updateArrayField = (0, _bind.default)(_context6 = this.updateArrayField).call(_context6, this);
+    this.getField = (0, _bind.default)(_context7 = this.getField).call(_context7, this);
+    this.setValues = (0, _bind.default)(_context8 = this.setValues).call(_context8, this);
+    this.updateStateValue = (0, _bind.default)(_context9 = this.updateStateValue).call(_context9, this);
+    this.updateStateError = (0, _bind.default)(_context10 = this.updateStateError).call(_context10, this);
+    this.updateStateTouched = (0, _bind.default)(_context11 = this.updateStateTouched).call(_context11, this);
+    this.getFormState = (0, _bind.default)(_context12 = this.getFormState).call(_context12, this);
+    this.getValue = (0, _bind.default)(_context13 = this.getValue).call(_context13, this);
+    this.getError = (0, _bind.default)(_context14 = this.getError).call(_context14, this);
+    this.getTouched = (0, _bind.default)(_context15 = this.getTouched).call(_context15, this);
+    this.getInitValues = (0, _bind.default)(_context16 = this.getInitValues).call(_context16, this);
+    this.getInitValue = (0, _bind.default)(_context17 = this.getInitValue).call(_context17, this);
+    this.getFormProps = (0, _bind.default)(_context18 = this.getFormProps).call(_context18, this);
+    this.getFieldExist = (0, _bind.default)(_context19 = this.getFieldExist).call(_context19, this);
+    this.scrollToField = (0, _bind.default)(_context20 = this.scrollToField).call(_context20, this);
+  }
+
+  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
+    } else {
+      const allowEmpty = fieldStuff.allowEmpty || false;
+      const opts = {
+        notNotify: true,
+        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
+
+      if (!allowEmpty && fieldValue === '') {
+        fieldValue = undefined;
+      }
+
+      this.updateStateValue(field, fieldValue, opts);
+
+      if (fieldState.error) {
+        this.updateStateError(field, fieldState.error, opts);
+      }
+    } // this.log(this.fields);
+
+  }
+
+  unRegister(field) {
+    const targetField = this.fields.get(field); // delete data
+
+    try {
+      if (!targetField.keepState) {
+        ObjectUtil.remove((0, _values2.default)(this.data), field);
+        ObjectUtil.remove(this.data.errors, field);
+        ObjectUtil.remove(this.data.touched, field);
+      }
+    } catch (error) {
+      console.error("some thing wrong when unregister field:".concat(field));
+    } // delete field
+
+
+    this.fields.delete(field);
+
+    this._adapter.notifyChange(this.data);
+
+    this._adapter.forceUpdate();
+  } // 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 = (0, _assign.default)((0, _assign.default)({}, this.registeredArrayField.get(arrayField)), updateValue);
+    this.registeredArrayField.set(arrayField, mergeVal);
+  }
+
+  validate(fieldPaths) {
+    const {
+      validateFields
+    } = this.getProps();
+
+    if (validateFields && (0, _isFunction2.default)(validateFields)) {
+      return this._formValidate();
+    } else {
+      return this._fieldsValidate(fieldPaths);
+    }
+  } // form level validate
+
+
+  _formValidate() {
+    const {
+      values
+    } = this.data;
+    const {
+      validateFields
+    } = this.getProps();
+    return new _promise.default((resolve, reject) => {
+      let maybePromisedErrors;
+
+      try {
+        maybePromisedErrors = validateFields(values);
+      } catch (errors) {
+        // error throw by sync validate directly
+        maybePromisedErrors = errors;
+      }
+
+      if (!maybePromisedErrors) {
+        resolve(values);
+        this.injectErrorToField({});
+      } else if ((0, _isPromise.default)(maybePromisedErrors)) {
+        maybePromisedErrors.then(result => {
+          // validate success，clear error
+          if (!result) {
+            resolve(values);
+            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
+
+
+  _fieldsValidate(fieldPaths) {
+    const {
+      values
+    } = this.data; // When there is no custom validation function at Form level, perform validation of each Field
+
+    return new _promise.default((resolve, reject) => {
+      let promiseSet = [];
+
+      const targetFields = this._getOperateFieldMap(fieldPaths);
+
+      (0, _forEach.default)(targetFields).call(targetFields, (field, fieldPath) => {
+        // Call each fieldApi for verification
+        const fieldValue = this.getValue(fieldPath); // When centralized verification, no need to trigger forceUpdate and notify
+
+        const opts = {
+          notNotify: true,
+          notUpdate: true
+        };
+        const validateResult = field.fieldApi.validate(fieldValue, opts);
+        promiseSet.push(validateResult);
+        field.fieldApi.setTouched(true, opts);
+      });
+
+      _promise.default.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.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);
+    });
+  } // All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
+  // input => output:
+  //      a  => a[0]、a[1]
+  //      b  => b.type、b.name[3]、b.name[2]
+
+
+  _getNestedField(path) {
+    var _context21;
+
+    const allRegisterField = this.fields;
+    const allFieldPath = (0, _map2.default)(_context21 = [...allRegisterField]).call(_context21, item => item[0]);
+    let nestedFieldPath = new _map.default();
+    (0, _forEach.default)(allFieldPath).call(allFieldPath, item => {
+      let itemPath = (0, _toPath2.default)(item);
+      let targetPath = (0, _toPath2.default)(path);
+
+      if (itemPath[0] === targetPath[0]) {
+        const realField = allRegisterField.get(item);
+        nestedFieldPath.set(item, realField);
+      }
+    });
+    return nestedFieldPath;
+  } // get all operate fields, called by validate() / reset()
+
+
+  _getOperateFieldMap(fieldPaths) {
+    let targetFields = new _map.default();
+
+    if (!(0, _isUndefined2.default)(fieldPaths)) {
+      // reset or validate spcific fields
+      (0, _forEach.default)(fieldPaths).call(fieldPaths, 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'])
+
+        if ((0, _isUndefined2.default)(field)) {
+          const nestedFields = this._getNestedField(path);
+
+          targetFields = new _map.default([...targetFields, ...nestedFields]);
+        } else {
+          targetFields.set(path, field);
+        }
+      });
+    } else {
+      // reset or validate all fields
+      targetFields = this.fields;
+    }
+
+    return targetFields;
+  } // Reset the entire form, reset all fields and remove validation results
+
+
+  reset(fieldPaths) {
+    const targetFields = this._getOperateFieldMap(fieldPaths);
+
+    (0, _forEach.default)(targetFields).call(targetFields, field => {
+      field.fieldApi.reset();
+    });
+
+    if (this.registeredArrayField.size) {
+      this._resetArrayField();
+    }
+
+    this._adapter.notifyChange(this.data);
+
+    this._adapter.forceUpdate();
+
+    this._adapter.notifyReset();
+  }
+
+  _resetArrayField() {
+    var _context22;
+
+    /*
+        When Reset, arrayField needs to be processed separately. Restore the key/value of arrayField in formState according to the initial value
+        Update the key inside the arrayField to make it actively renderer
+        Reset时，arrayField需要单独处理, 根据初始值还原 arrayField在formState中的key/value, 更新 arrayField内部的key，使其主动rerender
+    */
+    const arrayFieldPaths = [...(0, _keys.default)(_context22 = this.registeredArrayField).call(_context22)];
+    (0, _forEach.default)(arrayFieldPaths).call(arrayFieldPaths, path => {
+      const arrayFieldState = this.registeredArrayField.get(path);
+      const arrayFieldInitValue = arrayFieldState.initValue;
+      this.updateStateValue(path, arrayFieldInitValue, {
+        notNotify: true,
+        notUpdate: true
+      });
+      this.updateArrayField(path, {
+        updateKey: new Date().valueOf()
+      });
+    });
+  } // After calling the form's custom validateFields function, reject the returned error to the corresponding field
+  // 调用了Form的自定义validateFields函数后，将返回的错误展示到对应的field中
+
+
+  injectErrorToField(errors) {
+    var _context23;
+
+    (0, _forEach.default)(_context23 = this.fields).call(_context23, field => {
+      const fieldError = ObjectUtil.get(errors, field.field);
+      const opts = {
+        notNotify: true,
+        notUpdate: true
+      };
+      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((0, _values2.default)(this.data), field);
+        break;
+
+      case !isAllField && needClone:
+        fieldValue = ObjectUtil.get((0, _values2.default)(this.data), field);
+        result = this._adapter.cloneDeep(fieldValue);
+        break;
+
+      case isAllField && !needClone:
+        result = (0, _assign.default)({}, (0, _values2.default)(this.data));
+        break;
+
+      case isAllField && needClone:
+        result = this._adapter.cloneDeep((0, _values2.default)(this.data));
+        break;
+
+      default:
+        break;
+    }
+
+    return result;
+  }
+
+  setValues(values, _ref) {
+    var _context24;
+
+    let {
+      isOverride = false
+    } = _ref;
+
+    const _values = this._adapter.cloneDeep(values);
+
+    (0, _forEach.default)(_context24 = this.fields).call(_context24, 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
+      // 调用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 (this.registeredArrayField.size) {
+      var _context25;
+
+      const arrayFieldPaths = [...(0, _keys.default)(_context25 = this.registeredArrayField).call(_context25)];
+      (0, _forEach.default)(arrayFieldPaths).call(arrayFieldPaths, path => {
+        this.updateArrayField(path, {
+          updateKey: new Date().valueOf()
+        });
+      });
+    } // When isOverrid is true, there may be a non-existent field in the values passed in, directly synchronized to formState.values
+    // 当isOverrid为true，传入的values中可能存在不存在的field时，直接将其同步到formState.values中
+
+
+    if (isOverride) {
+      this.data.values = _values;
+    } // After completing the assignment, the unified callback can be done once.
+    // 在完成赋值后，统一回调一次即可
+
+
+    this._adapter.notifyChange(this.data);
+
+    this._adapter.notifyValueChange((0, _values2.default)(this.data), (0, _assign.default)({}, values));
+
+    this._adapter.forceUpdate();
+  } // update formState value
+
+
+  updateStateValue(field, value, opts) {
+    const notNotify = opts && opts.notNotify;
+    const notUpdate = opts && opts.notUpdate;
+    const fieldAllowEmpty = opts && opts.fieldAllowEmpty;
+    /**
+     * 当Form.allowEmpty为true时，所有的field，key都会在formState.values中出现，如果值为空那么就是undefined
+     * 当Form.allowEmpty为false时，只有有值的field，key才会在formState.values中出现
+     * 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 allowEmpty = fieldAllowEmpty ? fieldAllowEmpty : formAllowEmpty;
+    ObjectUtil.set((0, _values2.default)(this.data), field, value, allowEmpty);
+    /**
+     * When registering, setValue called when Field initValue is synchronized to FormState should not trigger notify
+     * but need to trigger forceUpdate, otherwise useFormState, useFieldState initial rendering will have problems
+     *
+     * register时，Field中同步initValue到FormState时调用的setValue不应该触发notify
+     * 但需要触发forceUpdate，否则useFormState、useFieldState初始渲染会有问题
+     */
+
+    if (!notNotify) {
+      this._adapter.notifyChange(this.data);
+
+      this._adapter.notifyValueChange((0, _values2.default)(this.data), {
+        [field]: value
+      });
+    }
+
+    if (!notUpdate) {
+      this._adapter.forceUpdate();
+    }
+  } // get touched from formState
+
+
+  getTouched(field) {
+    if (typeof field === 'undefined') {
+      return this.data.touched;
+    }
+
+    return ObjectUtil.get(this.data.touched, field);
+  } // update formState touched
+
+
+  updateStateTouched(field, isTouched, opts) {
+    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();
+    }
+  } // get error from formState
+
+
+  getError(field) {
+    if (typeof field === 'undefined') {
+      return this.data.errors;
+    }
+
+    return ObjectUtil.get(this.data.errors, field);
+  } // update formState error
+
+
+  updateStateError(field, error, opts) {
+    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
+    // 集中validate时，引起的setError不需要触发notify，否则会过于频繁调用，有多少个field就调用了多少次
+
+    if (!notNotify) {
+      this._adapter.notifyChange(this.data);
+    }
+
+    if (!notUpdate) {
+      this._adapter.forceUpdate();
+    }
+  } // 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 newValue = this._adapter.cloneDeep(value);
+
+      if (fieldApi) {
+        // If there is a corresponding Field entity, call FieldApi to update the value
+        fieldApi.setValue(newValue, opts);
+      } else {
+        // If you reset an entire array, such as Array Field, the array as a whole may actually have no Field entities (but each array element corresponds to a Field)
+        // At this time, first modify formState directly, then find out the subordinate fields and drive them to update
+        // Eg: peoples: [0, 2, 3]. Each value of the peoples array corresponds to an Input Field
+        // 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) {
+          (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
+            let fieldPath = fieldStaff.field;
+            let newFieldVal = ObjectUtil.get((0, _values2.default)(this.data), fieldPath);
+            fieldStaff.fieldApi.setValue(newFieldVal, opts);
+          });
+        } // 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()
+          });
+        }
+      }
+    };
+
+    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) {
+          (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
+            let fieldPath = fieldStaff.field;
+            let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
+            fieldStaff.fieldApi.setError(newFieldError, opts);
+          });
+        }
+
+        if (this.getArrayField(field)) {
+          this.updateArrayField(field, {
+            updateKey: new Date().valueOf()
+          });
+        }
+      }
+    };
+
+    const setTouched = (field, isTouched, opts) => {
+      const fieldApi = this.fields.get(field) ? this.fields.get(field).fieldApi : undefined; // touched is boolean variable, no need to execu deepClone like setValue
+
+      if (fieldApi) {
+        fieldApi.setTouched(isTouched, opts);
+      } else {
+        this.updateStateTouched(field, isTouched, opts);
+
+        let nestedFields = this._getNestedField(field);
+
+        if (nestedFields.size) {
+          (0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
+            let fieldPath = fieldStaff.field;
+            let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
+            fieldStaff.fieldApi.setTouched(newFieldTouch, opts);
+          });
+        }
+
+        if (this.getArrayField(field)) {
+          this.updateArrayField(field, {
+            updateKey: new Date().valueOf()
+          });
+        }
+      }
+    };
+
+    return {
+      setValue,
+      setError,
+      setTouched
+    };
+  } // For Field and ArrayField to read and modify FormState
+
+
+  getModifyFormStateApi() {
+    return {
+      register: this.register,
+      unRegister: this.unRegister,
+      updateStateValue: this.updateStateValue,
+      updateStateError: this.updateStateError,
+      updateStateTouched: this.updateStateTouched,
+      getValue: this.getValue,
+      getError: this.getError,
+      getTouched: this.getTouched,
+      getInitValues: this.getInitValues,
+      getInitValue: this.getInitValue,
+      getFormProps: this.getFormProps,
+      getField: this.getField,
+      registerArrayField: this.registerArrayField,
+      unRegisterArrayField: this.unRegisterArrayField,
+      getArrayField: this.getArrayField,
+      updateArrayField: this.updateArrayField
+    };
+  } // Form APIs for external use, exposed to the user
+
+
+  getFormApi() {
+    const fieldSetterApi = this.getFieldSetterApi();
+    return (0, _assign.default)((0, _assign.default)({}, fieldSetterApi), {
+      reset: fields => this.reset(fields),
+      validate: fields => this.validate(fields),
+      getValue: field => this.getValue(field, {
+        needClone: true
+      }),
+      getValues: () => this.getValue(undefined, {
+        needClone: true
+      }),
+      getFormState: () => this.getFormState(true),
+      getInitValue: field => this.getInitValue(field),
+      getInitValues: () => this.getInitValues(),
+      getTouched: field => this.getTouched(field),
+      getError: field => this.getError(field),
+      setValues: (values, opts) => this.setValues(values, opts || {
+        isOverride: false
+      }),
+      submitForm: () => this.submit(),
+      getFieldExist: field => this.getFieldExist(field),
+      scrollToField: (field, scrollOpts) => this.scrollToField(field, scrollOpts)
+    });
+  }
+
+  getFormState() {
+    let needClone = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+    // NOTES：这里如果直接返回this.data，forceUpdae触发Formrerender时，通过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
+        But if the users use formApi.getFormState(), the behavior is unpredictable, and invasive modifications may be performed,
+        so deep clones are used for isolation.
+        对deepClone进行区分的原因：semi调用getFormState内部消费时，不会对formState的值进行修改，所以无需深克隆，节约开销
+        但如果是业务方用formApi调用getFormState时，行为无法预料，有可能会进行侵入式修改，所以用深克隆进行隔离
+    */
+    if (!needClone) {
+      return (0, _assign.default)({}, this.data);
+    } else {
+      return this._adapter.cloneDeep(this.data);
+    }
+  }
+
+  _isValid(targetFields) {
+    let valid = true;
+
+    if (!targetFields) {
+      valid = Boolean(ObjectUtil.empty(this.data.errors));
+    } else {
+      // when trigger partial validate
+      const targetFieldStr = [...(0, _keys.default)(targetFields).call(targetFields)];
+      (0, _forEach.default)(targetFieldStr).call(targetFieldStr, fieldStr => {
+        const fieldError = ObjectUtil.get(this.data.errors, fieldStr);
+
+        if (!(0, _utils.isValid)(fieldError)) {
+          valid = false;
+        }
+      });
+    }
+
+    return valid;
+  } // 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) {
+      (0, _setTimeout2.default)(() => 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;
+        (0, _scrollIntoViewIfNeeded.default)(fieldDom, scrollOpts);
+      } 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);
+
+      (0, _scrollIntoViewIfNeeded.default)(fieldDOM, scrollOpts);
+    }
+  }
+
+}
+
+exports.default = FormFoundation;