@rio-cloud/rio-uikit 0.15.0-beta-48 → 0.15.0-beta-49

package/lib/components/numberControl/NumberControl.js

@@ -9,15 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -25,158 +21,176 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _NumberInput = _interopRequireDefault(require("../numberInput/NumberInput"));
+var _NumberInput = _interopRequireWildcard(require("../numberInput/NumberInput"));
+
+var _excluded = ["min", "max", "step", "value", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+var INITIAL_TICK = 700;
+var TICK_TIME = 50;
 
-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; } }
+var NumberControl = function NumberControl(props) {
+  var _props$min = props.min,
+      min = _props$min === void 0 ? _NumberInput.defaultProps.min : _props$min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? _NumberInput.defaultProps.max : _props$max,
+      _props$step = props.step,
+      step = _props$step === void 0 ? _NumberInput.defaultProps.step : _props$step,
+      _props$value = props.value,
+      value = _props$value === void 0 ? _NumberInput.defaultProps.value : _props$value,
+      _props$onValueChanged = props.onValueChanged,
+      onValueChanged = _props$onValueChanged === void 0 ? function () {} : _props$onValueChanged,
+      disabled = props.disabled,
+      bsSize = props.bsSize,
+      className = props.className,
+      unit = props.unit,
+      inputAddon = props.inputAddon,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var timeout = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isHoldingDownInc = _useState2[0],
+      setIsHoldingDownInc = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isHoldingDownDec = _useState4[0],
+      setIsHoldingDownDec = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(value),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      internalValue = _useState6[0],
+      setInternalValue = _useState6[1];
+
+  var initialTimeout = function initialTimeout(callback) {
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(function () {
+      callback();
+    }, INITIAL_TICK);
+  };
+
+  var recursiveTimeout = function recursiveTimeout(callback) {
+    timeout.current = setTimeout(function () {
+      callback();
+    }, TICK_TIME);
+  };
+
+  (0, _react.useEffect)(function () {
+    // Call increment function for a loop when button is holding down
+    if (isHoldingDownInc && !disabled) {
+      initialTimeout(incrementRecusively);
+    } // Call decrement function for a loop when button is holding down
+
+
+    if (isHoldingDownDec && !disabled) {
+      initialTimeout(decrementRecursively);
+    }
+  }, [isHoldingDownInc, isHoldingDownDec]);
+
+  var incrementInternalValue = function incrementInternalValue() {
+    setInternalValue(function (val) {
+      var currentValue = (0, _NumberInput.convertNonIntegerToDefault)(val);
+      var newValue = currentValue + step;
+      return newValue <= max ? newValue : val;
+    });
+  };
+
+  var decrementInternalValue = function decrementInternalValue() {
+    setInternalValue(function (val) {
+      var currentValue = (0, _NumberInput.convertNonIntegerToDefault)(val);
+      var newValue = currentValue - step;
+      return newValue >= min ? newValue : val;
+    });
+  };
+
+  var incrementRecusively = function incrementRecusively() {
+    incrementInternalValue();
+    recursiveTimeout(incrementRecusively);
+  };
+
+  var decrementRecursively = function decrementRecursively() {
+    decrementInternalValue();
+    recursiveTimeout(decrementRecursively);
+  };
+
+  var handleMouseDownOnIncrement = function handleMouseDownOnIncrement() {
+    if (disabled) {
+      return;
+    }
 
-var INITIAL_TICK = 200;
-var TICK_TIME = 50;
+    setIsHoldingDownInc(true); // increment for first click
 
-var NumberControl = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(NumberControl, _Component);
+    incrementInternalValue();
+  };
 
-  var _super = _createSuper(NumberControl);
+  var handleMouseDownOnDecrement = function handleMouseDownOnDecrement() {
+    if (disabled) {
+      return;
+    }
 
-  function NumberControl() {
-    var _this;
+    setIsHoldingDownDec(true); // decrement for first click
 
-    (0, _classCallCheck2.default)(this, NumberControl);
-    _this = _super.call(this);
-    _this.isHolding = false;
-    _this.timeOutFunction = undefined;
-    return _this;
-  }
+    decrementInternalValue();
+  };
 
-  (0, _createClass2.default)(NumberControl, [{
-    key: "increment",
-    value: function increment() {
-      var _this2 = this;
+  var handleStopHolding = function handleStopHolding() {
+    clearTimeout(timeout.current);
+    setIsHoldingDownInc(false);
+    setIsHoldingDownDec(false);
+  };
 
-      if (this.isHolding && !this.props.disabled) {
-        this.numberInput.incrementValue();
-        this.timeOutFunction = setTimeout(function () {
-          _this2.increment();
-        }, TICK_TIME);
-      }
-    }
-  }, {
-    key: "decrement",
-    value: function decrement() {
-      var _this3 = this;
-
-      if (this.isHolding && !this.props.disabled) {
-        this.numberInput.decrementValue();
-        this.timeOutFunction = setTimeout(function () {
-          _this3.decrement();
-        }, TICK_TIME);
-      }
-    }
-  }, {
-    key: "onIncrement",
-    value: function onIncrement() {
-      var _this4 = this;
-
-      if (!this.props.disabled) {
-        this.isHolding = true;
-        this.numberInput.incrementValue();
-        clearTimeout(this.timeOutFunction);
-        this.timeOutFunction = setTimeout(function () {
-          _this4.increment();
-        }, INITIAL_TICK);
-      }
-    }
-  }, {
-    key: "onDecrement",
-    value: function onDecrement() {
-      var _this5 = this;
-
-      if (!this.props.disabled) {
-        this.isHolding = true;
-        this.numberInput.decrementValue();
-        clearTimeout(this.timeOutFunction);
-        this.timeOutFunction = setTimeout(function () {
-          _this5.decrement();
-        }, INITIAL_TICK);
-      }
+  var handleUpdatedNumberInputValue = function handleUpdatedNumberInputValue(value) {
+    // Set the internal value when the value of the actual input has changed,
+    // for instance the user has typed in a number manually and to
+    // use this number as base to increase or decrease from.
+    // Ignore empty value in case the user has removed it
+    if (value && (!isHoldingDownDec || !isHoldingDownInc)) {
+      setInternalValue(Number(value));
     }
-  }, {
-    key: "stopHolding",
-    value: function stopHolding() {
-      this.isHolding = false;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this6 = this;
-
-      var _this$props = this.props,
-          min = _this$props.min,
-          max = _this$props.max,
-          value = _this$props.value,
-          step = _this$props.step,
-          onValueChanged = _this$props.onValueChanged,
-          disabled = _this$props.disabled,
-          bsSize = _this$props.bsSize,
-          className = _this$props.className,
-          unit = _this$props.unit,
-          inputAddon = _this$props.inputAddon;
-      var classes = (0, _classnames.default)('NumberControl', 'form-group', className);
-      var inputGroupClassNames = (0, _classnames.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classes
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: inputGroupClassNames
-      }, inputAddon && /*#__PURE__*/_react.default.createElement("span", {
-        className: 'input-group-addon'
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: inputAddon
-      })), /*#__PURE__*/_react.default.createElement(_NumberInput.default, {
-        min: min,
-        max: max,
-        value: value,
-        step: step,
-        disabled: disabled,
-        onValueChanged: onValueChanged,
-        ref: function ref(child) {
-          _this6.numberInput = child;
-        }
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: 'input-group-addon'
-      }, unit && /*#__PURE__*/_react.default.createElement("div", {
-        className: 'margin-right-5'
-      }, unit), /*#__PURE__*/_react.default.createElement("div", {
-        onMouseDown: function onMouseDown() {
-          return _this6.onDecrement();
-        },
-        onMouseUp: function onMouseUp() {
-          return _this6.stopHolding();
-        },
-        className: 'text-color-gray hover-text-color-dark'
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'rioglyph rioglyph-minus scale-90'
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        onMouseDown: function onMouseDown() {
-          return _this6.onIncrement();
-        },
-        onMouseUp: function onMouseUp() {
-          return _this6.stopHolding();
-        },
-        className: 'text-color-gray hover-text-color-dark margin-left-5'
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'rioglyph rioglyph-plus scale-90'
-      })))));
-    }
-  }]);
-  return NumberControl;
-}(_react.Component);
 
