@rio-cloud/rio-uikit 0.15.0-beta-46 → 0.15.0

package/lib/components/numberInput/NumberInput.js

@@ -7,17 +7,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaultProps = exports.default = exports.convertNonIntegerToDefault = 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,246 +21,167 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _useAfterMount = _interopRequireDefault(require("../../hooks/useAfterMount"));
+
+var _excluded = ["unit", "inputAddon", "className", "bsSize", "disabled", "onValueChanged", "min", "max", "value", "step", "type"];
+
 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); }; }
-
-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 defaultProps = {
+  min: 0,
+  max: Number.MAX_VALUE,
+  value: 0,
+  step: 1
+};
+exports.defaultProps = defaultProps;
+
+var getStepFromProps = function getStepFromProps(propStep, defaultStep, max, min) {
+  return Number.isInteger(propStep) && propStep < Math.abs(max - min) ? propStep : defaultStep;
+};
+
+var getValueFromProps = function getValueFromProps(val, min, max, fallback) {
+  return clampNumber(Number(val), min, max) || fallback;
+};
+
+var clampNumber = function clampNumber(number, min, max) {
+  if (number < min) {
+    return min;
+  } else if (number > max) {
+    return max;
+  }
 
-var NumberInput = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(NumberInput, _Component);
+  return number;
+};
 
-  var _super = _createSuper(NumberInput);
+var isFormatted = function isFormatted(number) {
+  return /^(-)?([1-9]\d*)?$/.test(number) || number === '0';
+};
 
