@txdfe/at/es/number-picker/number-picker.js

一个设计体系组件库

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

function _extends() { _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; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

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

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

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

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from '../icon';
import Button from '../button';
import Input from '../input';
import { func, obj } from '../util';
/** NumberPicker */

var NumberPicker = /*#__PURE__*/function (_React$Component) {
  _inherits(NumberPicker, _React$Component);

  var _super = _createSuper(NumberPicker);

  function NumberPicker(_props) {
    var _this;

    _classCallCheck(this, NumberPicker);

    _this = _super.call(this, _props);

    _defineProperty(_assertThisInitialized(_this), "onChange", function (value, e) {
      if (_this.props.editable === true) {
        value = value.trim(); // Compatible Chinese Input Method

        value = value.replace('。', '.'); // ignore space

        if (_this.state.value === value) {
          return;
        } // in case of autoCorrect ('0.'=>0, '0.0'=>0) , we have these steps


        if (value) {
          // ignore when input start form '-'
          if (value === '-' || _this.state.value === '-') {
            _this.setState({
              value: value
            });

            return;
          } // ignore when next value = prev value.
          // ps: Number('0.')=0 ; Number('0.0')=0;
          // but take care of Number('')=0;


          if (Number(_this.state.value) === Number(value)) {
            _this.setState({
              value: value
            });

            return;
          } // ignore when value < min (because number is inputted one by one)


          if (!isNaN(value) && Number(value) < _this.props.min) {
            _this.setState({
              value: value
            });

            return;
          }
        }

        _this.setInputValue(value, e);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onCorrect", function (currentValue, oldValue) {
      _this.props.onCorrect({
        currentValue: currentValue,
        oldValue: oldValue
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
      var _this$props;

      if (e.keyCode === 38) {
        _this.up(e);
      } else if (e.keyCode === 40) {
        _this.down(e);
      }

      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }

      (_this$props = _this.props).onKeyDown.apply(_this$props, [e].concat(args));
    });

    _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
      var onFocus = _this.props.onFocus;

      _this.setFocus(true);

      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
        args[_key2 - 1] = arguments[_key2];
      }

      onFocus && onFocus.apply(void 0, [e].concat(args));
    });

    _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
      var value = _this.getCurrentValidValue(e.target.value.trim());

      if (_this.state.value !== value) {
        _this.setValue(value, e);
      }

      _this.setFocus(false);

      var onBlur = _this.props.onBlur;

      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
        args[_key3 - 1] = arguments[_key3];
      }

      onBlur && onBlur.apply(void 0, [e].concat(args));
    });

    _defineProperty(_assertThisInitialized(_this), "getCurrentValidValue", function (value) {
      var val = value;

      var _assertThisInitialize = _assertThisInitialized(_this),
          props = _assertThisInitialize.props;

      if (val === '') {
        val = '';
      } else if (!isNaN(val)) {
        val = Number(val);

        if (val < props.min) {
          val = props.min;
        }

        if (val > props.max) {
          val = props.max;
        } // precision=2  and input from 1.99 to 1.999, should stay with 1.99 not 2


        var strValue = "".concat(val);
        var pointPos = strValue.indexOf('.');

        var cutPos = pointPos + 1 + _this.getPrecision();

        if (pointPos !== -1 && strValue.length > cutPos) {
          val = Number(strValue.substr(0, cutPos));
        }
      } else {
        val = _this.state.value;
      }

      if ("".concat(val) !== "".concat(value)) {
        _this.onCorrect(val, value);
      }

      return val;
    });

    _defineProperty(_assertThisInitialized(_this), "setValue", function (v, e, triggerType) {
      if (!('value' in _this.props)) {
        _this.setState({
          value: v
        });
      }

      _this.props.onChange(isNaN(v) || v === '' ? undefined : v, _objectSpread(_objectSpread({}, e), {}, {
        triggerType: triggerType
      }));
    });

    _defineProperty(_assertThisInitialized(_this), "setInputValue", function (v, e) {
      var value = _this.getCurrentValidValue(v);

      if (_this.state.value !== value) {
        _this.setValue(value, e);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "setFocus", function (status) {
      var format = _this.props.format; // Only trigger `setState` if `format` is settled to avoid unnecessary rendering

      if (typeof format === 'function') {
        _this.setState({
          hasFocused: status
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "getPrecision", function () {
      var _assertThisInitialize2 = _assertThisInitialized(_this),
          props = _assertThisInitialize2.props;

      var stepString = props.step.toString();

      if (stepString.indexOf('e-') >= 0) {
        return parseInt(stepString.slice(stepString.indexOf('e-')), 10);
      }

      var precision = 0;

      if (stepString.indexOf('.') >= 0) {
        precision = stepString.length - stepString.indexOf('.') - 1;
      }

      return Math.max(precision, _this.props.precision);
    });

    _defineProperty(_assertThisInitialized(_this), "getPrecisionFactor", function () {
      var precision = _this.getPrecision();

      return Math.pow(10, precision);
    });

    _defineProperty(_assertThisInitialized(_this), "upStep", function (val) {
      var _this$props2 = _this.props,
          step = _this$props2.step,
          min = _this$props2.min;

      var precisionFactor = _this.getPrecisionFactor();

      var result;

      if (typeof val === 'number') {
        result = (precisionFactor * val + precisionFactor * step) / precisionFactor;
        result = _this.hackChrome(result);
      } else {
        result = min === -Infinity ? step : min;
      }

      return result;
    });

    _defineProperty(_assertThisInitialized(_this), "downStep", function (val) {
      var _this$props3 = _this.props,
          step = _this$props3.step,
          min = _this$props3.min;

      var precisionFactor = _this.getPrecisionFactor();

      var result;

      if (typeof val === 'number') {
        result = (precisionFactor * val - precisionFactor * step) / precisionFactor;
        result = _this.hackChrome(result);
      } else {
        result = min === -Infinity ? -step : min;
      }

      return result;
    });

    _defineProperty(_assertThisInitialized(_this), "hackChrome", function (value) {
      var precision = _this.getPrecision();

      if (precision > 0) {
        return Number(Number(value).toFixed(precision));
      }

      return value;
    });

    _defineProperty(_assertThisInitialized(_this), "step", function (type, disabled, e) {
      if (e) {
        e.preventDefault();
      }

      var _this$props4 = _this.props,
          onDisabled = _this$props4.onDisabled,
          min = _this$props4.min,
          max = _this$props4.max;

      if (disabled) {
        return onDisabled(e);
      }

      var value = _this.state.value;

      if (isNaN(value)) {
        return;
      }

      var val = _this["".concat(type, "Step")](value);

      if (val > max) {
        val = max;
      }

      if (val < min) {
        val = min;
      }

      _this.setValue(val, e, type);
    });

    _defineProperty(_assertThisInitialized(_this), "down", function (disabled, e) {
      _this.step('down', disabled, e);
    });

    _defineProperty(_assertThisInitialized(_this), "up", function (disabled, e) {
      _this.step('up', disabled, e);
    });

    _defineProperty(_assertThisInitialized(_this), "renderValue", function () {
      var _this$state = _this.state,
          value = _this$state.value,
          hasFocused = _this$state.hasFocused;
      var format = _this.props.format;
      return typeof format === 'function' && !hasFocused ? format(value) : value;
    });

    _defineProperty(_assertThisInitialized(_this), "focus", function () {
      _this.inputRef.getInstance().focus();
    });

    _defineProperty(_assertThisInitialized(_this), "saveInputRef", function (ref) {
      _this.inputRef = ref;
    });

    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
      e.preventDefault();
    });

    var _value;

    if ('value' in _props) {
      _value = _props.value;
    } else {
      _value = _props.defaultValue;
    }

    _this.state = {
      value: typeof _value === 'undefined' ? '' : _value,
      hasFocused: false
    };
    return _this;
  }

  _createClass(NumberPicker, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        var value = nextProps.value;
        this.setState({
          value: value === undefined || value === null ? '' : value
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$props5 = this.props,
          type = _this$props5.type,
          prefix = _this$props5.prefix,
          rtl = _this$props5.rtl,
          disabled = _this$props5.disabled,
          style = _this$props5.style,
          className = _this$props5.className,
          size = _this$props5.size,
          max = _this$props5.max,
          min = _this$props5.min,
          autoFocus = _this$props5.autoFocus,
          editable = _this$props5.editable,
          state = _this$props5.state,
          label = _this$props5.label,
          _this$props5$upBtnPro = _this$props5.upBtnProps,
          upBtnProps = _this$props5$upBtnPro === void 0 ? {} : _this$props5$upBtnPro,
          _this$props5$downBtnP = _this$props5.downBtnProps,
          downBtnProps = _this$props5$downBtnP === void 0 ? {} : _this$props5$downBtnP,
          innerAfter = _this$props5.innerAfter;
      var prefixCls = "".concat(prefix, "number-picker");
      var cls = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(this.props.type), this.props.type), _defineProperty(_classNames, "".concat(prefix).concat(size), true), _defineProperty(_classNames, className, className), _classNames));
      var upDisabled = false;
      var downDisabled = false;
      var value = this.state.value;

      if (!isNaN(value)) {
        var val = Number(value);

        if (val >= max) {
          upDisabled = true;
        }

        if (val <= min) {
          downDisabled = true;
        }
      }

      var extra = null;
      var addonBefore = null;
      var addonAfter = null;

      if (type === 'normal') {
        extra = /*#__PURE__*/React.createElement("span", {
          className: "".concat(prefixCls, "-handler")
        }, /*#__PURE__*/React.createElement(Button, _extends({}, upBtnProps, {
          type: "secondary",
          onMouseDown: this.handleMouseDown,
          disabled: disabled,
          className: "".concat(upBtnProps.className || '', " ").concat(upDisabled ? 'disabled' : ''),
          onClick: this.up.bind(this, upDisabled)
        }), /*#__PURE__*/React.createElement(Icon, {
          size: "xxs",
          type: "chevron-up"
        })), /*#__PURE__*/React.createElement(Button, _extends({}, downBtnProps, {
          type: "secondary",
          onMouseDown: this.handleMouseDown,
          disabled: disabled,
          className: "".concat(downBtnProps.className || '', " ").concat(downDisabled ? 'disabled' : ''),
          onClick: this.down.bind(this, downDisabled)
        }), /*#__PURE__*/React.createElement(Icon, {
          size: "xxs",
          type: "chevron-down"
        })));
      } else {
        addonBefore = /*#__PURE__*/React.createElement(Button, _extends({}, downBtnProps, {
          size: size,
          disabled: disabled,
          className: "".concat(downBtnProps.className || '', " ").concat(downDisabled ? 'disabled' : ''),
          onClick: this.down.bind(this, downDisabled)
        }), /*#__PURE__*/React.createElement(Icon, {
          type: "horizontal",
          size: "xs"
        }));
        addonAfter = /*#__PURE__*/React.createElement(Button, _extends({}, upBtnProps, {
          size: size,
          disabled: disabled,
          className: "".concat(upBtnProps.className || '', " ").concat(upDisabled ? 'disabled' : ''),
          onClick: this.up.bind(this, upDisabled)
        }), /*#__PURE__*/React.createElement(Icon, {
          type: "plus",
          size: "xs"
        }));
      }

      var others = obj.pickOthers(NumberPicker.propTypes, this.props);
      var dataAttrs = obj.pickAttrsWith(this.props, 'data-');
      return /*#__PURE__*/React.createElement("span", _extends({
        className: cls,
        style: style,
        dir: rtl ? 'rtl' : undefined
      }, dataAttrs), /*#__PURE__*/React.createElement(Input, _extends({}, others, {
        "aria-valuemax": max !== Infinity ? max : undefined,
        "aria-valuemin": min !== -Infinity ? min : undefined,
        state: state === 'error' ? 'error' : null,
        onBlur: this.onBlur,
        onFocus: this.onFocus,
        onKeyDown: this.onKeyDown,
        autoFocus: autoFocus,
        readOnly: !editable,
        value: this.renderValue(),
        disabled: disabled,
        size: size,
        onChange: this.onChange,
        ref: this.saveInputRef,
        label: label,
        innerAfter: innerAfter,
        extra: extra,
        addonBefore: addonBefore,
        addonAfter: addonAfter
      })));
    }
  }]);

  return NumberPicker;
}(React.Component);

