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

B 端物料组件库

import _Input from "@alifd/next/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["key", "regExp", "onChange", "isPreview", "readOnly", "disabled"];
import * as React from 'react';
import cls from 'classnames';
import FormHelpExtra from "../FormHelpExtra";
var COM_PREFIX = 'aliretail-MultiInput';

var MultiInput = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(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: cls([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 = _objectWithoutPropertiesLoose(_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, _extends({
        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(_extends({}, value, (_extends2 = {}, _extends2[key] = val, _extends2)));
        }
      })), (errorMsg === null || errorMsg === void 0 ? void 0 : errorMsg[key]) && /*#__PURE__*/React.createElement(FormHelpExtra.Error, {
        className: COM_PREFIX + "-error"
      }, errorMsg[key])));
      return counter;
    }, []));
  };

  return MultiInput;
}(React.Component);

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