@aliretail/react-materials-components/lib/MultiInput/index.js

B 端物料组件库

"use strict";

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

exports.__esModule = true;
exports["default"] = void 0;

var _input = _interopRequireDefault(require("@alifd/next/lib/input"));

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _FormHelpExtra = _interopRequireDefault(require("../FormHelpExtra"));

var _excluded = ["key", "regExp", "onChange", "isPreview", "readOnly", "disabled"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }

var COM_PREFIX = 'aliretail-MultiInput';

var MultiInput = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(MultiInput, _React$Component);

  function MultiInput() {
    var _this;

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

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      errorMsg: {}
    };

    _this.validate = function (isRequired) {
      var _Object$keys;

      if (isRequired === void 0) {
        isRequired = true;
      }

      var isEmptyValue = _this.isEmptyValue(); // 如果不是必填项并且内容为空则不做校验


      if (!isRequired && isEmptyValue) {
        _this.clearErrors();

        return true;
      }

      var _this$props = _this.props,
          value = _this$props.value,
          inputList = _this$props.inputList;
      var errorMsg = {};
      inputList.forEach(function (item) {
        var regExp = item.regExp,
            key = item.key,
            required = item.required,
            regExpErrorMsg = item.regExpErrorMsg;
        if (!regExp && !required) return;
        var val = value[key];

        if (!val) {
          if (required || isRequired) {
            errorMsg[key] = '该字段不能为空';
          }
        } else if (regExp && !regExp.test(val)) {
          errorMsg[key] = regExpErrorMsg || '输入和规则不匹配';
        }
      });

      _this.setErrors(errorMsg);

      if ((_Object$keys = Object.keys(errorMsg)) !== null && _Object$keys !== void 0 && _Object$keys.length) {
        return errorMsg;
      }

      return true;
    };

    return _this;
  }

  var _proto = MultiInput.prototype;

  _proto.setErrors = function setErrors(error) {
    if (!error) {
      this.clearErrors();
      return;
    }

    this.setState({
      errorMsg: error
    });
  };

  _proto.clearErrors = function clearErrors() {
    this.setState({
      errorMsg: {}
    });
  };

  _proto.isEmptyValue = function isEmptyValue() {
    var value = this.props.value;
    return this.isEmptyObjVal(value);
  };

  _proto.isEmptyErrorMsg = function isEmptyErrorMsg() {
    var errorMsg = this.state.errorMsg;
    return this.isEmptyObjVal(errorMsg);
  };

  _proto.isEmptyObjVal = function isEmptyObjVal(obj) {
    if (!obj) return true;
    return !Object.keys(obj).find(function (key) {
      return !!obj[key];
    });
  };

  _proto.render = function render() {
    var _ref;

    var _this$props2 = this.props,
        inputList = _this$props2.inputList,
        isPreview = _this$props2.isPreview,
        readOnly = _this$props2.readOnly,
        disabled = _this$props2.disabled,
        value = _this$props2.value,
        _onChange = _this$props2.onChange;
    var errorMsg = this.state.errorMsg;
    var isEmptyErrorMsg = this.isEmptyErrorMsg();
    return /*#__PURE__*/React.createElement("div", {
      className: (0, _classnames["default"])([COM_PREFIX, (_ref = {}, _ref[COM_PREFIX + "-disabled"] = disabled, _ref[COM_PREFIX + "-hasErrorMsg"] = !isEmptyErrorMsg, _ref)])
    }, inputList.reduce(function (counter, _ref2, index) {
      var key = _ref2.key,
          regExp = _ref2.regExp,
          inputOnChange = _ref2.onChange,
          inputIsPreview = _ref2.isPreview,
          inputReadOnly = _ref2.readOnly,
          inputDisabled = _ref2.disabled,
          others = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);

      // 除了第一个以外都要加横杠拼接
      if (index !== 0) {
        counter.push( /*#__PURE__*/React.createElement("span", {
          className: COM_PREFIX + "-separator"
        }, "-"));
      }

      counter.push( /*#__PURE__*/React.createElement("div", {
        className: COM_PREFIX + "-inputArea"
      }, /*#__PURE__*/React.createElement(_input["default"], (0, _extends3["default"])({
        key: key
      }, others, {
        className: COM_PREFIX + "-input",
        isPreview: isPreview || inputIsPreview,
        disabled: disabled || inputDisabled,
        readOnly: readOnly || inputReadOnly,
        value: value[key],
        state: errorMsg !== null && errorMsg !== void 0 && errorMsg[key] ? 'error' : 'normal',
        onChange: function onChange(val) {
          var _extends2;

          inputOnChange && inputOnChange(val);

          _onChange((0, _extends3["default"])({}, value, (_extends2 = {}, _extends2[key] = val, _extends2)));
        }
      })), (errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg[key]) && /*#__PURE__*/React.createElement(_FormHelpExtra["default"].Error, {
        className: COM_PREFIX + "-error"
      }, errorMsg[key])));
      return counter;
    }, []));
  };

  return MultiInput;
}(React.Component);

exports["default"] = MultiInput;
MultiInput.defaultProps = {
  inputList: [],
  isPreview: false,
  readOnly: false,
  disabled: false,
  value: {},
  onChange: function onChange() {}
};