_defineProperty(NumberPicker, "propTypes", {
  /**
   * 样式前缀
   */
  prefix: PropTypes.string,

  /**
   * 设置类型
   * @enumdesc 普通, 内联
   */
  type: PropTypes.oneOf(['normal', 'inline']),

  /**
   * 大小
   */
  size: PropTypes.oneOf(['medium']),

  /**
   * 当前值
   */
  value: PropTypes.number,

  /**
   * 默认值
   */
  defaultValue: PropTypes.number,

  /**
   * 是否禁用
   */
  disabled: PropTypes.bool,

  /**
   * 步长
   */
  step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

  /**
   * 保留小数点后位数
   */
  precision: PropTypes.number,

  /**
   * 用户是否可以输入
   */
  editable: PropTypes.bool,

  /**
   * 自动焦点
   */
  autoFocus: PropTypes.bool,

  /**
   * 数值被改变的事件
   * @param {Number} value 数据
   * @param {Event} e DOM事件对象
   */
  onChange: PropTypes.func,

  /**
   * 键盘按下
   */
  onKeyDown: PropTypes.func,

  /**
   * 焦点获得
   */
  onFocus: PropTypes.func,

  /**
   * 焦点失去
   */
  onBlur: PropTypes.func,

  /**
   * 数值订正后的回调
   * @param {Object} obj {currentValue,oldValue:String}
   */
  onCorrect: PropTypes.func,
  onDisabled: PropTypes.func,
  // 兼容0.x onDisabled

  /**
   * 最大值
   */
  max: PropTypes.number,

  /**
   * 最小值
   */
  min: PropTypes.number,

  /**
   * 自定义class
   */
  className: PropTypes.string,

  /**
   * 自定义内联样式
   */
  style: PropTypes.object,
  state: PropTypes.oneOf(['error']),

  /**
   * 格式化当前值
   * @param {Number} value
   * @return {String|Number}
   */
  format: PropTypes.func,

  /**
   * 增加按钮的props
   */
  upBtnProps: PropTypes.object,

  /**
   * 减少按钮的props
   */
  downBtnProps: PropTypes.object,

  /**
   * 内联 label
   */
  label: PropTypes.node,

  /**
   * inner after
   */
  innerAfter: PropTypes.node,
  rtl: PropTypes.bool
});

_defineProperty(NumberPicker, "defaultProps", {
  prefix: 'next-',
  max: Infinity,
  min: -Infinity,
  type: 'normal',
  size: 'medium',
  step: 1,
  style: {},
  precision: 0,
  editable: true,
  onChange: func.noop,
  onKeyDown: func.noop,
  onBlur: func.noop,
  onCorrect: func.noop,
  onDisabled: func.noop
});

export default NumberPicker;