intelicoreact 0.3.68 → 0.3.69

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js

@@ -97,13 +97,16 @@ function RangeSlider(_ref) {
 
   var _useState9 = (0, _react.useState)(null),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      tempValue = _useState10[0],
-      setTempValue = _useState10[1];
+      focusedType = _useState10[0],
+      setFocusedType = _useState10[1];
 
   var _useState11 = (0, _react.useState)(null),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      focusedType = _useState12[0],
-      setFocusedType = _useState12[1];
+      frezeedValues = _useState12[0],
+      setFrezeedValues = _useState12[1];
+
+  var fromValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.from : from;
+  var toValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.to : to;
 
   var _useState13 = (0, _react.useState)(null),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
@@ -130,10 +133,6 @@ function RangeSlider(_ref) {
       pointsPerPx = _useState22[0],
       setPointsPerPx = _useState22[1];
 
-  var countPointsPerPx = function countPointsPerPx(width) {
-    return (max - min) / width;
-  };
-
   var _useState23 = (0, _react.useState)(0),
       _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
       extremumRange = _useState24[0],
@@ -144,10 +143,9 @@ function RangeSlider(_ref) {
       extremumWidth = _useState26[0],
       setExtremumWidth = _useState26[1];
 
-  (0, _react.useLayoutEffect)(function () {
-    setFromValue(value.from);
-    setToValue(value.to);
-  }, [value]);
+  var countPointsPerPx = function countPointsPerPx(width) {
+    return (max - min) / width;
+  };
 
   var resetRange = function resetRange() {
     setFrom(min);
@@ -159,7 +157,7 @@ function RangeSlider(_ref) {
   };
 
   var getRangeWidth = function getRangeWidth() {
-    return getTrackXByPoints(to) - getTrackXByPoints(from);
+    return getTrackXByPoints(toValue) - getTrackXByPoints(fromValue);
   };
 
   var getRangeOffset = function getRangeOffset() {
@@ -236,28 +234,20 @@ function RangeSlider(_ref) {
   };
 
   var onRangeInputFocus = function onRangeInputFocus(e, type) {
-    setFocusedType(type);
-    setTempValue(type === 'from' ? from : to);
+    setFrezeedValues({
+      from: from,
+      to: to
+    });
   };
 
   var onRangeInputBlur = function onRangeInputBlur(e, type) {
-    onRangeChange(type, parseFloat(tempValue));
-    setTempValue(null);
-    setFocusedType(null);
+    onRangeChange(type, type === 'from' ? from : to);
+    setFrezeedValues({
+      from: from,
+      to: to
+    });
   };
 
-  (0, _react.useLayoutEffect)(function () {
-    var _trackRef$current, _fromTriggerRef$curre, _fromTriggerRef$curre2, _toTriggerRef$current, _toTriggerRef$current2;
-
-    var _trackRef$current$get = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect(),
-        width = _trackRef$current$get.width,
-        x = _trackRef$current$get.x;
-
-    width -= (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : (_fromTriggerRef$curre2 = _fromTriggerRef$curre.getBoundingClientRect()) === null || _fromTriggerRef$curre2 === void 0 ? void 0 : _fromTriggerRef$curre2.width) || (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : (_toTriggerRef$current2 = _toTriggerRef$current.getBoundingClientRect()) === null || _toTriggerRef$current2 === void 0 ? void 0 : _toTriggerRef$current2.width);
-    setPointsPerPx(countPointsPerPx(width));
-    setTrackWidth(width);
-    setTrackPosition(x);
-  }, [trackRef]);
   (0, _react.useEffect)(function () {
     var _value$from2, _value$to2;
 
@@ -299,11 +289,30 @@ function RangeSlider(_ref) {
     }
   }, [movingController]);
   (0, _react.useEffect)(function () {
-    return onChange({
+    setFrezeedValues(null);
+  }, [isTriggerMoved]);
+  (0, _react.useEffect)(function () {
+    onChange({
       from: from,
       to: to
     });
   }, [from, to]);
+  (0, _react.useLayoutEffect)(function () {
+    setFrom(value.from);
+    setTo(value.to);
+  }, [value]);
+  (0, _react.useLayoutEffect)(function () {
+    var _trackRef$current, _fromTriggerRef$curre, _fromTriggerRef$curre2, _toTriggerRef$current, _toTriggerRef$current2;
+
+    var _trackRef$current$get = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect(),
+        width = _trackRef$current$get.width,
+        x = _trackRef$current$get.x;
+
+    width -= (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : (_fromTriggerRef$curre2 = _fromTriggerRef$curre.getBoundingClientRect()) === null || _fromTriggerRef$curre2 === void 0 ? void 0 : _fromTriggerRef$curre2.width) || (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : (_toTriggerRef$current2 = _toTriggerRef$current.getBoundingClientRect()) === null || _toTriggerRef$current2 === void 0 ? void 0 : _toTriggerRef$current2.width);
+    setPointsPerPx(countPointsPerPx(width));
+    setTrackWidth(width);
+    setTrackPosition(x);
+  }, [trackRef]);
 
   var renderLabel = function renderLabel() {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -318,7 +327,7 @@ function RangeSlider(_ref) {
       className: "range-slider__header__selected-range"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__header__selected-range--text"
-    }, "from ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(from) : from, " to ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(to) : to, rangeSymbol, unit), /*#__PURE__*/_react.default.createElement("div", {
+    }, "from ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(fromValue) : fromValue, " to ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(toValue) : toValue, rangeSymbol, unit), /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__header__selected-range--reset",
       onClick: resetRange
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null)));
@@ -337,14 +346,16 @@ function RangeSlider(_ref) {
       className: "range-slider__inputs--from"
     }, /*#__PURE__*/_react.default.createElement(_Input.default, {
       "data-testid": "rangeSlider--input--".concat(testId, "--type-from"),
-      value: focusedType === 'from' ? tempValue : from.toString(),
+      value: from.toString(),
       onFocus: function onFocus(e) {
         return onRangeInputFocus(e, 'from');
       },
       onBlur: function onBlur(e) {
         return onRangeInputBlur(e, 'from');
       },
-      onChange: setTempValue,
+      onChange: function onChange(value) {
+        return onRangeChange('from', value, false);
+      },
       onlyNumbers: {
         type: 'float',
         decimalPlaces: decimalPlaces,
@@ -356,14 +367,16 @@ function RangeSlider(_ref) {
       className: "range-slider__inputs__input"
     }, /*#__PURE__*/_react.default.createElement(_Input.default, {
       "data-testid": "rangeSlider--input--".concat(testId, "--type-to"),
-      value: focusedType === 'to' ? tempValue : to.toString(),
+      value: to.toString(),
       onFocus: function onFocus(e) {
         return onRangeInputFocus(e, 'to');
       },
       onBlur: function onBlur(e) {
         return onRangeInputBlur(e, 'to');
       },
-      onChange: setTempValue,
+      onChange: function onChange(value) {
+        return onRangeChange('to', value, false);
+      },
       onlyNumbers: {
         type: 'float',
         decimalPlaces: decimalPlaces,
@@ -387,10 +400,10 @@ function RangeSlider(_ref) {
 
   var renderTrackTriggers = function renderTrackTriggers() {
     var fromStyle = {
-      left: getTrackXByPoints(from).toString().concat('px')
+      left: getTrackXByPoints(fromValue).toString().concat('px')
     };
     var toStyle = {
-      left: getTrackXByPoints(to).toString().concat('px')
+      left: getTrackXByPoints(toValue).toString().concat('px')
     };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__track__range-triggers"

package/dist/Atomic/UI/Tag/Tag.scss

@@ -50,7 +50,7 @@
     min-width: 80px;
     padding: 8px;
     z-index: 2;
-    top: 25px;
+    top: 30px;
     left: 2px;
 
     &:before {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.3.68",
+  "version": "0.3.69",
   "description": "",
   "main": "dist/index.js",
   "files": [