@autobest-ui/components 2.1.1 → 2.2.0

package/lib/input-number/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.InputNumberNotRef = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,6 +13,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("@autobest-ui/utils");
 
+var _constants = require("./constants");
+
+var _ControlArrow = _interopRequireDefault(require("./ControlArrow"));
+
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
     _extendStatics = Object.setPrototypeOf || {
@@ -57,588 +61,351 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var cls = 'ab-input-number'; // TODO: 重构组件
-
-var InputNumber =
+var InputNumberNotRef =
 /** @class */
 function (_super) {
-  __extends(InputNumber, _super);
+  __extends(InputNumberNotRef, _super);
 
-  function InputNumber(props) {
+  function InputNumberNotRef(props) {
     var _this = _super.call(this, props) || this;
 
-    _this.currentRef = /*#__PURE__*/_react.default.createRef();
+    _this.prefixCls = 'ab-input-number';
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
+    /**
+     * 解析用户输入的内容，并返回解析后的结果
+     * @param originalValue
+     */
 
-    _this.onFocus = function (e) {
-      var _a = _this.props,
-          visibleButton = _a.visibleButton,
-          onFocus = _a.onFocus;
-
-      if (onFocus) {
-        onFocus(e);
+    _this.getParserOriginalValue = function (originalValue) {
+      // 输入为空
+      if ((0, _utils.isBlank)(originalValue)) {
+        return undefined;
       }
 
-      if (!visibleButton) {
-        return;
+      if (!_constants.NumberReg.test(originalValue) || _constants.FirstZeroReg.test(originalValue)) {
+        return (0, _utils.isBlank)(_this.state.parserValue) ? undefined : _this.state.parserValue.toString();
       }
 
-      _this.setState({
-        focus: true
-      });
-    };
-
-    _this.onBlur = function (e) {
       var _a = _this.props,
-          visibleButton = _a.visibleButton,
-          onBlur = _a.onBlur;
+          min = _a.min,
+          max = _a.max,
+          precision = _a.precision;
+      var currentValue = parseFloat(originalValue);
 
-      if (onBlur) {
-        onBlur(e);
+      if (!(0, _utils.isBlank)(min) && currentValue < min) {
+        currentValue = min;
       }
 
-      if (!visibleButton) {
-        return;
+      if (!(0, _utils.isBlank)(max) && currentValue > max) {
+        currentValue = max;
       }
 
-      _this.setState({
-        focus: false
-      });
+      return (0, _utils.toFixed)(currentValue, precision);
     };
+    /**
+     * 键盘和点击上下按钮更新value值
+     * @param isUp
+     */
 
-    _this.onMouseEnter = function () {
-      if (!_this.props.visibleButton) {
-        return;
-      }
-
-      _this.setState({
-        enter: true
-      }, function () {
-        _this.getLocationInfo();
-      });
-    };
 
-    _this.onMouseLeave = function () {
-      if (!_this.props.visibleButton) {
-        return;
-      }
+    _this.changeValueWithStep = function (isUp) {
+      var step = _this.props.step;
+      var prevValue = _this.state.parserValue ? _this.state.parserValue : 0;
+      var keyboardValue = isUp ? prevValue + step : prevValue - step;
 
-      _this.setState({
-        enter: false
-      });
-    };
+      var parserValueStr = _this.getParserOriginalValue(keyboardValue.toString());
 
-    _this.onMouseMove = function (ev) {
-      if (!_this.props.visibleButton) {
-        return;
-      }
+      var parserValue = (0, _utils.getNumberFromString)(parserValueStr);
+      var _a = _this.props,
+          name = _a.name,
+          onChange = _a.onChange;
 
-      var _a = _this.getElement(),
-          inputEl = _a.inputEl,
-          addBtnEl = _a.addBtnEl,
-          subBtnEl = _a.subBtnEl;
+      if (prevValue !== parserValue) {
+        if (onChange) {
+          onChange(parserValue, name);
+          return;
+        }
 
-      if (!inputEl || !addBtnEl || !subBtnEl) {
-        return;
+        _this.setState({
+          parserValue: parserValue,
+          originalValueStr: parserValueStr
+        });
       }
+    };
+    /**
+     * 设置input焦点
+     */
 
-      var _b = _this.getMouseElement(ev),
-          isAdd = _b.isAdd,
-          isSub = _b.isSub;
 
-      if (isAdd) {
-        inputEl.style.cursor = 'default';
-        addBtnEl.setAttribute('class', "".concat(cls, "-button ").concat(cls, "-hover"));
-        return;
-      }
+    _this.setInputFocus = function () {
+      var element = _this.inputRef.current;
 
-      if (isSub) {
-        inputEl.style.cursor = 'default';
-        subBtnEl.setAttribute('class', "".concat(cls, "-button ").concat(cls, "-hover"));
+      if (!element) {
         return;
       }
 
-      inputEl.style.cursor = 'text';
-      addBtnEl.setAttribute('class', "".concat(cls, "-button"));
-      subBtnEl.setAttribute('class', "".concat(cls, "-button"));
+      element.focus();
     };
 
-    _this.onMouseDown = function (ev) {
-      if (!_this.props.visibleButton) {
+    _this.onKeyboard = function (ev) {
+      if (_this.props.disabled) {
         return;
       }
 
-      var _a = _this.getElement(),
-          addBtnEl = _a.addBtnEl,
-          subBtnEl = _a.subBtnEl;
-
-      if (!addBtnEl || !subBtnEl) {
-        return;
-      } // 按下时清除move事件
-
-
-      if (_this.mouseMoveHandler) {
-        _this.mouseMoveHandler.remove();
-
-        _this.mouseMoveHandler = null;
-      }
-
-      var _b = _this.getMouseElement(ev),
-          isAdd = _b.isAdd,
-          isSub = _b.isSub;
-
-      if (isAdd) {
-        addBtnEl.setAttribute('class', "".concat(cls, "-button ").concat(cls, "-active"));
-
-        _this.onAdd();
-      }
-
-      if (isSub) {
-        subBtnEl.setAttribute('class', "".concat(cls, "-button ").concat(cls, "-active"));
-
-        _this.onSub();
-      }
-
-      _this.addMouseUpListener();
-    };
-
-    _this.onMouseUp = function () {
-      if (_this.mouseUpHandler) {
-        _this.mouseUpHandler.remove();
+      if (ev.code === 'ArrowUp' || ev.code === 'ArrowDown') {
+        ev.preventDefault();
 
-        _this.mouseUpHandler = null;
+        _this.changeValueWithStep(ev.code === 'ArrowUp');
       }
-
-      var _a = _this.getElement(),
-          addBtnEl = _a.addBtnEl,
-          subBtnEl = _a.subBtnEl;
-
-      if (addBtnEl && subBtnEl) {
-        addBtnEl.setAttribute('class', "".concat(cls, "-button"));
-        subBtnEl.setAttribute('class', "".concat(cls, "-button"));
-      } // 重新添加move事件
-
-
-      _this.addMouseMoveListener();
     };
 
-    _this.addMouseMoveListener = function () {
-      var inputEl = _this.getElement().inputEl;
-
-      if (!inputEl) {
+    _this.onFocus = function (ev) {
+      if (_this.props.disabled) {
         return;
       }
 
-      _this.mouseMoveHandler = (0, _utils.addEventListener)(inputEl, 'mousemove', _this.onMouseMove);
-    };
-
-    _this.addMouseUpListener = function () {
-      _this.mouseUpHandler = (0, _utils.addEventListener)(window.document, 'mouseup', _this.onMouseUp);
-    };
-
-    _this.getElement = function () {
-      var element = _this.currentRef.current;
-      var inputEl;
-      var buttonEl;
-      var addBtnEl;
-      var subBtnEl;
-
-      if (element && element.childNodes.length) {
-        inputEl = element.childNodes[0];
-      }
-
-      if (element && element.childNodes.length > 1) {
-        buttonEl = element.childNodes[1];
-        addBtnEl = buttonEl.children[0];
-        subBtnEl = buttonEl.children[1];
+      if (!_this.state.isFocusInput) {
+        _this.setState({
+          isFocusInput: true
+        });
       }
 
-      return {
-        inputEl: inputEl,
-        addBtnEl: addBtnEl,
-        subBtnEl: subBtnEl
-      };
-    }; // 判断鼠标是否在按钮位置，在哪个按钮
-
-
-    _this.getMouseElement = function (ev) {
-      var isAdd = _this.isInside(ev, _this.addLocationInfo);
-
-      var isSub = _this.isInside(ev, _this.subLocationInfo);
-
-      return {
-        isAdd: isAdd,
-        isSub: isSub
-      };
-    };
-
-    _this.isInside = function (ev, locationInfo) {
-      if (!locationInfo) {
-        return false;
+      if (_this.props.keyboard && !_this.keyboardHandler) {
+        _this.keyboardHandler = (0, _utils.addEventListener)(ev.target, 'keydown', _this.onKeyboard);
       }
-
-      var pageX = ev.pageX,
-          pageY = ev.pageY;
-      var left = locationInfo.left,
-          top = locationInfo.top,
-          width = locationInfo.width,
-          height = locationInfo.height;
-      return pageX > left && pageX < left + width && pageY > top && pageY < top + height;
     };
 
-    _this.getLocationInfo = function () {
-      var _a = _this.getElement(),
-          addBtnEl = _a.addBtnEl,
-          subBtnEl = _a.subBtnEl;
+    _this.onBlur = function (ev) {
+      if (_this.keyboardHandler) {
+        _this.keyboardHandler.remove();
 
-      if (!addBtnEl || !subBtnEl) {
-        return;
+        _this.keyboardHandler = null;
       }
 
-      _this.addLocationInfo = (0, _utils.getOffsetAndSize)(addBtnEl);
-      _this.subLocationInfo = (0, _utils.getOffsetAndSize)(subBtnEl);
-    }; // 不需要根据props的value更新
-
-
-    _this.getCurrentValue = function (value) {
-      var _a = _this.props,
-          min = _a.min,
-          max = _a.max;
-      var valueNumber = parseFloat(value);
-      var packMultiple = _this.props.packMultiple || 1; // 取大于等于值且是打包个数倍数的值
-
-      var ceilNumber = Math.ceil(valueNumber / packMultiple) * packMultiple; // 当值在临界点和临界点之外时
-
-      if (ceilNumber <= min) {
-        return Math.ceil(min / packMultiple) * packMultiple;
+      if (_this.state.isFocusInput) {
+        _this.setState({
+          isFocusInput: false
+        });
       }
 
-      if (ceilNumber >= max) {
-        return Math.floor(max / packMultiple) * packMultiple;
+      if (_this.props.disabled) {
+        return;
       }
 
-      return ceilNumber;
-    };
-
-    _this.getPadDigitalValue = function (value) {
+      var originalValueStr = ev.target.value;
       var _a = _this.props,
-          digital = _a.digital,
-          padDigital = _a.padDigital;
+          name = _a.name,
+          onBlur = _a.onBlur,
+          onChange = _a.onChange,
+          onContinualChange = _a.onContinualChange;
 
-      if (!padDigital || (0, _utils.isBlank)(value) || !digital) {
-        return value;
-      }
+      var parserValueStr = _this.getParserOriginalValue(originalValueStr);
 
-      var resultArr = value.split('.');
-      return "".concat(resultArr[0], ".").concat((resultArr[1] || '').padEnd(digital, '0'));
-    };
+      var parserValue = (0, _utils.getNumberFromString)(parserValueStr);
 
-    _this.onChangePackMultipleValue = function (value) {
-      var currentValue = _this.getCurrentValue(value).toString();
+      _this.setState({
+        originalValueStr: parserValueStr
+      });
 
-      var _a = _this.props,
-          onChange = _a.onChange,
-          onChangePackMultipleAfter = _a.onChangePackMultipleAfter,
-          name = _a.name;
-      onChange(currentValue, name);
+      if ('value' in _this.props && parserValue !== _this.props.value || parserValue !== _this.state.parserValue) {
+        // 触发onChange, 因为在onChange阶段，不合法将不会触发，当用户结束输入后触发最后一次合法的onChange
+        if (onContinualChange) {
+          onContinualChange(parserValueStr, parserValue, name);
+        }
 
-      if (onChangePackMultipleAfter) {
-        onChangePackMultipleAfter(currentValue, name);
+        if (onChange) {
+          onChange(parserValue, name);
+        } else {
+          _this.setState({
+            parserValue: parserValue
+          });
+        }
       }
-    };
-
-    _this.onPadDigital = function (value) {
-      var currentValue = _this.getPadDigitalValue(value);
-
-      var _a = _this.props,
-          onChange = _a.onChange,
-          name = _a.name;
 
-      if (value !== currentValue) {
-        onChange(currentValue, name);
+      if (onBlur) {
+        onBlur(parserValue, name);
       }
     };
+    /**
+     * 修改value值的回调
+     * 注：value值当不在合法时，将不再触发onChange
+     * 在输入结束后（onBlur时），触发最后一次
+     * @param ev
+     */
 
-    _this.getPadDigitalDebounce = function () {
-      if (_this.padDigitalDebounce) {
-        return _this.padDigitalDebounce;
-      }
-
-      _this.padDigitalDebounce = (0, _utils.debounce)(_this.onPadDigital, _this.props.delay);
-      return _this.padDigitalDebounce;
-    };
 
-    _this.getChangePackMultipleValueDebounce = function () {
-      if (_this.changePackMultipleValueDebounce) {
-        return _this.changePackMultipleValueDebounce;
+    _this.onChangeValue = function (ev) {
+      if (_this.props.disabled) {
+        return;
       }
 
-      _this.changePackMultipleValueDebounce = (0, _utils.debounce)(_this.onChangePackMultipleValue, _this.props.delay);
-      return _this.changePackMultipleValueDebounce;
-    };
+      var originalValueStr = ev.target.value;
+
+      var parserValueStr = _this.getParserOriginalValue(originalValueStr);
 
-    _this.callback = function (value, ignoreDelay) {
+      var parserValue = (0, _utils.getNumberFromString)(parserValueStr);
       var _a = _this.props,
           name = _a.name,
           onChange = _a.onChange,
-          onChangePackMultipleBefore = _a.onChangePackMultipleBefore,
-          packMultiple = _a.packMultiple,
-          padDigital = _a.padDigital;
+          onContinualChange = _a.onContinualChange;
 
-      if (onChange && value !== _this.props.value) {
-        onChange(value, name);
+      if (onContinualChange) {
+        onContinualChange(originalValueStr, parserValue, name);
       }
 
-      if (packMultiple && !(0, _utils.isBlank)(value) && parseFloat(value) % packMultiple !== 0) {
-        if (onChangePackMultipleBefore) {
-          onChangePackMultipleBefore(value, name);
-        }
+      _this.setState({
+        originalValueStr: originalValueStr
+      }); // 若输入的内容不合法，将不再触发onChange/setStates
+      // 在输入结束后（onBlur时），触发一次
 
-        if (ignoreDelay) {
-          _this.onChangePackMultipleValue(value);
-        } else {
-          _this.getChangePackMultipleValueDebounce()(value);
-        }
 
+      if (parserValueStr !== originalValueStr) {
         return;
       }
 
-      if (padDigital) {
-        if (ignoreDelay) {
-          _this.onPadDigital(value);
-
-          return;
-        }
-
-        _this.getPadDigitalDebounce()(value);
-      }
-    };
-
-    _this.onValueChange = function (ev, ignoreDelay) {
-      if (_this.changePackMultipleValueDebounce) {
-        _this.changePackMultipleValueDebounce.cancel();
-      }
-
-      var _a = _this.props,
-          min = _a.min,
-          max = _a.max,
-          digital = _a.digital,
-          value = _a.value;
-      var currentValue = ev.target.value.toString(); // 输入为空
-
-      if ((0, _utils.isBlank)(currentValue)) {
-        _this.callback('', ignoreDelay);
-
+      if (onChange) {
+        onChange(parserValue, name);
         return;
       }
 
-      var preValue = value.toString(); // 输入的不是数字格式
-
-      var reg = /^-$|(^(-?\d+)(\.\d*)?)$/;
-
-      if (!reg.test(currentValue)) {
-        _this.callback(preValue, ignoreDelay);
-
-        return;
-      } // 0开头后面直接是数字，没有点如：011， 这是不合法的
-
-
-      var zeroReg = /^0\d+$/;
+      _this.setState({
+        parserValue: parserValue
+      });
+    };
 
-      if (zeroReg.test(currentValue)) {
-        _this.callback(preValue, ignoreDelay);
+    _this.onKeyup = function (ev) {
+      ev.preventDefault();
 
+      if (!_this.props.controls || _this.props.disabled) {
         return;
-      } // 小数位数限制
-
-
-      if (digital) {
-        currentValue = new RegExp("[^.]+([.](\\d{0,".concat(digital, "}))?")).exec(currentValue)[0].toString();
       }
 
-      var valueNumber = parseFloat(currentValue);
-
-      if (!(0, _utils.isBlank)(min)) {
-        if (min > valueNumber) {
-          _this.callback(preValue, ignoreDelay);
+      _this.setInputFocus();
 
-          return;
-        } // 如果min>= 0, 将阻止输入-
-
-
-        if (min >= 0 && currentValue.indexOf('-') > -1) {
-          _this.callback('', ignoreDelay);
-
-          return;
-        }
-      }
+      _this.changeValueWithStep(true);
+    };
 
-      if (!(0, _utils.isBlank)(max) && max < valueNumber) {
-        _this.callback(preValue, ignoreDelay);
+    _this.onKeydown = function (ev) {
+      ev.preventDefault();
 
+      if (!_this.props.controls || _this.props.disabled) {
         return;
       }
 
-      if (!digital && currentValue.indexOf('.') > -1) {
-        _this.callback(preValue, ignoreDelay);
-
-        return;
-      }
+      _this.setInputFocus();
 
-      _this.callback(currentValue, ignoreDelay);
+      _this.changeValueWithStep(false);
     };
 
-    _this.getValueCalculate = function (value, offset) {
-      var valueStr = value.toString();
-      var offsetStr = offset.toString();
-
-      if (valueStr.indexOf('.') < 0 && offsetStr.indexOf('.') < 0) {
-        return value + offset;
+    _this.onMouseEnter = function () {
+      if (!_this.props.controls || _this.state.isEnterInput || _this.props.disabled) {
+        return;
       }
 
-      var digital = _this.props.digital;
-      var powValue = Math.pow(10, digital);
-      return Math.round((value + offset) * powValue) / powValue;
+      _this.setState({
+        isEnterInput: true
+      });
     };
 
-    _this.onAdd = function () {
-      var _a = _this.props,
-          packMultiple = _a.packMultiple,
-          value = _a.value;
-      var step = packMultiple || 1; // valueNumber 可能为NaN
-
-      var ev = {
-        target: {
-          value: _this.getPadDigitalValue(_this.getValueCalculate(Number(value), step).toString())
-        }
-      };
-
-      _this.onValueChange(ev);
-    };
+    _this.onMouseLeave = function () {
+      if (!_this.props.controls || !_this.state.isEnterInput || _this.props.disabled) {
+        return;
+      }
 
-    _this.onSub = function () {
-      var _a = _this.props,
-          packMultiple = _a.packMultiple,
-          value = _a.value;
-      var step = packMultiple || 1;
-      var ev = {
-        target: {
-          value: _this.getPadDigitalValue(_this.getValueCalculate(Number(value), step * -1).toString())
-        }
-      };
-
-      _this.onValueChange(ev);
-    }; // 渲染加减按钮
-
-
-    _this.renderButton = function () {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(cls, "-button-wrap")
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(cls, "-button"),
-        onClick: _this.onAdd
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(cls, "-add")
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(cls, "-button"),
-        onClick: _this.onSub
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(cls, "-sub")
-      })));
+      _this.setState({
+        isEnterInput: false
+      });
     };
 
+    var defaultValueStr = (0, _utils.toFixed)(props.defaultValue, props.precision);
     _this.state = {
-      enter: false,
-      focus: false
+      originalValueStr: defaultValueStr,
+      parserValue: (0, _utils.getNumberFromString)(defaultValueStr),
+      isEnterInput: false,
+      isFocusInput: false
     };
     return _this;
   }
 
-  InputNumber.prototype.componentDidMount = function () {
-    this.addMouseMoveListener();
-    this.onValueChange({
-      target: {
-        value: this.props.value
-      }
-    }, true);
-  };
+  InputNumberNotRef.getDerivedStateFromProps = function (nextProps, prevStates) {
+    var nextState = {}; // 判断是否为受控方式
 
-  InputNumber.prototype.componentWillUnmount = function () {
-    if (this.mouseUpHandler) {
-      this.mouseUpHandler.remove();
-      this.mouseUpHandler = null;
-    }
+    if ('value' in nextProps) {
+      var fixedValueStr = (0, _utils.toFixed)(nextProps.value, nextProps.precision);
 
-    if (this.mouseMoveHandler) {
-      this.mouseMoveHandler.remove();
-      this.mouseMoveHandler = null;
+      if (nextProps.value !== prevStates.parserValue) {
+        nextState.parserValue = (0, _utils.getNumberFromString)(fixedValueStr);
+        nextState.originalValueStr = fixedValueStr;
+      }
     }
 
-    if (this.padDigitalDebounce) {
-      this.padDigitalDebounce.cancel();
-      this.padDigitalDebounce = null;
+    if ((0, _utils.isEmptyObject)(nextState)) {
+      return null;
     }
 
-    if (this.changePackMultipleValueDebounce) {
-      this.changePackMultipleValueDebounce.cancel();
-      this.changePackMultipleValueDebounce = null;
-    }
+    return nextState;
   };
 
-  InputNumber.prototype.render = function () {
-    var copyProps = __assign({}, this.props);
-
-    delete copyProps.onChangePackMultipleBefore;
-    delete copyProps.onChangePackMultipleAfter;
-    delete copyProps.digital;
-    delete copyProps.padDigital;
-    delete copyProps.packMultiple;
-    delete copyProps.visibleButton;
-    delete copyProps.onChange;
-    delete copyProps.min;
-    delete copyProps.max;
-    delete copyProps.delay;
-
-    if ((0, _utils.isBlank)(copyProps.name)) {
-      delete copyProps.name;
+  InputNumberNotRef.prototype.componentWillUnmount = function () {
+    if (this.keyboardHandler) {
+      this.keyboardHandler.remove();
+      this.keyboardHandler = null;
     }
+  };
 
-    var _a = this.props,
-        className = _a.className,
-        visibleButton = _a.visibleButton;
-    var _b = this.state,
-        enter = _b.enter,
-        focus = _b.focus;
-    var inputStyle = visibleButton ? {
-      paddingRight: '.2rem'
-    } : {};
-    return /*#__PURE__*/_react.default.createElement("label", {
-      className: "".concat(cls, "-wrap"),
-      ref: this.currentRef
-    }, /*#__PURE__*/_react.default.createElement("input", __assign({}, copyProps, {
-      className: (0, _classnames.default)(cls, className),
+  InputNumberNotRef.prototype.render = function () {
+    var _a, _b, _c;
+
+    var cls = this.prefixCls;
+    var _d = this.props,
+        upperRef = _d.upperRef,
+        className = _d.className,
+        placeholder = _d.placeholder,
+        disabled = _d.disabled,
+        style = _d.style,
+        controls = _d.controls;
+    var _e = this.state,
+        isEnterInput = _e.isEnterInput,
+        isFocusInput = _e.isFocusInput,
+        originalValueStr = _e.originalValueStr;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(cls, className, (_a = {}, _a["".concat(cls, "-enter")] = isEnterInput || isFocusInput, _a), (_b = {}, _b["".concat(cls, "-focus")] = isFocusInput, _b), (_c = {}, _c["".concat(cls, "-disabled")] = disabled, _c)),
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "".concat(cls, "-control"),
+      ref: (0, _utils.composeRef)(this.inputRef, upperRef),
       type: "text",
-      onChange: this.onValueChange,
-      onMouseDown: this.onMouseDown,
+      placeholder: placeholder,
+      disabled: disabled,
+      style: style,
+      value: originalValueStr || '',
+      onChange: this.onChangeValue,
       onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave,
-      style: inputStyle
-    })), visibleButton && (enter || focus) ? this.renderButton() : null);
+      onBlur: this.onBlur
+    }), controls ? /*#__PURE__*/_react.default.createElement(_ControlArrow.default, {
+      cls: this.prefixCls,
+      onKeyup: this.onKeyup,
+      onKeydown: this.onKeydown
+    }) : null);
   };
 
-  InputNumber.defaultProps = {
-    value: '',
-    name: '',
-    size: 3,
-    disabled: false,
-    digital: 0,
-    padDigital: false,
-    delay: 1000,
-    visibleButton: false
+  InputNumberNotRef.defaultProps = {
+    defaultValue: '',
+    controls: true,
+    step: 1,
+    keyboard: true
   };
-  return InputNumber;
+  return InputNumberNotRef;
 }(_react.default.Component);
 
+exports.InputNumberNotRef = InputNumberNotRef;
+
+var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(InputNumberNotRef, __assign({}, props, {
+    upperRef: ref
+  }));
+});
+
 var _default = InputNumber;
 exports.default = _default;