seedsui-react/es/NumBox/NumBox.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; }

// require PrototypeMath.js, 用于解决加减法精度丢失的问题
import React, { Component } from 'react';
import PropTypes from 'prop-types';

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

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

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

    _this.onBlur = function (e) {
      var _this$props = _this.props,
          readOnly = _this$props.readOnly,
          disabled = _this$props.disabled,
          required = _this$props.required,
          min = _this$props.min,
          onChange = _this$props.onChange,
          onBlur = _this$props.onBlur;

      if (readOnly || disabled) {
        return;
      }
      // 失去焦点时只校验非空、最小值
      var value = Math.Calc.correctNumber(_this.props.value, { required: required, min: min });
      if (onChange && '' + value !== '' + _this.props.value) onChange(value, Object.getArgs(e, _this.props.args));
      if (onBlur) onBlur(value, Object.getArgs(e, _this.props.args));
    };

    _this.onFocus = function (e) {
      var _this$props2 = _this.props,
          readOnly = _this$props2.readOnly,
          disabled = _this$props2.disabled,
          onFocus = _this$props2.onFocus;

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

    _this.autoFocus = function () {
      if (_this.props.disabled || _this.props.readOnly || !_this.$input) return;
      _this.$input.focus();
      if (_this.props.autoSelect) _this.$input.select();
      // 修复兼容ios12的bug, 与全局的回弹并不冲突, 这里主要解决点击加减号时获取焦点, 不回弹的问题
      var iosExp = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);
      if (iosExp && iosExp[1] && iosExp[1] > '12') {
        // 兼容输入法把页面顶上去, 不回弹的问题
        if (window.inputToggleTimeout) {
          window.clearTimeout(window.inputToggleTimeout);
        }
        if (!_this.$input.getAttribute('ios-bug-blur')) {
          _this.$input.setAttribute('ios-bug-blur', '1');
          _this.$input.addEventListener('blur', function () {
            window.inputToggleTimeout = window.setTimeout(function () {
              document.getElementById('root').scrollIntoView();
            }, 100);
          }, false);
        }
      }
    };

    _this.onClickInput = function (e) {
      var value = e.target.value;
      if (value - 0 === 0) {
        e.target.value = '';
      }
      if (_this.props.onClickInput) _this.props.onClickInput(value, Object.getArgs(e, _this.props.args));
    };

    _this.onChange = function (e) {
      if (e.target.validity.badInput) {
        e.target.value = '';
      }
      // 输入时只校验最大值、小数点、最大长度、返回错误
      var _this$props3 = _this.props,
          max = _this$props3.max,
          digits = _this$props3.digits,
          maxLength = _this$props3.maxLength,
          onError = _this$props3.onError;

      var value = Math.Calc.correctNumber(e.target.value, { max: max, digits: digits, maxLength: maxLength, onError: onError });
      if (_this.props.onChange) _this.props.onChange(value, Object.getArgs(e, _this.props.args));
    };

    _this.onClickMinus = function (e) {
      var value = Math.Calc.correctNumber(Math.Calc.subtract(_this.$input.value, 1), _this.props);
      // Callback
      if (_this.props.onChange) _this.props.onChange(value, Object.getArgs(e, _this.props.args));
      if (_this.props.onClickMinus) _this.props.onClickMinus(value, Object.getArgs(e, _this.props.args));
      _this.autoFocus();
    };

    _this.onClickPlus = function (e) {
      var value = Math.Calc.correctNumber(Math.Calc.add(_this.$input.value, 1), _this.props);
      // Callback
      if (_this.props.onChange) _this.props.onChange(value, Object.getArgs(e, _this.props.args));
      if (_this.props.onClickPlus) _this.props.onClickPlus(value, Object.getArgs(e, _this.props.args));
      _this.autoFocus();
    };

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

      if (_this.props.disabled) return;
      var target = e.target;
      if (clear && target.classList.contains('clearicon')) {
        _this.onClear(e);
      }
      if (onClickLicon && target.classList.contains('licon')) {
        onClickLicon(_this.$input.value, Object.getArgs(e, _this.props.args));
        return;
      }
      if (onClickRicon && target.classList.contains('ricon')) {
        onClickLicon(_this.$input.value, Object.getArgs(e, _this.props.args));
        return;
      }
      if (target.classList.contains('numbox-input')) {
        _this.onClickInput(e);
        return;
      }
      if (target.classList.contains('numbox-button-plus-flag')) {
        _this.onClickPlus(e);
        return;
      }
      if (target.classList.contains('numbox-button-minus-flag')) {
        _this.onClickMinus(e);
        return;
      }
      if (onClick) onClick(_this.$input.value, Object.getArgs(e, _this.props.args));
    };

    _this.onClear = function (e) {
      _this.autoFocus();
      // 赋值
      if (_this.props.clear && typeof _this.props.clear === 'function') _this.props.clear('', Object.getArgs(e, _this.props.args));
      if (_this.props.onChange) {
        _this.props.onChange('', Object.getArgs(e, _this.props.args));
      }
      e.stopPropagation();
    };

    _this.getInputDOM = function () {
      var _this$props5 = _this.props,
          args = _this$props5.args,
          style = _this$props5.style,
          className = _this$props5.className,
          disabled = _this$props5.disabled,
          onClick = _this$props5.onClick,
          plusStyle = _this$props5.plusStyle,
          plusClassName = _this$props5.plusClassName,
          minusStyle = _this$props5.minusStyle,
          minusClassName = _this$props5.minusClassName,
          onClickMinus = _this$props5.onClickMinus,
          onClickPlus = _this$props5.onClickPlus,
          licon = _this$props5.licon,
          onClickLicon = _this$props5.onClickLicon,
          ricon = _this$props5.ricon,
          onClickRicon = _this$props5.onClickRicon,
          clear = _this$props5.clear,
          clearClassName = _this$props5.clearClassName,
          clearStyle = _this$props5.clearStyle,
          inputStyle = _this$props5.inputStyle,
          inputClassName = _this$props5.inputClassName,
          value = _this$props5.value,
          placeholder = _this$props5.placeholder,
          maxLength = _this$props5.maxLength,
          readOnly = _this$props5.readOnly,
          onClickInput = _this$props5.onClickInput,
          onChange = _this$props5.onChange,
          onError = _this$props5.onError,
          onBlur = _this$props5.onBlur,
          onFocus = _this$props5.onFocus,
          digits = _this$props5.digits,
          max = _this$props5.max,
          min = _this$props5.min,
          autoFocus = _this$props5.autoFocus,
          autoSelect = _this$props5.autoSelect,
          others = _objectWithoutProperties(_this$props5, ['args', 'style', 'className', 'disabled', 'onClick', 'plusStyle', 'plusClassName', 'minusStyle', 'minusClassName', 'onClickMinus', 'onClickPlus', 'licon', 'onClickLicon', 'ricon', 'onClickRicon', 'clear', 'clearClassName', 'clearStyle', 'inputStyle', 'inputClassName', 'value', 'placeholder', 'maxLength', 'readOnly', 'onClickInput', 'onChange', 'onError', 'onBlur', 'onFocus', 'digits', 'max', 'min', 'autoFocus', 'autoSelect']);

      return React.createElement('input', _extends({
        ref: function ref(el) {
          _this.$input = el;
        },
        type: 'number',
        value: value,
        min: min,
        max: max,
        disabled: disabled,
        readOnly: readOnly,
        placeholder: placeholder,
        onChange: _this.onChange,
        onFocus: _this.onFocus,
        onBlur: _this.onBlur,
        className: 'numbox-input' + (inputClassName ? ' ' + inputClassName : ''),
        style: inputStyle
      }, others));
    };

    return _this;
  }

  NumBox.prototype.componentDidMount = function componentDidMount() {
    if (this.props.autoFocus) {
      this.autoFocus();
    }
  };
  // 失去焦点

  // 获取焦点

  // 点击加减号清除时获取焦点

  // 点击文本框, 逢0清空

  // 修改值

  // 点击减

  // 点击加

  // 点击容器

  // 点击清除

  // render


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

    var _props = this.props,
        min = _props.min,
        max = _props.max,
        value = _props.value,
        style = _props.style,
        className = _props.className,
        disabled = _props.disabled,
        plusStyle = _props.plusStyle,
        plusClassName = _props.plusClassName,
        minusStyle = _props.minusStyle,
        minusClassName = _props.minusClassName,
        licon = _props.licon,
        ricon = _props.ricon,
        clear = _props.clear,
        clearClassName = _props.clearClassName,
        clearStyle = _props.clearStyle;

    return React.createElement(
      'div',
      { ref: function ref(el) {
          _this2.$el = el;
        }, disabled: min >= max || disabled, style: style, className: 'numbox' + (className ? ' ' + className : ''), onClick: this.onClick },
      React.createElement('input', {
        ref: function ref(el) {
          _this2.$minus = el;
        },
        type: 'button',
        className: 'numbox-button numbox-button-minus-flag' + (plusClassName ? ' ' + plusClassName : ''),
        style: plusStyle,
        value: '-',
        disabled: !isNaN(min) ? min - value >= 0 : false
      }),
      licon && licon,
      this.getInputDOM(),
      clear && value && React.createElement('i', { className: 'icon clearicon' + (clearClassName ? ' ' + clearClassName : ''), style: clearStyle, onClick: this.onClear }),
      ricon && ricon,
      React.createElement('input', {
        ref: function ref(el) {
          _this2.$plus = el;
        },
        type: 'button',
        className: 'numbox-button numbox-button-plus-flag' + (minusClassName ? ' ' + minusClassName : ''),
        style: minusStyle, value: '+',
        disabled: !isNaN(max) ? max - value <= 0 : false
      })
    );
  };

  return NumBox;
}(Component), _class.defaultProps = {
  maxLength: '16',
  clearClassName: 'ricon close-icon-clear size18'
}, _temp);
export { NumBox as default };
NumBox.propTypes = process.env.NODE_ENV !== "production" ? {
  args: PropTypes.any,
  // 容器
  style: PropTypes.object,
  className: PropTypes.string,
  disabled: PropTypes.bool,
  // 加减号
  plusStyle: PropTypes.object,
  plusClassName: PropTypes.string,
  minusStyle: PropTypes.object,
  minusClassName: PropTypes.string,
  // 文本框
  inputStyle: PropTypes.object,
  inputClassName: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  digits: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  placeholder: PropTypes.string,
  name: PropTypes.string,
  maxLength: PropTypes.string,
  readOnly: PropTypes.bool,
  required: PropTypes.bool,
  // 自动获取焦点
  autoFocus: PropTypes.bool,
  autoSelect: PropTypes.bool,
  // 左右图标
  licon: PropTypes.node,
  onClickLicon: PropTypes.func,
  ricon: PropTypes.node,
  onClickRicon: PropTypes.func,
  // 清除按键
  clear: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
  clearClassName: PropTypes.string,
  clearStyle: PropTypes.object,
  // events
  onClick: PropTypes.func,
  onClickMinus: PropTypes.func,
  onClickPlus: PropTypes.func,
  onClickInput: PropTypes.func,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
  onFocus: PropTypes.func,
  onError: PropTypes.func
} : {};