intelicoreact 0.2.31 → 0.2.32

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

@@ -134,21 +134,25 @@ function RangeSlider(_ref) {
   };
 
   var getRangeWidth = function getRangeWidth() {
-    return (to - from) * 100 / (max - min);
+    return getTrackXByPoints(to) - getTrackXByPoints(from);
   };
 
   var getRangeOffset = function getRangeOffset() {
-    return (from - min) * 100 / (max - min);
+    return getTrackXByPoints(from);
   };
 
   var getXByPoints = function getXByPoints(pts) {
-    return pts / pointsPerPx + trackPosition;
+    return (pts - min) / pointsPerPx + trackPosition;
   };
 
   var getPointsByX = function getPointsByX(x) {
     return (x - trackPosition) * pointsPerPx + min;
   };
 
+  var getTrackXByPoints = function getTrackXByPoints(pts) {
+    return (pts - min) / pointsPerPx;
+  };
+
   var prepareValue = function prepareValue(value) {
     return parseInt(parseFloat(value) * Math.pow(10, precision)) / Math.pow(10, precision);
   };
@@ -160,15 +164,35 @@ function RangeSlider(_ref) {
 
     switch (type) {
       case 'from':
-        if (value < min && validate) setFrom(min); // else if (value > max - extremumRange && extremumRange > minRange && validate) setFrom(max - extremumRange);
-        // else if (value > to - extremumRange && extremumRange > minRange && validate) setFrom(to - extremumRange);
-        else if (value > to - minRange && minRange > extremumRange && validate) setFrom(to - minRange);else setFrom(value);
+        if (validate) {
+          if (value < min) {
+            setFrom(min);
+            return;
+          }
+
+          if (value > to - minRange) {
+            setFrom(to - minRange);
+            return;
+          }
+        }
+
+        setFrom(value);
         break;
 
       case 'to':
-        if (value > max && validate) setTo(max); // else if (value < min + extremumRange && extremumRange > minRange && validate) setTo(min+ + extremumRange);
-        // else if (value < from + extremumRange && extremumRange > minRange && validate) setTo(from + extremumRange);
-        else if (value < from + minRange && minRange > extremumRange && validate) setTo(from + minRange);else setTo(value);
+        if (validate) {
+          if (value > max) {
+            setTo(max);
+            return;
+          }
+
+          if (value < from + minRange) {
+            setTo(from + minRange);
+            return;
+          }
+        }
+
+        setTo(value);
         break;
     }
   };
@@ -184,13 +208,13 @@ function RangeSlider(_ref) {
     if (!isTriggerMoved) setIsTriggerMoved(true);
     if (!movingTrigger) return false;
     var x = e.clientX;
-    if (x < trackPosition || x > trackPosition + trackWidth) return false;
 
     var _movingTrigger$getBou = movingTrigger === null || movingTrigger === void 0 ? void 0 : movingTrigger.getBoundingClientRect(),
         _movingTrigger$getBou2 = _movingTrigger$getBou.width,
         triggerWidth = _movingTrigger$getBou2 === void 0 ? 16 : _movingTrigger$getBou2;
 
-    x = movingTriggerType === 'from' ? x - triggerWidth / 2 : x + triggerWidth / 2;
+    if (x < trackPosition || x > trackPosition + trackWidth + triggerWidth) return false;
+    x -= triggerWidth / 2;
     onRangeChange(movingTriggerType, getPointsByX(x));
   };
 
