vantui-edit/lib/form/core/formstore.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _reactDom = require("react-dom");

/* eslint-disable @typescript-eslint/ban-ts-comment */

/* 对外接口  */
var formInstanceApi = ['setCallback', 'dispatch', 'registerValidateFields', 'resetFields', 'setFields', 'setFieldsValue', 'getFieldsValue', 'getFieldValue', 'validateFields', 'submit', 'unRegisterValidate', 'registerRequiredMessageCallback', 'validateFieldValue', 'setErrorMessage'];

var isReg = function isReg(value) {
  return value instanceof RegExp;
};

var FormStore = /*#__PURE__*/function () {
  function FormStore(forceUpdate, defaultFormValue) {
    (0, _classCallCheck2.default)(this, FormStore);
    this.FormUpdate = forceUpdate;
    this.model = {};
    this.control = {};
    this.isSchedule = false;
    this.callback = {};
    this.penddingValidateQueue = [];
    this.defaultFormValue = defaultFormValue || {};
    this.requiredMessageCallback = undefined;
    this.multiLevelKeys = [];
  }

  (0, _createClass2.default)(FormStore, [{
    key: "getForm",
    value: function getForm() {
      var _this = this;

      return formInstanceApi.reduce(function (map, item) {
        map[item] = _this[item].bind(_this);
        return map;
      }, {});
    }
  }, {
    key: "registerRequiredMessageCallback",
    value: function registerRequiredMessageCallback(callback) {
      this.requiredMessageCallback = callback;
    }
  }, {
    key: "setCallback",
    value: function setCallback(callback) {
      if (callback) this.callback = callback;
    }
  }, {
    key: "setErrorMessage",
    value: function setErrorMessage(name_, message) {
      var name = Array.isArray(name_) ? name_.join('.') : name_;

      if (this.model[name]) {
        this.model[name].message = message;
        this.model[name].status = 'reject';
        this.FormUpdate();
      } else {
        console.error('form warning: setErrorMessage params.name is not register');
      }
    }
  }, {
    key: "dispatch",
    value: function dispatch(action) {
      if (!action && (0, _typeof2.default)(action) !== 'object') return null;
      var type = action.type;

      for (var _len = arguments.length, arg = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        arg[_key - 1] = arguments[_key];
      }

      if (~formInstanceApi.indexOf(type)) {
        // @ts-ignore
        return this[type].apply(this, arg);
      } else if (typeof this[type] === 'function') {
        // @ts-ignore
        return this[type].apply(this, arg);
      }
    }
  }, {
    key: "registerValidateFields",
    value: function registerValidateFields(name_, control, model) {
      var name = Array.isArray(name_) ? name_.join('.') : name_;

      if (this.defaultFormValue[name]) {
        if (!this.model[name] || this.model[name].value === undefined) {
          model['value'] = this.defaultFormValue[name];
        }
      }

      if (!model['value'] && this.model[name]) model['value'] = this.model[name].value;

      if (model['mutiLevel']) {
        if (!this.multiLevelKeys.includes(name)) {
          this.multiLevelKeys.push(name);
        }
      }

      if (!model['mutiLevel']) {
        var keyIndex = this.multiLevelKeys.indexOf(name);

        if (keyIndex > 0) {
          this.multiLevelKeys.splice(keyIndex, 1);
        }
      }

      var validate = FormStore.createValidate(model);
      this.model[name] = validate;
      this.control[name] = control;
    }
  }, {
    key: "unRegisterValidate",
    value: function unRegisterValidate(name_) {
      var name = Array.isArray(name_) ? name_.join('.') : name_;
      delete this.model[name];
      delete this.control[name];
    }
  }, {
    key: "notifyChange",
    value: function notifyChange(name_, hiddenFormChange) {
      var name = Array.isArray(name_) ? name_.join('.') : name_;
      var controller = this.control[name];
      if (controller) controller === null || controller === void 0 ? void 0 : controller.changeValue();

      if (!hiddenFormChange) {
        var onChange = this.callback.onChange;

        if (onChange) {
          var value = this.model[name].value;
          onChange(FormStore.transformMultilevelData((0, _defineProperty2.default)({}, name, value)), this.getFieldsValue());
        }
      }
    }
  }, {
    key: "setFields",
    value: function setFields(object) {
      if ((0, _typeof2.default)(object) !== 'object') return;
      this.transformSingellevelData(object, this.multiLevelKeys);

      for (var key in this.model) {
        var item = this.model[key];
        this.setValueClearStatus(item, key, item.value, true); // 批量更新hiddenFormChange
      }

      var onChange = this.callback.onChange;

      if (onChange) {
        onChange(object, this.getFieldsValue());
      }
    }
  }, {
    key: "setFieldsValue",
    value: function setFieldsValue(name_, modelValue) {
      var name = Array.isArray(name_) ? name_.join('.') : name_;
      var model = this.model[name];
      if (!model) return false;

      if (toString.call(modelValue) === '[Object, object]' && modelValue.value) {
        var message = modelValue.message,
            rule = modelValue.rule,
            value = modelValue.value;
        if (message) model.message = message;
        if (rule) model.rule = rule;
        if (value && model.value === undefined) model.value = value;
        model.status = 'pendding';
        this.validateFieldValue(name, true);
      } else {
        this.setValueClearStatus(model, name, modelValue);
      }
    }
  }, {
    key: "setValueClearStatus",
    value: function setValueClearStatus(model, name_, value, hiddenFormChange) {
      var name = Array.isArray(name_) ? name_.join('.') : name_;
      model['value'] = value;
      model['status'] = 'pendding';
      this.notifyChange(name, hiddenFormChange);
    } // 扁平数据转多层数据结构

  }, {
    key: "transformSingellevelData",
    value: // 多层级数据结构扁平化
    function transformSingellevelData(data, multiLevelKeys) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      var that = this;

      function unitWork(curKey, dd) {
        if (toString.call(dd) === '[object Object]') {
          if (multiLevelKeys.includes(curKey)) {
            that.model[curKey].value = dd;
          } else {
            for (var key in dd) {
              var value = dd[key];
              unitWork(curKey ? "".concat(curKey, ".").concat(key) : key, value);
            }
          }
        } else if (toString.call(dd) === '[object Array]') {
          if (multiLevelKeys.includes(curKey)) {
            that.model[curKey].value = dd;
          } else {
            for (var i = 0; i < dd.length; i++) {
              var _value = dd[i];
              unitWork(curKey ? "".concat(curKey, ".").concat(i) : "".concat(i), _value);
            }
          }
        } else {
          if (that.model[curKey]) {
            that.model[curKey].value = dd;
          }
        }
      }

      unitWork('', data);
    }
  }, {
    key: "getFieldsValue",
    value: function getFieldsValue() {
      var _this2 = this;

      var formData = {};
      Object.keys(this.model).forEach(function (modelName) {
        formData[modelName] = _this2.model[modelName].value;
      });
      return FormStore.transformMultilevelData(formData);
    }
  }, {
    key: "resetFields",
    value: function resetFields() {
      var _this3 = this;

      Object.keys(this.model).forEach(function (modelName) {
        _this3.setValueClearStatus(_this3.model[modelName], modelName, null);
      });
    }
  }, {
    key: "getFieldModel",
    value: function getFieldModel(name_) {
      var name = Array.isArray(name_) ? name_.join('.') : name_;
      var model = this.model[name];
      return model ? model : {};
    }
  }, {
    key: "getFieldValue",
    value: function getFieldValue(name_) {
      var name = Array.isArray(name_) ? name_.join('.') : name_;
      var model = this.model[name];
      if (!model && this.defaultFormValue[name]) return this.defaultFormValue[name];
      return model ? model.value : null;
    }
  }, {
    key: "validateFieldValue",
    value: function validateFieldValue(name_) {
      var _this4 = this;

      var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
      var name = Array.isArray(name_) ? name_.join('.') : name_;
      var model = this.model[name];
      /* 记录上次状态 */

      var lastStatus = model.status;
      if (!model) return null;
      var required = model.required,
          rules = model.rules,
          value = model.value;
      var status = 'resolve';

      if (required && FormStore.isFieldNull(value)) {
        status = 'reject';

        if (this.requiredMessageCallback) {
          this.model[name].message = this.requiredMessageCallback(this.model[name].label);
        } else {
          this.model[name].message = this.model[name].label + '不能为空';
        }
      }

      for (var i = 0; i < rules.length; i++) {
        var rule = rules[i].rule;
        var message = rules[i].message;

        if (value || value === 0) {
          if (isReg(rule)) {
            status = rule.test(value) ? 'resolve' : 'reject';

            if (status === 'reject') {
              this.model[name].message = message;
              break;
            }
          } else if (typeof rule === 'function') {
            rule(value, function (message) {
              _this4.model[name].message = message;
              status = !message ? 'resolve' : 'reject';
            });

            if (status === 'reject') {
              break;
            }
          }
        }
      }

      model.status = status;

      if (lastStatus !== status || forceUpdate) {
        // 校验的时候不触发form change
        var notify = this.notifyChange.bind(this, name, true);
        this.penddingValidateQueue.push(notify);
      }

      this.scheduleValidate();
      return status;
    }
  }, {
    key: "scheduleValidate",
    value: function scheduleValidate() {
      var _this5 = this;

      if (this.isSchedule) return;
      this.isSchedule = true;
      Promise.resolve().then(function () {
        (0, _reactDom.unstable_batchedUpdates)(function () {
          do {
            var notify = _this5.penddingValidateQueue.shift();

            notify && notify();
          } while (_this5.penddingValidateQueue.length > 0);

          _this5.isSchedule = false;
        });
      });
    }
  }, {
    key: "validateFields",
    value: function validateFields(callback) {
      var _this6 = this;

      // 暂时异步解决更新迟缓问题
      setTimeout(function () {
        var errorsMess = [];
        Object.keys(_this6.model).forEach(function (modelName) {
          var modelStates = _this6.validateFieldValue(modelName, true);

          if (modelStates === 'reject') errorsMess.push(_this6.model[modelName].message);
        });
        callback(errorsMess, _this6.getFieldsValue());
      });
    }
  }, {
    key: "submit",
    value: function submit(cb) {
      var _this7 = this;

      this.validateFields(function (errorMess) {
        var _this7$callback = _this7.callback,
            onFinish = _this7$callback.onFinish,
            onFinishFailed = _this7$callback.onFinishFailed;

        var fieldValues = _this7.getFieldsValue();

        var errs = errorMess.length ? errorMess : null;
        cb && cb(errs, fieldValues);

        if (errs) {
          onFinishFailed && typeof onFinishFailed === 'function' && onFinishFailed(errs);
          return;
        }

        onFinish && typeof onFinish === 'function' && onFinish(errs, _this7.getFieldsValue());
      });
    }
  }], [{
    key: "createValidate",
    value: function createValidate(validateModal) {
      var value = validateModal.value,
          required = validateModal.required,
          rules = validateModal.rules,
          label = validateModal.label;
      return {
        value: value,
        rules: Array.isArray(rules) ? rules : [rules],
        required: required || false,
        status: 'pendding',
        label: label
      };
    }
  }, {
    key: "isFieldNull",
    value: function isFieldNull(value) {
      return value === undefined || value === '' || value === null || Array.isArray(value) && value.length === 0;
    }
  }, {
    key: "transformMultilevelData",
    value: function transformMultilevelData(data) {
      var keys = Object.keys(data);
      var hasMultiLevel = keys.some(function (item) {
        return item.includes('.');
      });

      if (hasMultiLevel) {
        var res = {};

        for (var i = 0; i < keys.length; i++) {
          var key = keys[i];

          if (key) {
            if (!(key !== null && key !== void 0 && key.includes('.'))) {
              res[key] = data[key];
            } else {
              var ks = key.split('.');
              var p = res;

              for (var j = 0; j < ks.length; j++) {
                var k = ks[j];

                if (p[k] && j !== ks.length - 1) {
                  p = p[k];
                } else if (!p[k] && j !== ks.length - 1) {
                  var nextK = ks[j + 1];

                  if (!isNaN(Number(nextK)) && typeof Number(nextK) === 'number') {
                    p[k] = [];
                  } else if (typeof nextK === 'string') {
                    p[k] = {};
                  }

                  p = p[k];
                } else {
                  p[k] = data[key];
                }
              }
            }
          }
        }

        return res;
      } else {
        return data;
      }
    }
  }]);
  return FormStore;
}();

var _default = FormStore;
exports.default = _default;