zp-bee/lib/bee-form/hooks.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useUpdateEffectByCount = useUpdateEffectByCount;
exports.useUpdateEffect = useUpdateEffect;
exports.useStore = useStore;
exports.useAddItemStore = useAddItemStore;
exports.useAutoLink = useAutoLink;
exports.useAutoWired = useAutoWired;
exports.useForm = useForm;

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

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

var _react = _interopRequireWildcard(require("react"));

var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));

var _utils = require("./utils");

var _AutoWired = _interopRequireDefault(require("./AutoWired"));

var _Form = _interopRequireDefault(require("./Form"));

var _Item = _interopRequireDefault(require("./Item"));

function useUpdateEffectByCount(effect, deps) {
  var num = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  var count = (0, _react.useRef)(0);
  return (0, _react.useEffect)(function () {
    if (count.current < num) {
      count.current += 1;
    } else return effect();
  }, deps);
}

function useUpdateEffect(effect, deps) {
  return useUpdateEffectByCount(effect, deps, 1);
}

function useStore(
/**
 * 表单配置
 */
formConfigs, depsOrOptions, deps) {
  var options = Array.isArray(depsOrOptions) ? undefined : depsOrOptions;
  var realDeps = Array.isArray(depsOrOptions) ? depsOrOptions : deps;

  var _useMemo = (0, _react.useMemo)(function () {
    return (0, _utils.parseFormConfigs)(formConfigs);
  }, []),
      formStore = _useMemo.formStore;

  useUpdateEffect(function () {
    for (var key in formStore.itemStores) {
      if (Reflect.has(formStore.itemStores, key)) {
        if (!formConfigs[key]) {
          // 依赖更新后处理 删除不需要的 subStore
          formStore.removeItemStore(formStore.itemStores[key]);
        } else {
          // 依赖更新后处理修改 subStore,幂等
          formStore.itemStores[key].setProps(formConfigs[key]);
        }
      }
    } // 依赖更新后处理 新增的 subStore


    for (var _key in formConfigs) {
      if (Reflect.has(formConfigs, _key)) {
        if (!formStore.itemStores[_key]) {
          var componentStore = (0, _utils.configToItemStore)(Object.assign({
            key: _key,
            formStore: formStore
          }, formConfigs[_key]));
          formStore.addItemStore(componentStore);
        }
      }
    }
  }, realDeps);
  useAutoLink(formStore, options, realDeps);
  return formStore;
}
/**
 * 在现有的FormStore响应时的增加ItemStore
 * @param formStore
 * @param formConfigs
 * @param deps
 * @param options
 */


function useAddItemStore(formStore,
/**
 * 表单配置
 */
formConfigs) {
  var deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  var
  /**
   * 可选配置,目前支持交联验证,交联handle
   */
  options = arguments.length > 3 ? arguments[3] : undefined;
  (0, _react.useEffect)(function () {
    var componentStores = (0, _utils.parseAddFormConfigs)(formStore, formConfigs);
    return function () {
      Object.values(componentStores).forEach(function (subStore) {
        formStore.removeItemStore(subStore);
      });
    };
  }, deps);
  useAutoLink(formStore, options, deps);
}