@@ -206,35 +230,23 @@ function RangeSlider(_ref) {
   };
 
   (0, _react.useLayoutEffect)(function () {
-    var _trackRef$current;
+    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.useLayoutEffect)(function () {
-    var _fromTriggerRef$curre, _toTriggerRef$current;
-
-    var _ref2 = (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : _fromTriggerRef$curre.getBoundingClientRect()) || {},
-        fromTriggerWidth = _ref2.width;
-
-    var _ref3 = (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : _toTriggerRef$current.getBoundingClientRect()) || {},
-        toTriggerWidth = _ref3.width;
-
-    setExtremumRange((fromTriggerWidth + toTriggerWidth) * pointsPerPx);
-    setExtremumWidth(fromTriggerWidth + toTriggerWidth);
-  }, [fromTriggerRef, toTriggerRef, pointsPerPx]);
   (0, _react.useEffect)(function () {
     var _value$from2, _value$to2;
 
-    if (extremumRange === 0) return null;
     onRangeChange('from', (_value$from2 = value === null || value === void 0 ? void 0 : value.from) !== null && _value$from2 !== void 0 ? _value$from2 : max);
     onRangeChange('to', (_value$to2 = value === null || value === void 0 ? void 0 : value.to) !== null && _value$to2 !== void 0 ? _value$to2 : min);
-  }, [extremumRange]); // MouseUp Event Controller
+  }, []); // MouseUp Event Controller
 
   (0, _react.useEffect)(function () {
     var resetMovingTrigger = function resetMovingTrigger() {
@@ -329,28 +341,35 @@ function RangeSlider(_ref) {
 
   var renderTrackRange = function renderTrackRange() {
     var style = {
-      width: getRangeWidth().toString().concat('%'),
-      left: getRangeOffset().toString().concat('%'),
-      minWidth: extremumWidth.toString().concat('px')
+      width: getRangeWidth().toString().concat('px'),
+      left: getRangeOffset().toString().concat('px')
     };
-    var extremumWidthPercent = extremumWidth * 100 / trackWidth;
-
-    if (getRangeOffset() + extremumWidthPercent >= 100) {
-      style.left = (100 - extremumWidthPercent).toString().concat('%');
-    }
-
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__track__range",
       style: style
+    });
+  };
+
+  var renderTrackTriggers = function renderTrackTriggers() {
+    var fromStyle = {
+      left: getTrackXByPoints(from).toString().concat('px')
+    };
+    var toStyle = {
+      left: getTrackXByPoints(to).toString().concat('px')
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "range-slider__track__range-triggers"
     }, /*#__PURE__*/_react.default.createElement("div", {
       ref: fromTriggerRef,
-      className: "range-slider__track__range--trigger",
+      style: fromStyle,
+      className: "range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-left",
       onMouseDown: function onMouseDown(e) {
         return onTriggerMouseDown(e, 'from');
       }
     }), /*#__PURE__*/_react.default.createElement("div", {
       ref: toTriggerRef,
-      className: "range-slider__track__range--trigger",
+      style: toStyle,
+      className: "range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-right",
       onMouseDown: function onMouseDown(e) {
         return onTriggerMouseDown(e, 'to');
       }
@@ -363,7 +382,7 @@ function RangeSlider(_ref) {
       ref: trackRef
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__track__line"
-    }), renderTrackRange());
+    }), renderTrackRange(), renderTrackTriggers());
   };
 
   var render = function render() {

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.scss

@@ -100,6 +100,7 @@
     height: 16px;
     margin-top: 2px;
     position: relative;
+    padding: 0 8px;
 
     &__line {
       position: absolute;
@@ -107,6 +108,8 @@
       height: 4px;
       background: #d6d9e4;
       border-radius: 4px;
+      box-sizing: border-box;
+      left: 0;
     }
     &__range {
       position: relative;
@@ -117,24 +120,30 @@
       border-radius: 4px;
       justify-content: space-between;
 
-      &--trigger {
-        position: relative;
-        width: 16px;
-        height: 16px;
-        background: #ffffff;
-        border: 1px solid #1f7499;
-        box-shadow: 0px 4px 26px rgba(0, 67, 96, 0.1);
-        border-radius: 50%;
-        transform: translateY(-50%);
-        top: 50%;
-        box-sizing: border-box;
-        cursor: move;
-
-        &-left {
-          transform: translate(-50%, 0);
-        }
+      &-triggers {
+        width: 100%;
+        position: absolute;
 
-        &-right {
+        &--trigger {
+          z-index: 3;
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          background: #ffffff;
+          border: 1px solid #1f7499;
+          box-shadow: 0px 4px 26px rgba(0, 67, 96, 0.1);
+          border-radius: 50%;
+          top: 50%;
+          box-sizing: border-box;
+          cursor: move;
+
+          &-left {
+            transform: translate(-50%, -50%);
+          }
+
+          &-right {
+            transform: translate(-50%, -50%);
+          }
         }
       }
     }
@@ -142,5 +151,5 @@
 }
 
 .moving-cursor {
-  cursor: move!important;
+  cursor: move !important;
 }

package/package.json

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