zp-bee/lib/bee-form/AutoWired.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.default = void 0;

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

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

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

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _mobxReactLite = require("mobx-react-lite");

var _FormContext = _interopRequireDefault(require("./FormContext"));

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

/*
 * 双向绑定输入控件
 */

/**
 * 给子组件注入使其与store双向绑定,并且会注入id
 * children也支持函数，则会吧注入参数传递给函数并渲染调用结果
 */
var AutoWired = function AutoWired(props) {
  var _a, _b, _c, _d, _e, _f, _g;

  var id = props.id,
      children = props.children,
      _props$valueName = props.valueName,
      valueName = _props$valueName === void 0 ? 'value' : _props$valueName,
      _props$trigger = props.trigger,
      trigger = _props$trigger === void 0 ? 'onChange' : _props$trigger,
      replaceId = props.replaceId;
  var context = (0, _react.useContext)(_FormContext.default);
  var store = props.store || context.store;
  var required = (0, _utils.searchRequired)(id, store);
  var p;

  if (Array.isArray(id)) {
    var _p;

    p = (_p = {
      id: (0, _utils.genFormId)(id, replaceId)
    }, (0, _defineProperty2.default)(_p, valueName, id.map(function (key) {
      var _a;

      return (_a = store === null || store === void 0 ? void 0 : store.itemStores[key]) === null || _a === void 0 ? void 0 : _a.value;
    })), (0, _defineProperty2.default)(_p, trigger, function (value) {
      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }

      id.forEach(function (key, index) {
        var _a2;

        var _a;

        (_a = store === null || store === void 0 ? void 0 : store.itemStores[key]) === null || _a === void 0 ? void 0 : (_a2 = _a).onChange.apply(_a2, [value === null || value === void 0 ? void 0 : value[index]].concat(args));
      });
    }), (0, _defineProperty2.default)(_p, "disabled", store === null || store === void 0 ? void 0 : store.disabled), (0, _defineProperty2.default)(_p, "required", required), (0, _defineProperty2.default)(_p, "checkResult", id.map(function (key) {
      var _a;

      return ((_a = store === null || store === void 0 ? void 0 : store.itemStores[key]) === null || _a === void 0 ? void 0 : _a.checkResult) || 'default';
    })), (0, _defineProperty2.default)(_p, "errors", id.reduce(function (e, key) {
      var _a, _b;

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

      if (errors && ((_b = store === null || store === void 0 ? void 0 : store.itemStores[key]) === null || _b === void 0 ? void 0 : _b.checkResult) !== 'loading') {
        if (Array.isArray(e)) {
          e.push.apply(e, (0, _toConsumableArray2.default)(errors));
        } else {
          return errors;
        }
      }

      return e;
    }, undefined)), _p);
  } else {
    var _p2;

    p = (_p2 = {
      id: (0, _utils.genFormId)(id, replaceId)
    }, (0, _defineProperty2.default)(_p2, valueName, (_a = store === null || store === void 0 ? void 0 : store.itemStores[id]) === null || _a === void 0 ? void 0 : _a.value), (0, _defineProperty2.default)(_p2, trigger, function (value) {
      var _a3;

      var _a;

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

      (_a = store === null || store === void 0 ? void 0 : store.itemStores[id]) === null || _a === void 0 ? void 0 : (_a3 = _a).onChange.apply(_a3, [value].concat(args));
    }), (0, _defineProperty2.default)(_p2, "disabled", store === null || store === void 0 ? void 0 : store.disabled), (0, _defineProperty2.default)(_p2, "required", required), (0, _defineProperty2.default)(_p2, "checkResult", ((_b = store === null || store === void 0 ? void 0 : store.itemStores[id]) === null || _b === void 0 ? void 0 : _b.checkResult) || 'default'), (0, _defineProperty2.default)(_p2, "errors", ((_c = store === null || store === void 0 ? void 0 : store.itemStores[id]) === null || _c === void 0 ? void 0 : _c.checkResult) === 'loading' ? undefined : (_d = store === null || store === void 0 ? void 0 : store.itemStores[id]) === null || _d === void 0 ? void 0 : _d.errors), _p2);
  }

  var childNode; // @TODO 如果需要展示错误 可以在此处写一个ShowError组件

  if ((0, _isFunction.default)(children)) {
    childNode = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children(p));
  } else {
    var _Object$assign;

    childNode = /*#__PURE__*/_react.default.cloneElement(children, Object.assign(Object.assign({}, (0, _omit.default)(p, ['checkResult', 'errors'])), (_Object$assign = {
      disabled: (_g = (_f = (_e = children) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.disabled) !== null && _g !== void 0 ? _g : p.disabled
    }, (0, _defineProperty2.default)(_Object$assign, trigger, function () {
      var _a4, _d2;

      var _a, _b, _c, _d;

      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
        args[_key3] = arguments[_key3];
      }

      (_a = p[trigger]) === null || _a === void 0 ? void 0 : (_a4 = _a).call.apply(_a4, [p].concat(args));
      return (_d = (_c = (_b = children) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c[trigger]) === null || _d === void 0 ? void 0 : (_d2 = _d).call.apply(_d2, [_c].concat(args));
    }), (0, _defineProperty2.default)(_Object$assign, "required", required), _Object$assign)));
  }

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childNode);
};

AutoWired.defaultProps = {};

var _default = (0, _mobxReactLite.observer)(AutoWired);

exports.default = _default;