zent/lib/number-input/NumberInput.js

一套前端设计语言和基于React的实现

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _omit = require('lodash/omit');

var _omit2 = _interopRequireDefault(_omit);

var _isFunction = require('lodash/isFunction');

var _isFunction2 = _interopRequireDefault(_isFunction);

var _noop = require('lodash/noop');

var _noop2 = _interopRequireDefault(_noop);

var _input = require('../input');

var _input2 = _interopRequireDefault(_input);

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

var _getWidth = require('../utils/getWidth');

var _getWidth2 = _interopRequireDefault(_getWidth);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _ref2 = _react2['default'].createElement(_icon2['default'], { type: 'right' });

var _ref3 = _react2['default'].createElement(_icon2['default'], { type: 'right' });

var NumberInput = function (_ref) {
  (0, _inherits3['default'])(NumberInput, _ref);

  function NumberInput(props) {
    (0, _classCallCheck3['default'])(this, NumberInput);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (NumberInput.__proto__ || Object.getPrototypeOf(NumberInput)).call(this, props));

    _initialiseProps.call(_this);

    var value = props.value,
        min = props.min,
        max = props.max,
        decimal = props.decimal;

    var _this$adjustFixed = _this.adjustFixed(value, min, max, decimal),
        num = _this$adjustFixed.num,
        upArrow = _this$adjustFixed.upArrow,
        downArrow = _this$adjustFixed.downArrow;

    num = value === '' ? '' : num;
    _this.state = {
      value: num,
      upArrow: upArrow,
      downArrow: downArrow
    };
    return _this;
  }

  (0, _createClass3['default'])(NumberInput, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var props = this.props;
      if (nextProps.decimal !== props.decimal || nextProps.disabled !== props.disabled || nextProps.value !== props.value || nextProps.max !== props.max || nextProps.min !== props.min) {
        var value = nextProps.value,
            min = nextProps.min,
            max = nextProps.max,
            decimal = nextProps.decimal;

        var _adjustFixed = this.adjustFixed(value, min, max, decimal),
            num = _adjustFixed.num,
            upArrow = _adjustFixed.upArrow,
            downArrow = _adjustFixed.downArrow;

        num = value === '' ? '' : num;
        this.setState({
          value: num,
          upArrow: upArrow,
          downArrow: downArrow
        });
        this.onPropChange(num);
      }
    }
  }, {
    key: 'adjustFixed',
    value: function adjustFixed(num, min, max, len) {
      // 检查min与max范围
      var downArrow = false;
      var upArrow = false;
      if (min !== undefined || max !== undefined) {
        downArrow = Math.round(num * Math.pow(10, len)) <= Math.round(min * Math.pow(10, len));
        upArrow = Math.round(num * Math.pow(10, len)) >= Math.round(max * Math.pow(10, len));
        num = downArrow ? min : num;
        num = upArrow ? max : num;
      }

      // 四舍五入, 切保留几位小数， 此四舍五入修正了js原生toFixed保留小数点的BUG问题
      num = (Math.round(num * Math.pow(10, len)) / Math.pow(10, len)).toFixed(len);
      return {
        num: num,
        upArrow: upArrow,
        downArrow: downArrow
      };
    }
  }, {
    key: 'countFied',
    value: function countFied(num, len, count) {
      // 步进器加减的计算
      var result = ((Math.round(num * Math.pow(10, len)) + count) / Math.pow(10, len)).toFixed(len);
      var _props = this.props,
          min = _props.min,
          max = _props.max;
      // 检查范围

      return this.adjustFixed(result, min, max, len);
    }
  }, {
    key: 'onArrow',
    value: function onArrow(disabled, count) {
      if (disabled) return;
      var value = this.state.value;
      var decimal = this.props.decimal;

      var _countFied = this.countFied(value, decimal, count),
          num = _countFied.num,
          upArrow = _countFied.upArrow,
          downArrow = _countFied.downArrow;

      this.setState({
        value: num,
        upArrow: upArrow,
        downArrow: downArrow
      });
      this.onPropChange(num);
    }
  }, {
    key: 'onPropChange',
    value: function onPropChange(result) {
      var props = this.props;
      result = result === '' ? '' : parseFloat(result);
      props.onChange({
        target: (0, _extends3['default'])({}, props, {
          type: 'number',
          value: result
        }),
        preventDefault: _noop2['default'],
        stopPropagation: _noop2['default']
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _classNames, _classNames2, _classNames3;

      var _props2 = this.props,
          prefix = _props2.prefix,
          className = _props2.className,
          showStepper = _props2.showStepper,
          disabled = _props2.disabled,
          readOnly = _props2.readOnly,
          width = _props2.width;

      var widthStyle = (0, _getWidth2['default'])(width);
      var _state = this.state,
          value = _state.value,
          upArrow = _state.upArrow,
          downArrow = _state.downArrow;

      // 箭头状态

      var upArrowState = disabled || readOnly || upArrow;
      var downArrowState = disabled || readOnly || downArrow;

      // 最外层样式
      var wrapClass = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefix + '-number-input-wrapper', true), (0, _defineProperty3['default'])(_classNames, prefix + '-number-input-count-wrapper', showStepper), _classNames), className);

      // 上arrow样式
      var upArrowClass = (0, _classnames2['default'])((_classNames2 = {}, (0, _defineProperty3['default'])(_classNames2, prefix + '-number-input-arrow', true), (0, _defineProperty3['default'])(_classNames2, prefix + '-number-input-arrowup', true), (0, _defineProperty3['default'])(_classNames2, prefix + '-number-input-arrow-disable', upArrowState), _classNames2));

      // 下arrow样式
      var downArrowClass = (0, _classnames2['default'])((_classNames3 = {}, (0, _defineProperty3['default'])(_classNames3, prefix + '-number-input-arrow', true), (0, _defineProperty3['default'])(_classNames3, prefix + '-number-input-arrowdown', true), (0, _defineProperty3['default'])(_classNames3, prefix + '-number-input-arrow-disable', downArrowState), _classNames3));

      // 不可传入Input组件的属性
      var inputProps = (0, _omit2['default'])(this.props, [
      // 这几个 Input 的 props 不要透传
      'type',
      // 'addonBefore',
      // 'addonAfter',
      'onChange', 'width',

      // 这些是 NumberInput 特有的 props
      'showStepper', 'min', 'max', 'decimal']);
      return _react2['default'].createElement(
        'div',
        { className: wrapClass, style: widthStyle },
        showStepper && _react2['default'].createElement(
          'span',
          { className: upArrowClass, onClick: this.inc },
          _ref2
        ),
        _react2['default'].createElement(_input2['default'], (0, _extends3['default'])({}, inputProps, {
          value: value,
          onChange: this.onChange,
          onBlur: this.onBlur
        })),
        showStepper && _react2['default'].createElement(
          'span',
          { className: downArrowClass, onClick: this.dec },
          _ref3
        )
      );
    }
  }]);
  return NumberInput;
}(_react.PureComponent || _react.Component);

