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

B 端物料组件库

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _Input from "@alifd/next/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["value", "onChange"];
import * as React from 'react';
import cls from 'classnames';
import FormHelpExtra from "../FormHelpExtra";
import { validateMap } from "./properties";
var COM_CLASS = 'aliretail-landline-number';
var REG_NUMBER = /^\d+$/;

var InputX = function InputX(props) {
  var value = props.value,
      _onChange = props.onChange,
      others = _objectWithoutPropertiesLoose(props, _excluded);

  return /*#__PURE__*/React.createElement(_Input, _extends({
    className: COM_CLASS + "_input",
    value: value,
    onChange: function onChange(val) {
      if (val && !REG_NUMBER.test(val)) {
        return;
      }

      _onChange(val);
    }
  }, others));
};

var LandlineNumber = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(LandlineNumber, _React$Component);

  function LandlineNumber() {
    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 = {
      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 value = _this.props.value;
      var errorMsg = {};

      var validateList = _this.getValuePropsList();

      for (var i = 0; i < validateList.length; i++) {
        var key = validateList[i];
        var errMsg = validateMap === null || validateMap === void 0 ? void 0 : validateMap[key](value === null || value === void 0 ? void 0 : value[key]);

        if (errMsg !== true) {
          errorMsg[key] = errMsg;
        }
      }

      _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 = LandlineNumber.prototype;

  _proto.handleChange = function handleChange(key, val) {
    var _extends2;

    this.props.onChange(_extends({}, this.props.value, (_extends2 = {}, _extends2[key] = val, _extends2)));
  };

  _proto.getValuePropsList = function getValuePropsList() {
    var hasExtensionNumber = this.props.hasExtensionNumber;
    var validateList = ['areaCode', 'seatNumber'];

    if (hasExtensionNumber) {
      validateList.push('extensionNumber');
    }

    return validateList;
  }
  /**
   * 校验规则，提供外部使用 ref 方式调用
   * @param isRequired 是否是必填项
   */
  ;

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

    this.setState({
      state: Object.keys(error).reduce(function (counter, key) {
        if (error !== null && error !== void 0 && error[key]) {
          counter[key] = 'error';
        }

        return counter;
      }, {}),
      errorMsg: error
    });
  };

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

  _proto.isEmptyValue = function isEmptyValue() {
    var value = this.props.value;
    return !Object.keys(value).find(function (key) {
      return !!value[key];
    });
  };

  _proto.getPreviewValue = function getPreviewValue() {
    var value = this.props.value;
    var valuePropsList = this.getValuePropsList();
    return valuePropsList.reduce(function (counter, key) {
      counter.push(value[key] || '');
      return counter;
    }, []).join('-');
  };

  _proto.render = function render() {
    var _ref,
        _this2 = this;

    var _this$props = this.props,
        value = _this$props.value,
        hasExtensionNumber = _this$props.hasExtensionNumber,
        disabled = _this$props.disabled,
        readOnly = _this$props.readOnly,
        isPreview = _this$props.isPreview;
    var _this$state = this.state,
        state = _this$state.state,
        errorMsg = _this$state.errorMsg;
    return /*#__PURE__*/React.createElement("div", {
      className: cls([COM_CLASS, (_ref = {}, _ref[COM_CLASS + "-extension"] = hasExtensionNumber, _ref)]),
      "data-name": "AliretailLandlineNumber"
    }, isPreview ? /*#__PURE__*/React.createElement(InputX, {
      value: this.getPreviewValue(),
      isPreview: true
    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputX, {
      placeholder: "\u533A\u53F7",
      disabled: disabled,
      readOnly: readOnly,
      isPreview: isPreview,
      maxLength: 4,
      value: value === null || value === void 0 ? void 0 : value.areaCode,
      state: state === null || state === void 0 ? void 0 : state.areaCode,
      onChange: function onChange(val) {
        _this2.handleChange('areaCode', val);
      }
    }), !!(state !== null && state !== void 0 && state.areaCode) && /*#__PURE__*/React.createElement(FormHelpExtra.Error, null, errorMsg.areaCode)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputX, {
      placeholder: "\u5EA7\u673A\u53F7",
      disabled: disabled,
      readOnly: readOnly,
      isPreview: isPreview,
      maxLength: 11,
      value: value === null || value === void 0 ? void 0 : value.seatNumber,
      state: state === null || state === void 0 ? void 0 : state.seatNumber,
      onChange: function onChange(val) {
        _this2.handleChange('seatNumber', val);
      }
    }), !!(state !== null && state !== void 0 && state.seatNumber) && /*#__PURE__*/React.createElement(FormHelpExtra.Error, null, errorMsg.seatNumber)), hasExtensionNumber && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputX, {
      placeholder: "\u5206\u673A\u53F7",
      disabled: disabled,
      readOnly: readOnly,
      isPreview: isPreview,
      value: value === null || value === void 0 ? void 0 : value.extensionNumber,
      state: state === null || state === void 0 ? void 0 : state.extensionNumber,
      onChange: function onChange(val) {
        _this2.handleChange('extensionNumber', val);
      }
    }), !!(state !== null && state !== void 0 && state.extensionNumber) && /*#__PURE__*/React.createElement(FormHelpExtra.Error, null, errorMsg.extensionNumber))));
  };

  return LandlineNumber;
}(React.Component);

LandlineNumber.defaultProps = {
  value: {},
  onChange: function onChange() {},
  hasExtensionNumber: true,
  disabled: false,
  readOnly: false,
  isPreview: false
};
export { LandlineNumber as default };