zp-bee/es/bee-form/store.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _typeof from "@babel/runtime/helpers/esm/typeof";

var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
      d;
  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  }
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};

var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }

  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }

    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }

    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }

    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

import { action, observable, flow, computed, makeObservable } from 'mobx';
import Schema from 'async-validator';
import isEmpty from 'lodash/isEmpty';
import omit from 'lodash/omit';
export var ItemStore = /*#__PURE__*/function () {
  function ItemStore(props) {
    var _this = this;

    _classCallCheck(this, ItemStore);

    this.defaultValue = undefined;
    this.onChangeContext = {};
    this.isChange = false;
    this.source = undefined;
    this.verifying = false;
    this.unionErr = {};

    this.setProps = function (props) {
      var defaultValue = props.defaultValue,
          rules = props.rules,
          parse = props.parse,
          format = props.format;

      _this.setDefaultValue(defaultValue);

      _this.setRules(rules);

      _this.setParse(parse);

      _this.setFormat(format);
    };

    this.setVerifying = function (Verifying) {
      _this.verifying = Verifying;
    };

    this.setUnionErr = function (props) {
      if (_this.isChange) {
        _this.unionErr = Object.assign(Object.assign({}, _this.unionErr), props);
      }
    };

    this.delUnionErr = function (keys) {
      _this.unionErr = omit.apply(void 0, [_this.unionErr].concat(_toConsumableArray(keys)));
    };

    this.setOnChangeContext = function (context) {
      _this.onChangeContext = context || {};
    };

    this.clearOnChangeContext = function () {
      _this.onChangeContext = {};
    };

    this.onChange = function (value) {
      var _a, _b, _c;

      var parseValue;

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

      if (_this.parse && !_this.onChangeContext.noParse) {
        parseValue = _this.parse.apply(_this, [value].concat(args));
      } else if (!isEmpty(value)) {
        if (value instanceof Event) {
          parseValue = value.target.value;
        } else if (value.nativeEvent instanceof Event) {
          parseValue = (_a = value.target.value) !== null && _a !== void 0 ? _a : value.target.checked;
        } else {
          parseValue = value;
        }
      } else {
        parseValue = value;
      }

      if (!_this.isChange) {
        _this.isChange = true;

        _this.formStore.setChangeState(true);
      }

      _this.source = parseValue; // 在值改变后在调用 方便实现自动保存等功能

      (_c = (_b = _this.formStore).onChange) === null || _c === void 0 ? void 0 : _c.call(_b, _this.key, parseValue, value, args);

      _this.validate();

      _this.clearOnChangeContext();
    };

    this.setDefaultValue = function (value) {
      if (!_this.isChange) _this.source = value;
      _this.defaultValue = value;
    };

    this.reset = function () {
      // 没有变更不需要reset
      if (_this.isChange) {
        _this.isChange = false;
        _this.source = _this.defaultValue;
        _this.err = undefined;
        _this.unionErr = {};
      }
    };

    this.validate = flow( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(rootId) {
      var err, e;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!this.isChange) {
                this.isChange = true;
                this.formStore.setChangeState(true);
              }

              if (!this.schema) {
                _context.next = 9;
                break;
              }

              this.setVerifying(true);
              _context.next = 5;
              return this.schema.validate(_defineProperty({}, this.key, this.source)).catch(function (errs) {
                return errs;
              });

            case 5:
              e = _context.sent;

              if (this.isChange) {
                _context.next = 8;
                break;
              }

              return _context.abrupt("return", err);

            case 8:
              if (e) {
                err = e.errors.map(function (item) {
                  return {
                    message: item.message,
                    field: "".concat(rootId || '').concat(rootId ? '.' : '').concat(item.field)
                  };
                });
                this.err = err;
              } else {
                this.err = undefined;
              }

            case 9:
              this.setVerifying(false);
              return _context.abrupt("return", err);

            case 11:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, this);
    }));

    this.setRules = function (rules) {
      _this.rules = rules;
      if (rules) _this.schema = new Schema(_defineProperty({}, _this.key, rules));else _this.schema = undefined;

      if (_this.isChange) {
        _this.validate();
      }
    };

    this.setParse = function (parse) {
      _this.parse = parse;
    };

    this.setFormat = function (format) {
      _this.format = format;
    };

    var key = props.key,
        formStore = props.formStore,
        rest = __rest(props, ["key", "formStore"]);

    this.key = key;
    this.formStore = formStore;
    this.setProps(rest);
    makeObservable(this);
  }

  _createClass(ItemStore, [{
    key: "errors",
    get: function get() {
      var errors = (this.err || []).concat(Object.values(this.unionErr));
      if (isEmpty(errors)) return undefined;
      return errors;
    }
  }, {
    key: "value",
    get: function get() {
      if (this.format) {
        return this.format(this.source);
      }

      return this.source;
    }
  }, {
    key: "checkResult",
    get: function get() {
      if (this.verifying) return 'loading';
      if (this.errors) return 'error';
      if (this.isChange) return 'success';
      return 'default';
    }
  }]);

  return ItemStore;
}();