function useAutoLink(formStore, options) {
  var deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  var autoValidatorMap = (0, _react.useMemo)(function () {
    if (options && options.autoValidate) {
      if (Array.isArray(options.autoValidate)) {
        return (0, _toConsumableArray2.default)(Array(options.autoValidate.length)).map(function (_, i) {
          return {
            key: (0, _uniqueId.default)("".concat(options.autoValidate[i].primaryKey, "-")),
            primaryKey: options.autoValidate[i].primaryKey
          };
        });
      } else {
        return [{
          key: (0, _uniqueId.default)("".concat(options.autoValidate.primaryKey, "-")),
          primaryKey: options.autoValidate.primaryKey
        }];
      }
    }

    return [];
  }, deps);
  (0, _react.useEffect)(function () {
    var unListen = []; // 处理 autoValidator 注册

    if (options && options.autoValidate) {
      if (Array.isArray(options.autoValidate)) {
        var i = 0;

        var _iterator = (0, _createForOfIteratorHelper2.default)(options.autoValidate),
            _step;

        try {
          for (_iterator.s(); !(_step = _iterator.n()).done;) {
            var autoValidator = _step.value;
            var listen = (0, _utils.createUnionValidate)(autoValidator, formStore, autoValidatorMap[i].key);
            unListen.push(listen);
            i += 1;
          }
        } catch (err) {
          _iterator.e(err);
        } finally {
          _iterator.f();
        }
      } else {
        var _listen = (0, _utils.createUnionValidate)(options.autoValidate, formStore, autoValidatorMap[0].key);

        unListen.push(_listen);
      }
    } // 处理 autoHandle 注册


    if (options && options.autoHandle) {
      if (Array.isArray(options.autoHandle)) {
        var _iterator2 = (0, _createForOfIteratorHelper2.default)(options.autoHandle),
            _step2;

        try {
          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
            var autoHandle = _step2.value;

            var _listen2 = (0, _utils.createAutoHandle)(autoHandle, formStore);

            unListen.push(_listen2);
          }
        } catch (err) {
          _iterator2.e(err);
        } finally {
          _iterator2.f();
        }
      } else {
        var _listen3 = (0, _utils.createAutoHandle)(options.autoHandle, formStore);

        unListen.push(_listen3);
      }
    }

    return function () {
      var _iterator3 = (0, _createForOfIteratorHelper2.default)(unListen),
          _step3;

      try {
        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
          var _listen4 = _step3.value;

          _listen4();
        }
      } catch (err) {
        _iterator3.e(err);
      } finally {
        _iterator3.f();
      }
    };
  }, deps);
  (0, _react.useEffect)(function () {
    // 处理 autoValidator,创建store内的validator方便主动调用
    if (options && options.autoValidate) {
      if (Array.isArray(options.autoValidate)) {
        var i = 0;

        var _iterator4 = (0, _createForOfIteratorHelper2.default)(options.autoValidate),
            _step4;

        try {
          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
            var autoValidator = _step4.value;
            var target = formStore.unionValidatorDict[autoValidator.primaryKey];

            if (Array.isArray(target)) {
              target.push((0, _utils.createUnionValidator)(autoValidator, formStore, autoValidatorMap[i].key));
            } else {
              // eslint-disable-next-line no-param-reassign
              formStore.unionValidatorDict[autoValidator.primaryKey] = [(0, _utils.createUnionValidator)(autoValidator, formStore, autoValidatorMap[i].key)];
            }

            i += 1;
          }
        } catch (err) {
          _iterator4.e(err);
        } finally {
          _iterator4.f();
        }
      } else {
        // eslint-disable-next-line no-param-reassign
        formStore.unionValidatorDict[options.autoValidate.primaryKey] = [(0, _utils.createUnionValidator)(options.autoValidate, formStore, autoValidatorMap[0].key)];
      }
    } // 生命周期结束删除unionValidator及其验证结果,但是不验证新的validator


    return function () {
      // eslint-disable-next-line no-param-reassign
      formStore.unionValidatorDict = {};
      autoValidatorMap.forEach(function (autoValidatorMap) {
        var componentStore = formStore.itemStores[autoValidatorMap.primaryKey];

        if (componentStore) {
          componentStore.delUnionErr([autoValidatorMap.key]);
        }
      });
    };
  }, deps);
}
/**
 *  只是为了方便类型验证
 * @param store store
 */


function useAutoWired(store) {
  return (0, _react.useMemo)(function () {
    var AutoWiredHelp = _AutoWired.default;
    return function (props) {
      return /*#__PURE__*/_react.default.createElement(AutoWiredHelp, Object.assign({
        store: store
      }, props));
    };
  }, [store]);
}
/**
 * 只是为了方便类型验证, 利用store校验id是否匹配，达到类型安全的目的
 * @param store store
 */


function useForm(store) {
  return (0, _react.useMemo)(function () {
    var FormHelp = function FormHelp(props) {
      return /*#__PURE__*/_react.default.createElement(_Form.default, Object.assign({
        store: store
      }, props));
    };

    var ItemHelp = function ItemHelp(props) {
      return /*#__PURE__*/_react.default.createElement(_Item.default, Object.assign({
        store: store
      }, props));
    };

    var AutoWiredHelp = function AutoWiredHelp(props) {
      return /*#__PURE__*/_react.default.createElement(_AutoWired.default, Object.assign({
        store: store
      }, props));
    };

    return {
      Form: FormHelp,
      Item: ItemHelp,
      AutoWired: AutoWiredHelp
    };
  }, [store]);
}