seedsui-react/es/InputText/InputText.js

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _class, _temp;

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';

var InputText = (_temp = _class = function (_Component) {
  _inherits(InputText, _Component);

  function InputText(props) {
    _classCallCheck(this, InputText);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.componentDidUpdate = function (prevProps) {
      if (prevProps.readOnly !== _this.props.readOnly || prevProps.disabled !== _this.props.disabled) {
        _this.updateShowClear();
      }
    };

    _this.onClick = function (e) {
      e.stopPropagation();
      var _this$props = _this.props,
          onClick = _this$props.onClick,
          onClickInput = _this$props.onClickInput,
          onClickLicon = _this$props.onClickLicon,
          onClickRicon = _this$props.onClickRicon;

      if (_this.props.disabled) return;
      var target = e.target;
      if (target.classList.contains('clearicon')) {
        _this.onClear(e);
      } else if (target.classList.contains('licon')) {
        if (onClickLicon) onClickLicon(_this.$input.value, Object.getArgs(e, _this.props.args));
      } else if (target.classList.contains('ricon')) {
        if (onClickRicon) onClickRicon(_this.$input.value, Object.getArgs(e, _this.props.args));
      } else if (target.classList.contains('input-text')) {
        if (onClick) onClick(_this.$input.value, Object.getArgs(e, _this.props.args));
        if (onClickInput) onClickInput(_this.$input.value, Object.getArgs(e, _this.props.args));
      } else {
        if (onClick) onClick(_this.$input.value, Object.getArgs(e, _this.props.args));
      }
    };

    _this.preAutoSize = function () {
      _this.$input.style.height = _this.$pre.clientHeight + 'px';
    };

    _this.onChange = function (e) {
      var target = e.target;
      var value = target.value;
      var _this$props2 = _this.props,
          pre = _this$props2.pre,
          valueBindProp = _this$props2.valueBindProp,
          type = _this$props2.type,
          onChange = _this$props2.onChange,
          maxLength = _this$props2.maxLength;
      // 自动扩充功能

      if (pre) {
        _this.$pre.children[0].innerText = value;
        _this.preAutoSize();
      }
      // 最大长度
      if (maxLength && value && value.length > maxLength) {
        value = value.substring(0, maxLength);
      }
      // 输入时只校验最大值、小数点、最大长度、返回错误
      if (type === 'number') {
        var _this$props3 = _this.props,
            max = _this$props3.max,
            digits = _this$props3.digits,
            onError = _this$props3.onError;

        value = Math.Calc.correctNumber(e.target.value, { max: max, digits: digits, maxLength: maxLength, onError: onError });
      }
      // onChange
      if (onChange) onChange(value, Object.getArgs(e, _this.props.args));
      // 非valueBindProp时, 更新清除按钮状态
      if (!valueBindProp) _this.updateShowClear(value);
    };

    _this.onBlur = function (e) {
      var target = e.target;
      var value = target.value;
      var _this$props4 = _this.props,
          valueBindProp = _this$props4.valueBindProp,
          min = _this$props4.min,
          type = _this$props4.type,
          onBlur = _this$props4.onBlur,
          onChange = _this$props4.onChange;

      if (type === 'number') {
        // 失去焦点时只校验非空、最小值
        value = Math.Calc.correctNumber(value, { min: min });
        if (!valueBindProp) target.value = value;
        if (onChange) onChange(value, Object.getArgs(e, _this.props.args));
      }
      if (onBlur) onBlur(value, Object.getArgs(e, _this.props.args));
    };

    _this.onFocus = function (e) {
      var target = e.target;
      var value = target.value;
      var _this$props5 = _this.props,
          onFocus = _this$props5.onFocus,
          readOnly = _this$props5.readOnly;

      if (onFocus) {
        onFocus(value, Object.getArgs(e, _this.props.args));
        e.stopPropagation();
      }
      if (readOnly) {
        target.blur();
      }
    };

    _this.onClear = function (e) {
      _this.$input.focus();
      // 赋值
      var _this$props6 = _this.props,
          args = _this$props6.args,
          valueBindProp = _this$props6.valueBindProp,
          clear = _this$props6.clear,
          pre = _this$props6.pre,
          onChange = _this$props6.onChange;

      if (!valueBindProp) _this.$input.value = '';
      if (clear && typeof clear === 'function') clear('', Object.getArgs(e, args));
      if (onChange) {
        onChange('', Object.getArgs(e, args));
      }
      // 自动扩充功能
      if (pre) {
        _this.preAutoSize();
      }
      e.stopPropagation();
      // 非valueBindProp时, 更新清除按钮状态
      if (!valueBindProp) _this.updateShowClear('');
    };

    _this.getInputDOM = function () {
      var _this$props7 = _this.props,
          args = _this$props7.args,
          style = _this$props7.style,
          className = _this$props7.className,
          onClick = _this$props7.onClick,
          onChange = _this$props7.onChange,
          onClickInput = _this$props7.onClickInput,
          onBlur = _this$props7.onBlur,
          onFocus = _this$props7.onFocus,
          max = _this$props7.max,
          min = _this$props7.min,
          digits = _this$props7.digits,
          licon = _this$props7.licon,
          onClickLicon = _this$props7.onClickLicon,
          ricon = _this$props7.ricon,
          onClickRicon = _this$props7.onClickRicon,
          clear = _this$props7.clear,
          clearClassName = _this$props7.clearClassName,
          clearStyle = _this$props7.clearStyle,
          rcaption = _this$props7.rcaption,
          pre = _this$props7.pre,
          type = _this$props7.type,
          valueBindProp = _this$props7.valueBindProp,
          autoFocus = _this$props7.autoFocus,
          inputClassName = _this$props7.inputClassName,
          inputStyle = _this$props7.inputStyle,
          maxLength = _this$props7.maxLength,
          value = _this$props7.value,
          placeholder = _this$props7.placeholder,
          readOnly = _this$props7.readOnly,
          disabled = _this$props7.disabled,
          others = _objectWithoutProperties(_this$props7, ['args', 'style', 'className', 'onClick', 'onChange', 'onClickInput', 'onBlur', 'onFocus', 'max', 'min', 'digits', 'licon', 'onClickLicon', 'ricon', 'onClickRicon', 'clear', 'clearClassName', 'clearStyle', 'rcaption', 'pre', 'type', 'valueBindProp', 'autoFocus', 'inputClassName', 'inputStyle', 'maxLength', 'value', 'placeholder', 'readOnly', 'disabled']);
      // pre类型


      if (pre) {
        // pre的左右padding
        var preLeft = 0;
        var preRight = 0;
        if (inputStyle) {
          if (inputStyle.padding) {
            var paddingValues = inputStyle.padding.split(' ');
            if (paddingValues.length === 1) {
              preLeft = paddingValues[0];
              preRight = paddingValues[0];
            } else if (paddingValues.length === 2) {
              preLeft = paddingValues[1];
              preRight = paddingValues[1];
            } else if (paddingValues.length === 4) {
              preLeft = paddingValues[1];
              preRight = paddingValues[3];
            }
          } else if (inputStyle.paddingLeft || inputStyle.paddingRight) {
            preLeft = inputStyle.paddingLeft || '0';
            preRight = inputStyle.paddingRight || '0';
          }
        }
        return React.createElement(
          'div',
          { className: 'input-pre-box' + (inputClassName ? ' ' + inputClassName : ''), style: inputStyle },
          valueBindProp && React.createElement('textarea', _extends({ autoFocus: autoFocus, ref: function ref(el) {
              _this.$input = el;
            }, value: value, maxLength: maxLength, readOnly: readOnly, disabled: disabled, className: 'input-pre', placeholder: placeholder, onChange: _this.onChange, onBlur: _this.onBlur, onFocus: _this.onFocus }, others)),
          !valueBindProp && React.createElement('textarea', _extends({ autoFocus: autoFocus, ref: function ref(el) {
              _this.$input = el;
            }, defaultValue: value, maxLength: maxLength, readOnly: readOnly, disabled: disabled, className: 'input-pre', placeholder: placeholder, onChange: _this.onChange, onBlur: _this.onBlur, onFocus: _this.onFocus }, others)),
          React.createElement(
            'pre',
            { ref: function ref(el) {
                _this.$pre = el;
              }, style: { left: preLeft, right: preRight } },
            React.createElement(
              'span',
              null,
              value
            )
          )
        );
      }
      // textarea类型
      if (type === 'textarea') {
        // 如果值绑定属性,则只有通过父组件的prop来改变值
        if (valueBindProp) {
          return React.createElement('textarea', _extends({ autoFocus: autoFocus, ref: function ref(el) {
              _this.$input = el;
            }, value: value, maxLength: maxLength, readOnly: readOnly, disabled: disabled, placeholder: placeholder, onChange: _this.onChange, onBlur: _this.onBlur, onFocus: _this.onFocus, className: 'input-area' + (inputClassName ? ' ' + inputClassName : ''), style: inputStyle }, others));
        }
        return React.createElement('textarea', _extends({ autoFocus: autoFocus, ref: function ref(el) {
            _this.$input = el;
          }, defaultValue: value, maxLength: maxLength, readOnly: readOnly, disabled: disabled, placeholder: placeholder, onChange: _this.onChange, onBlur: _this.onBlur, onFocus: _this.onFocus, className: 'input-area' + (inputClassName ? ' ' + inputClassName : ''), style: inputStyle }, others));
      }
      // 其它类型
      if (valueBindProp) {
        // 如果值绑定属性,则只有通过父组件的prop来改变值
        return React.createElement('input', _extends({ max: max, min: min, autoFocus: autoFocus, ref: function ref(el) {
            _this.$input = el;
          }, type: type, value: value, maxLength: maxLength, readOnly: readOnly, disabled: disabled, placeholder: placeholder, onChange: _this.onChange, onBlur: _this.onBlur, onFocus: _this.onFocus, className: 'input-text' + (inputClassName ? ' ' + inputClassName : ''), style: inputStyle }, others));
      }
      return React.createElement('input', _extends({ max: max, min: min, autoFocus: autoFocus, ref: function ref(el) {
          _this.$input = el;
        }, type: type, defaultValue: value, maxLength: maxLength, readOnly: readOnly, disabled: disabled, placeholder: placeholder, onChange: _this.onChange, onBlur: _this.onBlur, onFocus: _this.onFocus, className: 'input-text' + (inputClassName ? ' ' + inputClassName : ''), style: inputStyle }, others));
    };

    _this.updateShowClear = function (value) {
      var _this$props8 = _this.props,
          readOnly = _this$props8.readOnly,
          disabled = _this$props8.disabled,
          clear = _this$props8.clear,
          valueBindProp = _this$props8.valueBindProp;

      if (valueBindProp) return;
      if (readOnly || disabled || !clear) {
        _this.setState({
          showClear: false
        });
        return;
      }
      var showClear = false;
      if (value) {
        showClear = true;
      } else {
        showClear = false;
      }
      _this.setState({
        showClear: showClear
      });
    };

    _this.state = {
      showClear: props.value && props.clear && !props.readOnly && !props.disabled // 用于非valueBindProp
    };
    return _this;
  }
  // 解决非valueBindProp状态下, readOnly和disabled发生变化时, 不更新清除按钮的问题

  // 点击容器

  // 自动扩充功能

  // 文本框事件

  // 点击清除

  // 非valueBindProp时, 更新清除按钮状态


  InputText.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        value = _props.value,
        valueBindProp = _props.valueBindProp,
        readOnly = _props.readOnly,
        disabled = _props.disabled,
        className = _props.className,
        style = _props.style,
        licon = _props.licon,
        ricon = _props.ricon,
        clear = _props.clear,
        clearClassName = _props.clearClassName,
        clearStyle = _props.clearStyle,
        rcaption = _props.rcaption;
    // 支持valueBindProp和非valueBindProp两种模式的清空按钮控制

    var showClear = false;
    if (value && !readOnly && !disabled) {
      showClear = true;
    } else {
      showClear = false;
    }
    var isShowClear = valueBindProp ? showClear : this.state.showClear;
    return React.createElement(
      'div',
      { ref: function ref(el) {
          _this2.$el = el;
        }, className: 'input-text-box' + (className ? ' ' + className : ''), style: style, onClick: this.onClick },
      licon && licon,
      this.getInputDOM(),
      clear && React.createElement('i', { className: 'icon clearicon ' + (isShowClear ? '' : 'hide') + (clearClassName ? ' ' + clearClassName : ''), style: clearStyle }),
      ricon && ricon,
      rcaption && rcaption
    );
  };

  return InputText;
}(Component), _class.defaultProps = {
  type: 'text',
  value: '',
  readOnly: false,
  disabled: false,
  clearClassName: 'ricon close-icon-clear size18'
}, _temp);
export { InputText as default };
InputText.propTypes = process.env.NODE_ENV !== "production" ? {
  type: PropTypes.string, // 类型: text, number, tel, password
  valueBindProp: PropTypes.bool, // 值是否绑定属性
  pre: PropTypes.bool, // 自动扩充功能
  // 容器
  args: PropTypes.any,
  style: PropTypes.object,
  className: PropTypes.string,
  onClick: PropTypes.func,
  // 文本框
  autoFocus: PropTypes.bool,
  maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  max: PropTypes.oneOfType([// 日期或者数字框
  PropTypes.string, PropTypes.number]),
  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  digits: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
  readOnly: PropTypes.bool,
  disabled: PropTypes.bool,

  inputStyle: PropTypes.object,
  inputClassName: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  placeholder: PropTypes.string,
  onChange: PropTypes.func,
  onClickInput: PropTypes.func,
  onBlur: PropTypes.func,
  onFocus: PropTypes.func,
  // 左右图标
  licon: PropTypes.node,
  onClickLicon: PropTypes.func, // 点击样式包含licon触发
  ricon: PropTypes.node,
  onClickRicon: PropTypes.func, // 点击样式包含ricon触发
  // 清除按键
  clear: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  clearClassName: PropTypes.string,
  clearStyle: PropTypes.object,
  // 右侧内容
  rcaption: PropTypes.node
} : {};