-  function NumberInput(props) {
-    var _this;
+var convertNonIntegerToDefault = function convertNonIntegerToDefault(value, min) {
+  var currentValue = value;
 
-    (0, _classCallCheck2.default)(this, NumberInput);
-    _this = _super.call(this, props);
-    _this.state = _this.propsToState(props);
-    return _this;
+  if (!Number.isInteger(currentValue)) {
+    currentValue = min;
   }
 
-  (0, _createClass2.default)(NumberInput, [{
-    key: "propsToState",
-    value: function propsToState(props) {
-      var defaultProps = this.getDefaultState();
-      var min = Number.isInteger(props.min) ? props.min : defaultProps.min;
-      var max = Number.isInteger(props.max) ? props.max : defaultProps.max;
-      var value = this.getValueFromProps(props.value, defaultProps.value, max, min);
-      var step = this.getStepFromProps(props.step, defaultProps.step, max, min);
-      var inputValue = value;
-      var isValid = true;
-      var type = props.type === 'number' ? 'number' : 'text';
-      var bsSize = props.bsSize || defaultProps.bsSize;
-      var disabled = props.disabled || defaultProps.disabled;
-      return {
-        min: min,
-        max: max,
-        value: value,
-        inputValue: inputValue,
-        isValid: isValid,
-        step: step,
-        type: type,
-        bsSize: bsSize,
-        disabled: disabled
-      };
-    }
-  }, {
-    key: "getDefaultState",
-    value: function getDefaultState() {
-      return {
-        min: 0,
-        max: Number.MAX_VALUE,
-        value: 0,
-        step: 1,
-        bsSize: undefined,
-        disabled: false
-      };
-    }
-  }, {
-    key: "getValueFromProps",
-    value: function getValueFromProps(propValue, defaultValue, max, min) {
-      return Number.isInteger(propValue) && propValue <= max && propValue >= min ? propValue : defaultValue;
-    }
-  }, {
-    key: "getStepFromProps",
-    value: function getStepFromProps(propStep, defaultStep, max, min) {
-      return Number.isInteger(propStep) && propStep < Math.abs(max - min) ? propStep : defaultStep;
-    } // eslint-disable-next-line camelcase
-
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var isEqual = this.isEqual(nextProps, this.props);
-
-      if (!isEqual) {
-        this.setState(this.propsToState(nextProps));
-      }
-    }
-  }, {
-    key: "componentWillUpdate",
-    value: function componentWillUpdate(nextProps, nextState) {
-      var isEqual = this.isEqual(nextState, this.state);
-
-      if (!isEqual && nextState.isValid && typeof nextState.value === 'number' && typeof nextProps.onValueChanged === 'function') {
-        nextProps.onValueChanged(nextState.value);
-      }
-    }
-  }, {
-    key: "isEqual",
-    value: function isEqual(nextValue, value) {
-      var isValuesEqual = nextValue.value === value.value && nextValue.inputValue === value.inputValue;
-      var isIntervalAndStepEqual = nextValue.min === value.min && nextValue.max === value.max && nextValue.step === value.step;
-      var isTypeAndDisabledEqual = nextValue.type === value.type && nextValue.disabled === value.disabled;
-      return isValuesEqual && isIntervalAndStepEqual && isTypeAndDisabledEqual;
-    }
-  }, {
-    key: "toValidNumber",
-    value: function toValidNumber(number) {
-      if (number < this.state.min) {
-        return this.state.min;
-      } else if (number > this.state.max) {
-        return this.state.max;
-      }
-
-      return number;
-    }
-  }, {
-    key: "isFormatted",
-    value: function isFormatted(number) {
-      return /^(-)?([1-9]\d*)?$/.test(number) || number === '0';
-    }
-  }, {
-    key: "incrementValue",
-    value: function incrementValue() {
-      var currentValue = this.convertNonIntegerToDefault(this.state.value);
-      var newValue = currentValue + this.state.step;
-
-      if (newValue <= this.state.max) {
-        this.setState({
-          value: newValue,
-          inputValue: newValue,
-          isValid: true
-        });
-        return true;
-      }
-
-      return false;
-    }
-  }, {
-    key: "decrementValue",
-    value: function decrementValue() {
-      var currentValue = this.convertNonIntegerToDefault(this.state.value);
-      var newValue = currentValue - this.state.step;
-
-      if (newValue >= this.state.min) {
-        this.setState({
+  return currentValue;
+};
+
+exports.convertNonIntegerToDefault = convertNonIntegerToDefault;
+
+var NumberInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var unit = props.unit,
+      inputAddon = props.inputAddon,
+      className = props.className,
+      bsSize = props.bsSize,
+      disabled = props.disabled,
+      _props$onValueChanged = props.onValueChanged,
+      onValueChanged = _props$onValueChanged === void 0 ? function () {} : _props$onValueChanged,
+      propMin = props.min,
+      propMax = props.max,
+      propValue = props.value,
+      propStep = props.step,
+      propType = props.type,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded); // Breaking change - default is now "number"
+
+  var type = propType === 'text' ? 'text' : 'number';
+  var min = Number.isInteger(propMin) ? propMin : defaultProps.min;
+  var max = Number.isInteger(propMax) ? propMax : defaultProps.max;
+  var value = getValueFromProps(propValue, min, max, defaultProps.value);
+  var step = getStepFromProps(propStep, defaultProps.step, max, min); // Define local state and define initial values
+
+  var _useState = (0, _react.useState)({
+    value: value,
+    enteredValue: value,
+    isValid: true
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1]; // Update internal value whenever the value prop from outside changes
+
+
+  (0, _useAfterMount.default)(function () {
+    setState({
+      value: getValueFromProps(propValue, min, max, defaultProps.value),
+      enteredValue: value,
+      isValid: true
+    });
+  }, [propValue, clampNumber]);
+
+  var applyValue = function applyValue(newValue) {
+    if (isFormatted(newValue)) {
+      if (newValue === '-' || newValue === '') {
+        setState({
           value: newValue,
-          inputValue: newValue,
+          enteredValue: newValue,
           isValid: true
         });
-        return true;
-      }
-
-      return false;
-    }
-  }, {
-    key: "handleOnChange",
-    value: function handleOnChange(event) {
-      var newValue = event.target.value;
-      this.applyValue(newValue);
-    }
-  }, {
-    key: "applyValue",
-    value: function applyValue(newValue) {
-      if (this.isFormatted(newValue)) {
-        if (newValue === '-' || newValue === '') {
-          this.setState({
-            value: newValue,
-            inputValue: newValue,
-            isValid: true
-          });
-        } else {
-          var inputValue = Number(newValue);
-          var isValid = inputValue >= this.state.min && inputValue <= this.state.max;
-          this.setState({
-            value: this.toValidNumber(inputValue),
-            inputValue: inputValue,
-            isValid: isValid
-          });
-        }
+      } else {
+        var enteredValue = Number(newValue);
+        var isValid = enteredValue >= min && enteredValue <= max;
+        var newValidValue = clampNumber(enteredValue, min, max);
+        setState({
+          value: newValidValue,
+          enteredValue: enteredValue,
+          isValid: isValid
+        }); // Only call back the caller for valid values
+
+        isValid && onValueChanged(newValidValue);
       }
     }
-  }, {
-    key: "convertNonIntegerToDefault",
-    value: function convertNonIntegerToDefault(value) {
-      var currentValue = value;
-
-      if (!Number.isInteger(currentValue)) {
-        currentValue = this.state.min;
-      }
-
-      return currentValue;
-    }
-  }, {
-    key: "handleBlur",
-    value: function handleBlur() {
-      var inputValue = this.convertNonIntegerToDefault(Number(this.state.inputValue));
-      var validValue = this.toValidNumber(inputValue);
-      this.applyValue(validValue);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          unit = _this$props.unit,
-          inputAddon = _this$props.inputAddon,
-          className = _this$props.className;
-      var _this$state = this.state,
-          type = _this$state.type,
-          step = _this$state.step,
-          isValid = _this$state.isValid,
-          value = _this$state.value,
-          inputValue = _this$state.inputValue,
-          disabled = _this$state.disabled,
-          bsSize = _this$state.bsSize;
-      var inputGroupClassNames = (0, _classnames.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
-      var inputClassNames = (0, _classnames.default)('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
-
-      var input = /*#__PURE__*/_react.default.createElement("input", {
-        type: type,
-        step: step,
-        value: isValid ? value : inputValue,
-        className: inputClassNames,
-        disabled: disabled,
-        onBlur: function onBlur() {
-          return _this2.handleBlur();
-        },
-        onChange: function onChange(event) {
-          return _this2.handleOnChange(event);
-        }
-      });
-
-      return unit || inputAddon ? /*#__PURE__*/_react.default.createElement("div", {
-        className: inputGroupClassNames
-      }, inputAddon && /*#__PURE__*/_react.default.createElement("span", {
-        className: 'input-group-addon'
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: inputAddon
-      })), input, unit && /*#__PURE__*/_react.default.createElement("span", {
-        className: 'input-group-addon'
-      }, unit)) : input;
-    }
-  }]);
-  return NumberInput;
-}(_react.Component);
+  };
+
+  var handleOnChange = function handleOnChange(event) {
+    return applyValue(event.target.value);
+  };
+
+  var handleBlur = function handleBlur(event) {
+    // console.log({enteredValue: state.enteredValue, event: Number(event.target.value)});
+    // When the vales is removed, keep the input empty but trigger the onValueChanged callback
+    // since the user has finished his input
+    var lastEnteredValue = state.enteredValue;
+
+    if (lastEnteredValue === '') {
+      onValueChanged(lastEnteredValue);
+      return;
+    } // Otherwise, validate the input and calmp it if the entered value exeeds the limitations
+
+
+    var convertedEnteredValue = convertNonIntegerToDefault(Number(lastEnteredValue), min);
+    var validNumber = clampNumber(convertedEnteredValue, min, max);
+    applyValue(validNumber);
+  };
+
+  var inputGroupClassNames = (0, _classnames.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
+  var inputClassNames = (0, _classnames.default)('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
+
+  var input = /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, remainingProps, {
+    type: type,
+    step: step,
+    min: min,
+    max: max,
+    value: state.isValid ? state.value : state.enteredValue,
+    className: inputClassNames,
+    disabled: disabled,
+    onBlur: handleBlur,
+    onChange: handleOnChange,
+    ref: ref,
+    "aria-label": 'number-input'
+  }));
+
+  return unit || inputAddon ? /*#__PURE__*/_react.default.createElement("div", {
+    className: inputGroupClassNames
+  }, inputAddon && /*#__PURE__*/_react.default.createElement("span", {
+    className: 'input-group-addon'
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: inputAddon
+  })), input, unit && /*#__PURE__*/_react.default.createElement("span", {
+    className: 'input-group-addon'
+  }, unit)) : input;
+});
 
-exports.default = NumberInput;
 NumberInput.propTypes = {
   min: _propTypes.default.number,
   max: _propTypes.default.number,
@@ -277,4 +194,6 @@ NumberInput.propTypes = {
   className: _propTypes.default.string,
   unit: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   inputAddon: _propTypes.default.string
-};
+};
+var _default = NumberInput;
+exports.default = _default;

package/lib/components/onboarding/OnboardingTip.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = OnboardingTip;
 exports.OnboardingTipPlacementType = void 0;
+exports.default = OnboardingTip;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/components/overlay/OverlayTrigger.js

@@ -5,8 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.OverlayTriggerPlacementType = void 0;
 exports.default = OverlayTrigger;
-exports.OverlayTriggerPlacementType = exports.triggerType = void 0;
+exports.triggerType = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));