__decorate([observable], ItemStore.prototype, "isChange", void 0);

__decorate([observable], ItemStore.prototype, "source", void 0);

__decorate([observable], ItemStore.prototype, "err", void 0);

__decorate([observable], ItemStore.prototype, "verifying", void 0);

__decorate([observable], ItemStore.prototype, "unionErr", void 0);

__decorate([computed], ItemStore.prototype, "errors", null);

__decorate([computed], ItemStore.prototype, "value", null);

__decorate([computed], ItemStore.prototype, "checkResult", null);

__decorate([observable], ItemStore.prototype, "rules", void 0);

__decorate([observable], ItemStore.prototype, "format", void 0);

__decorate([action], ItemStore.prototype, "setVerifying", void 0);

__decorate([action], ItemStore.prototype, "setUnionErr", void 0);

__decorate([action], ItemStore.prototype, "delUnionErr", void 0);

__decorate([action], ItemStore.prototype, "onChange", void 0);

__decorate([action], ItemStore.prototype, "setDefaultValue", void 0);

__decorate([action], ItemStore.prototype, "reset", void 0);

var FormStore = /*#__PURE__*/function () {
  function FormStore(props) {
    var _this2 = this;

    _classCallCheck(this, FormStore);

    this.disabled = false;
    this.isChange = false;
    this.validateOnlyFirst = false;

    this.setDisabled = function (disabled) {
      _this2.disabled = disabled;
    };

    this.unionValidatorDict = {};

    this.setChangeState = function (isChange) {
      _this2.isChange = isChange;
    };

    this.addItemStore = function (component) {
      if (_this2.itemStores[component.key]) return false;else {
        _this2.itemStores[component.key] = component;
        return true;
      }
    };

    this.removeItemStore = function (component) {
      if (_this2.itemStores[component.key]) {
        delete _this2.itemStores[component.key];
        return true;
      } else {
        return false;
      }
    };

    this.submit = function (callback) {
      var values = _this2.getValues();

      _this2.validate().then(function (errs) {
        callback({
          values: values,
          errs: errs
        });
      });
    };

    this.reset = function () {
      for (var key in _this2.itemStores) {
        if (Reflect.has(_this2.itemStores, key)) {
          _this2.itemStores[key].reset();
        }
      }

      _this2.setChangeState(false);
    };

    this.getValue = function (key) {
      if (_this2.itemStores[key]) {
        return _this2.itemStores[key].source;
      }
    };

    this.getValues = function (keys) {
      var values = {};

      if (!Array.isArray(keys)) {
        Object.keys(_this2.itemStores).forEach(function (key) {
          values[key] = _this2.getValue(key);
        });
      } else {
        var _iterator = _createForOfIteratorHelper(keys),
            _step;

        try {
          for (_iterator.s(); !(_step = _iterator.n()).done;) {
            var key = _step.value;
            values[key] = _this2.getValue(key);
          }
        } catch (err) {
          _iterator.e(err);
        } finally {
          _iterator.f();
        }
      }

      return values;
    };

    this.setValue = function (key, value, onChangeContext) {
      var instance = _this2.itemStores[key];

      if (instance) {
        instance.setOnChangeContext(onChangeContext || {
          noParse: true
        });
        instance.onChange(value);
      }
    };

    this.setValues = function (props, onChangeContext) {
      Object.keys(props).forEach(function (key) {
        _this2.setValue(key, props[key], onChangeContext);
      });
    };

    this.setAllValues = function (props, onChangeContext) {
      for (var key in _this2.itemStores) {
        if (Reflect.has(_this2.itemStores, key)) {
          if (props[key]) {
            _this2.setValue(key, props[key], onChangeContext);
          } else {
            _this2.setValue(key, undefined, onChangeContext);
          }
        }
      }
    };

    this.validate = function (rootId) {
      return __awaiter(_this2, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
        var _this3 = this;

        var errs, key, itemStore, errors, unionValidators, _iterator2, _step2, unionValidator, keys, errList;

        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                errs = {};

                if (!this.validateOnlyFirst) {
                  _context2.next = 38;
                  break;
                }

                _context2.t0 = _regeneratorRuntime.keys(this.itemStores);

              case 3:
                if ((_context2.t1 = _context2.t0()).done) {
                  _context2.next = 36;
                  break;
                }

                key = _context2.t1.value;

                if (!Reflect.has(this.itemStores, key)) {
                  _context2.next = 34;
                  break;
                }

                itemStore = this.itemStores[key]; // eslint-disable-next-line

                _context2.next = 9;
                return itemStore.validate(rootId);

              case 9:
                errors = _context2.sent;

                if (!errors) {
                  _context2.next = 13;
                  break;
                }

                errs[itemStore.key] = itemStore.errors;
                return _context2.abrupt("return", errs);

              case 13:
                unionValidators = this.unionValidatorDict[key];

                if (!Array.isArray(unionValidators)) {
                  _context2.next = 34;
                  break;
                }

                _iterator2 = _createForOfIteratorHelper(unionValidators);
                _context2.prev = 16;

                _iterator2.s();

              case 18:
                if ((_step2 = _iterator2.n()).done) {
                  _context2.next = 26;
                  break;
                }

                unionValidator = _step2.value;
                unionValidator();

                if (!itemStore.errors) {
                  _context2.next = 24;
                  break;
                }

                errs[itemStore.key] = itemStore.errors;
                return _context2.abrupt("return", errs);

              case 24:
                _context2.next = 18;
                break;

              case 26:
                _context2.next = 31;
                break;

              case 28:
                _context2.prev = 28;
                _context2.t2 = _context2["catch"](16);

                _iterator2.e(_context2.t2);

              case 31:
                _context2.prev = 31;

                _iterator2.f();

                return _context2.finish(31);

              case 34:
                _context2.next = 3;
                break;

              case 36:
                _context2.next = 43;
                break;

              case 38:
                keys = Object.keys(this.itemStores);
                _context2.next = 41;
                return Promise.all(keys.map(function (key) {
                  return _this3.validateValue(key, rootId);
                }));

              case 41:
                errList = _context2.sent;
                keys.forEach(function (key, i) {
                  var errMessages = errList[i];

                  if (errMessages) {
                    Object.assign(errs, _defineProperty({}, key, errMessages));
                  }
                });

              case 43:
                if (!isEmpty(errs)) {
                  _context2.next = 45;
                  break;
                }

                return _context2.abrupt("return", undefined);

              case 45:
                return _context2.abrupt("return", errs);

              case 46:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this, [[16, 28, 31, 34]]);
      }));
    };

    this.validateValue = function (key, rootId) {
      return __awaiter(_this2, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
        var unionValidFuncs, _iterator3, _step3, unionValidator;

        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                if (this.itemStores[key]) {
                  _context3.next = 2;
                  break;
                }

                return _context3.abrupt("return", undefined);

              case 2:
                _context3.next = 4;
                return this.itemStores[key].validate(rootId);

              case 4:
                unionValidFuncs = this.unionValidatorDict[key];

                if (Array.isArray(unionValidFuncs)) {
                  _iterator3 = _createForOfIteratorHelper(unionValidFuncs);

                  try {
                    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
                      unionValidator = _step3.value;
                      unionValidator();
                    }
                  } catch (err) {
                    _iterator3.e(err);
                  } finally {
                    _iterator3.f();
                  }
                }

                return _context3.abrupt("return", this.itemStores[key].errors);

              case 7:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3, this);
      }));
    };

    this.validateValues = function (keys, rootId) {
      return __awaiter(_this2, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
        var _this4 = this;

        var errs, promiseErrors, errors;
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                errs = {};
                promiseErrors = keys.map(function (errMessages) {
                  return _this4.validateValue(errMessages, rootId);
                });
                _context4.next = 4;
                return Promise.all(promiseErrors);

              case 4:
                errors = _context4.sent;
                keys.forEach(function (key, i) {
                  errs[key] = errors[i];
                });
                return _context4.abrupt("return", errs);

              case 7:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4);
      }));
    };

    this.itemStores = props.initInstances(this);
    makeObservable(this);
  }

  _createClass(FormStore, [{
    key: "errors",
    get: function get() {
      var _this5 = this;

      var errs = Object.keys(this.itemStores).reduce(function (list, key) {
        var _a;

        var errors = (_a = _this5.itemStores[key]) === null || _a === void 0 ? void 0 : _a.errors;

        if (!errors) {
          return list;
        }

        return list.concat(errors);
      }, []);
      if (isEmpty(errs)) return undefined;
      return errs;
    }
  }]);

  return FormStore;
}();

__decorate([observable], FormStore.prototype, "itemStores", void 0);

__decorate([observable], FormStore.prototype, "disabled", void 0);

__decorate([observable], FormStore.prototype, "isChange", void 0);

__decorate([action], FormStore.prototype, "setDisabled", void 0);

__decorate([computed], FormStore.prototype, "errors", null);

__decorate([action], FormStore.prototype, "setChangeState", void 0);

__decorate([action], FormStore.prototype, "addItemStore", void 0);

__decorate([action], FormStore.prototype, "removeItemStore", void 0);

export default FormStore;