NumberInput.propTypes = {
  className: _propTypes2['default'].string,
  prefix: _propTypes2['default'].string,
  showStepper: _propTypes2['default'].bool,
  decimal: _propTypes2['default'].number,
  disabled: _propTypes2['default'].bool,
  value: _propTypes2['default'].any,
  max: _propTypes2['default'].number,
  min: _propTypes2['default'].number,
  onChange: _propTypes2['default'].func,
  width: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string])
};
NumberInput.defaultProps = {
  prefix: 'zent',
  showStepper: false,
  value: '',
  decimal: 0,
  disabled: false,
  onChange: function onChange() {}
};

var _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.onChange = function (ev) {
    var value = ev.target.value;
    if (!value) {
      _this2.setState({ value: value });
    } else if (/^(\-|\+)?\d+(\.)?$/g.test(value) || /^(\-|\+)?\d+(\.\d+)?$/g.test(value) || /^\d+\.$/g.test(value) || /^(\-|\+)?$/g.test(value)) {
      _this2.setState({ value: value });
    }
  };

  this.onBlur = function (evt) {
    var _props3 = _this2.props,
        decimal = _props3.decimal,
        min = _props3.min,
        max = _props3.max;
    var value = _this2.state.value;

    if (/^(\-|\+)?$/g.test(value)) {
      value = '';
    }
    value = value.replace(/\.$/g, '');

    var _adjustFixed2 = _this2.adjustFixed(value, min, max, decimal),
        num = _adjustFixed2.num,
        upArrow = _adjustFixed2.upArrow,
        downArrow = _adjustFixed2.downArrow;

    num = value === '' ? '' : num;
    _this2.setState({
      value: num,
      upArrow: upArrow,
      downArrow: downArrow
    });
    _this2.onPropChange(num);

    var onBlur = _this2.props.onBlur;

    if ((0, _isFunction2['default'])(onBlur)) {
      onBlur(evt);
    }
  };

  this.inc = function () {
    var disabled = _this2.props.disabled;
    var upArrow = _this2.state.upArrow;

    var upArrowState = disabled || upArrow;

    _this2.onArrow(upArrowState, 1);
  };

  this.dec = function () {
    var disabled = _this2.props.disabled;
    var downArrow = _this2.state.downArrow;

    var downArrowState = disabled || downArrow;

    _this2.onArrow(downArrowState, -1);
  };
};

exports['default'] = NumberInput;