-exports.default = NumberControl;
+    onValueChanged(value);
+  };
+
+  var classes = (0, _classnames.default)('NumberControl', 'form-group', className);
+  var inputGroupClassNames = (0, _classnames.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
+    className: classes
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: inputGroupClassNames
+  }, inputAddon && /*#__PURE__*/_react.default.createElement("span", {
+    className: 'input-group-addon'
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: inputAddon
+  })), /*#__PURE__*/_react.default.createElement(_NumberInput.default, {
+    min: min,
+    max: max,
+    value: internalValue,
+    step: step,
+    disabled: disabled,
+    onValueChanged: handleUpdatedNumberInputValue
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'input-group-addon'
+  }, unit && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'margin-right-5'
+  }, unit), /*#__PURE__*/_react.default.createElement("div", {
+    onMouseDown: handleMouseDownOnDecrement,
+    onMouseUp: handleStopHolding,
+    className: 'decrementButton text-color-gray hover-text-color-dark'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'rioglyph rioglyph-minus scale-90'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    onMouseDown: handleMouseDownOnIncrement,
+    onMouseUp: handleStopHolding,
+    className: 'incrementButton text-color-gray hover-text-color-dark margin-left-5'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'rioglyph rioglyph-plus scale-90'
+  })))));
+};
+
 NumberControl.propTypes = {
   min: _propTypes.default.number,
   max: _propTypes.default.number,
@@ -188,4 +202,6 @@ NumberControl.propTypes = {
   className: _propTypes.default.string,
   unit: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   inputAddon: _propTypes.default.string
-};
+};
+var _default = NumberControl;
+exports.default = _default;