intelicoreact 1.0.44 → 1.0.46

package/dist/Atomic/FormElements/RangeSlider2/RangeSlider2.js

@@ -0,0 +1,917 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RangeSlider2;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactFeather = require("react-feather");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./RangeSlider2.scss");
+
+var _utils = require("../../../Functions/utils");
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var COMPONENT_CLASS = 'range-slider2';
+
+var _Object$freeze = Object.freeze({
+  NO_COLLISION: 0,
+  LEFT_COLLISSION: -1,
+  RIGHT_COLLISION: 1,
+  BOTH_COLLISION: 2
+}),
+    LEFT_COLLISSION = _Object$freeze.LEFT_COLLISSION,
+    RIGHT_COLLISION = _Object$freeze.RIGHT_COLLISION,
+    BOTH_COLLISION = _Object$freeze.BOTH_COLLISION,
+    NO_COLLISION = _Object$freeze.NO_COLLISION;
+
+var _Object$freeze2 = Object.freeze({
+  ASSIGN_TO_LEFT: -1,
+  ASSIGN_TO_RIGHT: 1
+}),
+    ASSIGN_TO_LEFT = _Object$freeze2.ASSIGN_TO_LEFT,
+    ASSIGN_TO_RIGHT = _Object$freeze2.ASSIGN_TO_RIGHT;
+
+function RangeSlider2(_ref) {
+  var _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 300 : _ref$min,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 850 : _ref$max,
+      _ref$minRange = _ref.minRange,
+      minRange = _ref$minRange === void 0 ? 50 : _ref$minRange,
+      _ref$precision = _ref.precision,
+      precision = _ref$precision === void 0 ? 0 : _ref$precision,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 5 : _ref$step,
+      className = _ref.className,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? [] : _ref$value,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$transformDataOnC = _ref.transformDataOnConcat,
+      transformDataOnConcat = _ref$transformDataOnC === void 0 ? function (d1, d2) {
+    return [];
+  } : _ref$transformDataOnC;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      protectedValue = _useState2[0],
+      setProtectedValue = _useState2[1];
+
+  var trackRef = (0, _react.useRef)(null);
+  var addTriggerRef = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      trackWidth = _useState4[0],
+      setTrackWidth = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      trackPosition = _useState6[0],
+      setTrackPosition = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      mouseTrackPosition = _useState8[0],
+      setMouseTrackPosition = _useState8[1];
+
+  var prepareValue = function prepareValue(value) {
+    return parseInt(parseFloat(value) * Math.pow(10, precision)) / Math.pow(10, precision);
+  };
+
+  var _useState9 = (0, _react.useState)(value),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      ranges = _useState10[0],
+      setRanges = _useState10[1];
+
+  var addRange = function addRange(_ref2) {
+    var from = _ref2.from,
+        to = _ref2.to,
+        label = _ref2.label,
+        value = _ref2.value,
+        data = _ref2.data,
+        _ref2$id = _ref2.id,
+        id = _ref2$id === void 0 ? null : _ref2$id;
+    return setRanges(function (ranges) {
+      if (!id) {
+        id = ((ranges === null || ranges === void 0 ? void 0 : ranges.length) + 1) * -1;
+      }
+
+      return [].concat((0, _toConsumableArray2.default)(ranges), [{
+        id: id,
+        from: from,
+        to: to,
+        label: label,
+        data: data,
+        value: Number.isInteger(value) ? value : 0
+      }]).sort(function (a, b) {
+        return a.from - b.from;
+      });
+    });
+  };
+
+  var updateRange = function updateRange(_ref3) {
+    var from = _ref3.from,
+        to = _ref3.to,
+        label = _ref3.label,
+        value = _ref3.value,
+        data = _ref3.data,
+        id = _ref3.id;
+    return setRanges(function (ranges) {
+      var newRanges = (0, _toConsumableArray2.default)(ranges);
+      var range = newRanges === null || newRanges === void 0 ? void 0 : newRanges.find(function (_ref4) {
+        var rangeId = _ref4.id;
+        return rangeId === id;
+      });
+
+      if (range) {
+        range.from = from !== null && from !== void 0 ? from : range === null || range === void 0 ? void 0 : range.from;
+        range.to = to !== null && to !== void 0 ? to : range === null || range === void 0 ? void 0 : range.to;
+        range.label = label !== null && label !== void 0 ? label : range === null || range === void 0 ? void 0 : range.label;
+        range.value = value !== undefined ? Number.isInteger(value) ? value : 0 : range === null || range === void 0 ? void 0 : range.value;
+        range.data = data;
+      }
+
+      return newRanges;
+    });
+  };
+
+  var updateRangesByTrigger = function updateRangesByTrigger(trigger) {
+    var _triggers$find;
+
+    var newValue = triggers === null || triggers === void 0 ? void 0 : (_triggers$find = triggers.find(function (_ref5) {
+      var id = _ref5.id;
+      return id === (trigger === null || trigger === void 0 ? void 0 : trigger.id);
+    })) === null || _triggers$find === void 0 ? void 0 : _triggers$find.value;
+    var oldValue = trigger === null || trigger === void 0 ? void 0 : trigger.value;
+    var leftRange = ranges === null || ranges === void 0 ? void 0 : ranges.find(function (range) {
+      return (range === null || range === void 0 ? void 0 : range.to) === oldValue;
+    });
+    var rightRange = ranges === null || ranges === void 0 ? void 0 : ranges.find(function (range) {
+      return (range === null || range === void 0 ? void 0 : range.from) === oldValue + 1;
+    });
+
+    if (leftRange && rightRange) {
+      updateRange({
+        from: leftRange === null || leftRange === void 0 ? void 0 : leftRange.from,
+        to: newValue,
+        id: leftRange === null || leftRange === void 0 ? void 0 : leftRange.id
+      });
+      updateRange({
+        from: newValue + 1,
+        to: rightRange === null || rightRange === void 0 ? void 0 : rightRange.to,
+        id: rightRange === null || rightRange === void 0 ? void 0 : rightRange.id
+      });
+    }
+  };
+
+  var splitRange = function splitRange(score) {
+    var range = ranges === null || ranges === void 0 ? void 0 : ranges.find(function (_ref6) {
+      var from = _ref6.from,
+          to = _ref6.to;
+      return from + minRange <= score + 1 && score <= to - minRange;
+    });
+    if (!range) return;
+
+    var _ref7 = addTriggerFixedRange || {},
+        _ref7$value = _ref7.value,
+        value = _ref7$value === void 0 ? 0 : _ref7$value,
+        label = _ref7.label,
+        data = _ref7.data;
+
+    addRange({
+      value: assignValueToRange === ASSIGN_TO_RIGHT ? value : 0,
+      data: assignValueToRange === ASSIGN_TO_RIGHT ? data : null,
+      label: label,
+      from: score + 1,
+      to: range === null || range === void 0 ? void 0 : range.to,
+      id: null
+    });
+    updateRange(_objectSpread(_objectSpread({}, range), {}, {
+      value: assignValueToRange === ASSIGN_TO_LEFT ? value : 0,
+      data: assignValueToRange === ASSIGN_TO_LEFT ? data : null,
+      label: label,
+      to: score
+    }));
+    if (isAddTriggerFixed) unfixAddTrigger();
+  };
+
+  var concatRanges = function concatRanges(score) {
+    var _ranges$filter = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (_ref8) {
+      var from = _ref8.from,
+          to = _ref8.to;
+      return from === score + 1 || score === to;
+    }),
+        _ranges$filter2 = (0, _slicedToArray2.default)(_ranges$filter, 2),
+        left = _ranges$filter2[0],
+        right = _ranges$filter2[1];
+
+    var _transformDataOnConca = transformDataOnConcat(left, right),
+        data = _transformDataOnConca.data,
+        value = _transformDataOnConca.value;
+
+    updateRange({
+      from: left === null || left === void 0 ? void 0 : left.from,
+      to: right === null || right === void 0 ? void 0 : right.to,
+      id: left === null || left === void 0 ? void 0 : left.id,
+      data: data,
+      value: value
+    });
+    removeRange(right === null || right === void 0 ? void 0 : right.id);
+  };
+
+  var removeRange = function removeRange(id) {
+    return setRanges(function (ranges) {
+      return ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+        return (range === null || range === void 0 ? void 0 : range.id) !== id;
+      });
+    });
+  };
+
+  var clearRanges = function clearRanges() {
+    return setRanges([]);
+  };
+
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      triggers = _useState12[0],
+      setTriggers = _useState12[1];
+
+  var addTrigger = function addTrigger(value) {
+    var _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        _ref9$isFixed = _ref9.isFixed,
+        isFixed = _ref9$isFixed === void 0 ? false : _ref9$isFixed,
+        _ref9$isHidden = _ref9.isHidden,
+        isHidden = _ref9$isHidden === void 0 ? false : _ref9$isHidden;
+
+    var _ref10 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref10$withRange = _ref10.withRange,
+        withRange = _ref10$withRange === void 0 ? true : _ref10$withRange;
+
+    var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : triggers.length;
+    return setTriggers(function (state) {
+      if (withRange) splitRange(value);
+      var newState = (0, _toConsumableArray2.default)(state);
+      var id = state !== null && state !== void 0 && state.length ? Math.max.apply(Math, (0, _toConsumableArray2.default)(state === null || state === void 0 ? void 0 : state.map(function (_ref11) {
+        var id = _ref11.id;
+        return id;
+      }))) + 1 : 0;
+      newState.splice(index, 0, {
+        id: id,
+        value: value,
+        isFixed: isFixed,
+        isHidden: isHidden
+      });
+      return newState.sort(function (a, b) {
+        return a.value < b.value ? -1 : 1;
+      });
+    });
+  };
+
+  var updateTrigger = function updateTrigger(index, value) {
+    return setTriggers(function (state) {
+      var newState = (0, _toConsumableArray2.default)(state);
+      newState[index] = _objectSpread(_objectSpread({}, newState[index]), {}, {
+        value: value
+      });
+      return newState;
+    });
+  };
+
+  var removeTrigger = function removeTrigger(index) {
+    return setTriggers(function (state) {
+      var _state$index;
+
+      concatRanges((_state$index = state[index]) === null || _state$index === void 0 ? void 0 : _state$index.value);
+      var newState = (0, _toConsumableArray2.default)(state);
+      newState.splice(index, 1);
+      return newState;
+    });
+  };
+
+  var clearTriggers = function clearTriggers() {
+    return setTriggers([]);
+  };
+
+  var getTriggerByScore = function getTriggerByScore(score) {
+    return triggers === null || triggers === void 0 ? void 0 : triggers.find(function (_ref12) {
+      var triggerScore = _ref12.value;
+      return triggerScore === score;
+    });
+  };
+
+  var _useState13 = (0, _react.useState)(null),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      movingController = _useState14[0],
+      setMovingController = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(null),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      movingTrigger = _useState16[0],
+      setMovingTrigger = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(null),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      movingTriggerIndex = _useState18[0],
+      setMovingTriggerIndex = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(null),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      movingTriggerData = _useState20[0],
+      setMovingTriggerData = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(false),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      isTriggerMoved = _useState22[0],
+      setIsTriggerMoved = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      isMouseOverTrigger = _useState24[0],
+      setIsMouseOverTrigger = _useState24[1];
+
+  var setMouseOverTrigger = function setMouseOverTrigger() {
+    return setIsMouseOverTrigger(true);
+  };
+
+  var setMouseLeaveTrigger = function setMouseLeaveTrigger() {
+    return setIsMouseOverTrigger(false);
+  };
+
+  var _useState25 = (0, _react.useState)(false),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      isMouseOverTrack = _useState26[0],
+      setIsMouseOverTrack = _useState26[1];
+
+  var setMouseOverTrack = function setMouseOverTrack() {
+    return setIsMouseOverTrack(true);
+  };
+
+  var setMouseLeaveTrack = function setMouseLeaveTrack() {
+    return setIsMouseOverTrack(false);
+  };
+
+  var isTriggerMoving = function isTriggerMoving(triggerIndex) {
+    return triggerIndex === movingTriggerIndex;
+  };
+
+  var _useState27 = (0, _react.useState)(null),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      addTriggerFixedScore = _useState28[0],
+      setAddTriggerFixedScore = _useState28[1];
+
+  var _useState29 = (0, _react.useState)(null),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      addTriggerFixedRange = _useState30[0],
+      setAddTriggerFixedRange = _useState30[1];
+
+  var _useState31 = (0, _react.useState)(false),
+      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
+      isAddTriggerFixed = _useState32[0],
+      setIsAddTriggerFixed = _useState32[1];
+
+  var _useState33 = (0, _react.useState)(ASSIGN_TO_LEFT),
+      _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
+      assignValueToRange = _useState34[0],
+      setAssignValueToRange = _useState34[1];
+
+  var fixAddTrigger = function fixAddTrigger(score, inRange) {
+    setAddTriggerFixedScore(score);
+    setAddTriggerFixedRange(inRange);
+    setIsAddTriggerFixed(true);
+  };
+
+  var unfixAddTrigger = function unfixAddTrigger(e) {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
+    e === null || e === void 0 ? void 0 : e.preventDefault();
+    setAddTriggerFixedScore(null);
+    setAddTriggerFixedRange(null);
+    setIsAddTriggerFixed(false);
+    setAssignValueToRange(ASSIGN_TO_LEFT);
+  };
+
+  var _useState35 = (0, _react.useState)(0),
+      _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
+      pointsPerPx = _useState36[0],
+      setPointsPerPx = _useState36[1];
+
+  var countPointsPerPx = function countPointsPerPx(width) {
+    return (max - min) / width;
+  }; // GETTERS //
+
+
+  var getTrackXByScore = function getTrackXByScore(score) {
+    return (score - min) / pointsPerPx;
+  };
+
+  var getScoreByX = function getScoreByX(x) {
+    var points = (x - trackPosition) * pointsPerPx + min;
+    points -= points % step;
+    if (points < min) points = min;
+    if (points > max) points = max;
+    return points;
+  };
+
+  var getTriggerCollisionDirection = function getTriggerCollisionDirection(index, points) {
+    var _triggers, _triggers2;
+
+    if (index <= 0) return points;
+    var triggerBefore = (triggers === null || triggers === void 0 ? void 0 : (_triggers = triggers[index - 1]) === null || _triggers === void 0 ? void 0 : _triggers.value) + minRange,
+        triggerAfter = (triggers === null || triggers === void 0 ? void 0 : (_triggers2 = triggers[index + 1]) === null || _triggers2 === void 0 ? void 0 : _triggers2.value) - minRange;
+    if (triggerBefore === triggerAfter) return BOTH_COLLISION;else if (points === triggerBefore) return LEFT_COLLISSION;else if (points === triggerAfter) return RIGHT_COLLISION;else return NO_COLLISION;
+  };
+
+  var getTriggerScore = function getTriggerScore(index, points) {
+    var _triggers3, _triggers4;
+
+    if (index <= 0) return points;
+    var triggerBefore = (triggers === null || triggers === void 0 ? void 0 : (_triggers3 = triggers[index - 1]) === null || _triggers3 === void 0 ? void 0 : _triggers3.value) + minRange,
+        triggerAfter = (triggers === null || triggers === void 0 ? void 0 : (_triggers4 = triggers[index + 1]) === null || _triggers4 === void 0 ? void 0 : _triggers4.value) - minRange;
+    if (points < triggerBefore) return triggerBefore;else if (points > triggerAfter) return triggerAfter;else return points;
+  };
+
+  var getAddTriggerCollisionDirection = function getAddTriggerCollisionDirection(x) {
+    var triggerScore = getAddTriggerScore(x);
+    var inRange = getInRange(triggerScore);
+    if (!inRange) return 0;
+    var from = inRange.from,
+        to = inRange.to;
+    var triggerBefore = from === min ? from + minRange : from + minRange - 1;
+    var triggerAfter = to - minRange;
+    if (triggerBefore === triggerAfter) return BOTH_COLLISION;else if (triggerScore <= triggerBefore) return LEFT_COLLISSION;else if (triggerScore >= triggerAfter) return RIGHT_COLLISION;else return NO_COLLISION;
+  };
+
+  var getAddTriggerPosition = function getAddTriggerPosition() {
+    return isAddTriggerFixed ? getTrackXByScore(addTriggerFixedScore) : mouseTrackPosition;
+  };
+
+  var getAddTriggerScore = function getAddTriggerScore(x) {
+    var _getRangesList;
+
+    var score = getScoreByX(x);
+    var result = (_getRangesList = getRangesList()) === null || _getRangesList === void 0 ? void 0 : _getRangesList.reduce(function (result, _ref13) {
+      var from = _ref13.from,
+          to = _ref13.to;
+
+      if (to - from + 1 <= 2 * minRange && from <= score && score <= to) {
+        return null;
+      }
+
+      if (from <= score && score <= from + minRange) {
+        return from + minRange;
+      } else if (to - minRange <= score && score <= to) {
+        return to - minRange;
+      } else {
+        return result;
+      }
+    }, score);
+
+    if (!result) {
+      var _getRangesList2, _getRangesList2$filte;
+
+      var closestRange = (_getRangesList2 = getRangesList()) === null || _getRangesList2 === void 0 ? void 0 : (_getRangesList2$filte = _getRangesList2.filter(function (_ref14) {
+        var from = _ref14.from,
+            to = _ref14.to;
+        return to - from + 1 >= 2 * minRange;
+      })) === null || _getRangesList2$filte === void 0 ? void 0 : _getRangesList2$filte.reduce(function (result, range) {
+        var distance = Math.abs((range.to + range.from) / 2 - score);
+
+        if (!result || distance < (result === null || result === void 0 ? void 0 : result.distance)) {
+          return _objectSpread(_objectSpread({}, range), {}, {
+            distance: distance
+          });
+        }
+
+        return result;
+      }, null);
+
+      if (closestRange) {
+        if ((closestRange === null || closestRange === void 0 ? void 0 : closestRange.to) < score) result = (closestRange === null || closestRange === void 0 ? void 0 : closestRange.to) - minRange;
+        if (score < (closestRange === null || closestRange === void 0 ? void 0 : closestRange.from)) result = (closestRange === null || closestRange === void 0 ? void 0 : closestRange.from) + minRange;
+      }
+    }
+
+    return result;
+  };
+
+  var getRangesList = function getRangesList() {
+    return triggers.map(function (_ref15) {
+      var value = _ref15.value;
+      return value;
+    }).sort().reduce(function (result, score, i, scores) {
+      if (i !== 0) {
+        result.push({
+          from: scores[i - 1],
+          to: score
+        });
+      }
+
+      return result;
+    }, []);
+  };
+
+  var getInRange = function getInRange(score) {
+    return ranges === null || ranges === void 0 ? void 0 : ranges.find(function (_ref16) {
+      var from = _ref16.from,
+          to = _ref16.to;
+      return from <= score && score <= to;
+    });
+  }; // EVENTS //
+
+
+  var onRangeChange = function onRangeChange(index, value) {
+    var validate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    if (validate) value = prepareValue(value);
+    if (isNaN(value)) value = 0;
+    updateTrigger(index, value);
+  };
+
+  var onTriggerMouseDown = function onTriggerMouseDown(e, index) {
+    setMovingTrigger(e.target);
+    setMovingTriggerIndex(index);
+    setMovingTriggerData(_objectSpread({}, triggers[index]));
+  };
+
+  var onTriggerMove = function onTriggerMove(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!movingTriggerIndex || !movingTrigger) {
+      return false;
+    }
+
+    if (!isTriggerMoved) setIsTriggerMoved(true);
+    var x = e.clientX;
+
+    var _ref17 = (movingTrigger === null || movingTrigger === void 0 ? void 0 : movingTrigger.getBoundingClientRect()) || {},
+        triggerWidth = _ref17.width;
+
+    if (x < trackPosition || x > trackPosition + trackWidth + triggerWidth) return false;
+    var triggerPoints = getTriggerScore(movingTriggerIndex, getScoreByX(x));
+    onRangeChange(movingTriggerIndex, triggerPoints);
+  };
+
+  var resetMovingTrigger = function resetMovingTrigger() {
+    setTimeout(function () {
+      setMovingTrigger(null);
+      setMovingTriggerIndex(null);
+    }, 1);
+  }; // USE EFFECT'S //
+  // MouseUp Event Controller
+
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mouseup', resetMovingTrigger);
+    return function () {
+      document.removeEventListener('mouseup', resetMovingTrigger);
+    };
+  }, []); // MouseMove Event Controller
+
+  (0, _react.useEffect)(function () {
+    var _body$classList;
+
+    if (!movingTrigger && isTriggerMoved) {
+      movingController === null || movingController === void 0 ? void 0 : movingController.abort();
+      setIsTriggerMoved(false);
+      setMovingController(null);
+    } else if (movingTrigger && !isTriggerMoved) {
+      setMovingController(new AbortController());
+    }
+
+    var body = document.getElementsByTagName('body')[0];
+    (_body$classList = body.classList) === null || _body$classList === void 0 ? void 0 : _body$classList[movingTrigger ? 'add' : 'remove']('moving-cursor');
+  }, [movingTrigger]);
+  (0, _react.useEffect)(function () {
+    if (movingController) {
+      document.addEventListener('mousemove', onTriggerMove, {
+        signal: movingController === null || movingController === void 0 ? void 0 : movingController.signal
+      });
+    }
+  }, [movingController]);
+  (0, _react.useLayoutEffect)(function () {
+    var _trackRef$current;
+
+    var _ref18 = (trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect()) || {},
+        width = _ref18.width,
+        x = _ref18.x;
+
+    setPointsPerPx(countPointsPerPx(width));
+    setTrackWidth(width);
+    setTrackPosition(x);
+  }, [trackRef]);
+  (0, _react.useEffect)(function () {
+    onChange(ranges, triggers);
+  }, [ranges]);
+  (0, _react.useEffect)(function () {
+    clearRanges();
+    clearTriggers();
+
+    if ((protectedValue === null || protectedValue === void 0 ? void 0 : protectedValue.length) === 0) {
+      addRange({
+        from: min,
+        to: max
+      });
+      addTrigger(min, {
+        isFixed: true,
+        isHidden: true
+      });
+      addTrigger(max, {
+        isFixed: true,
+        isHidden: true
+      });
+    } else {
+      var _protectedValue$reduc, _protectedValue$reduc2, _protectedValue$reduc3;
+
+      protectedValue === null || protectedValue === void 0 ? void 0 : (_protectedValue$reduc = protectedValue.reduce(function (result, range) {
+        addRange(_objectSpread({}, range));
+        if (!result.find(function (score) {
+          return score === (range === null || range === void 0 ? void 0 : range.from);
+        })) result.splice((result === null || result === void 0 ? void 0 : result.length) - 1, 0, range === null || range === void 0 ? void 0 : range.from);
+        if (!result.find(function (score) {
+          return score === (range === null || range === void 0 ? void 0 : range.to);
+        })) result.splice((result === null || result === void 0 ? void 0 : result.length) - 1, 0, range === null || range === void 0 ? void 0 : range.to);
+        return result;
+      }, [])) === null || _protectedValue$reduc === void 0 ? void 0 : (_protectedValue$reduc2 = _protectedValue$reduc.sort(function (a, b) {
+        return a < b ? -1 : 1;
+      })) === null || _protectedValue$reduc2 === void 0 ? void 0 : (_protectedValue$reduc3 = _protectedValue$reduc2.filter(function (item, i, arr) {
+        return i === 0 || item - 1 !== arr[i - 1];
+      })) === null || _protectedValue$reduc3 === void 0 ? void 0 : _protectedValue$reduc3.map(function (score, i, triggers) {
+        if (i === 0 || score - 1 !== triggers[i - 1]) {
+          var isExtremum = score === min || score === max;
+          addTrigger(score, {
+            isFixed: isExtremum,
+            isHidden: isExtremum
+          }, {
+            withRange: false
+          });
+        }
+      });
+    }
+  }, [protectedValue]);
+  (0, _react.useEffect)(function () {
+    if (!(0, _utils.compare)(value, protectedValue)) {
+      setProtectedValue(value);
+    }
+  }, [value]);
+  (0, _react.useEffect)(function () {
+    if (!movingTriggerIndex && movingTriggerData) {
+      updateRangesByTrigger(_objectSpread({}, movingTriggerData));
+      setMovingTriggerData(null);
+    }
+  }, [movingTriggerIndex]); // RENDER //
+
+  var renderCollision = function renderCollision(_ref19) {
+    var _trackRef$current$get, _trackRef$current2;
+
+    var isCollisionVisible = _ref19.isCollisionVisible,
+        isLeftCollision = _ref19.isLeftCollision,
+        isRightCollision = _ref19.isRightCollision,
+        isBothCollision = _ref19.isBothCollision,
+        className = _ref19.className;
+    var pieces = parseInt((max - min) / minRange);
+
+    var _ref20 = (_trackRef$current$get = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current2 = trackRef.current) === null || _trackRef$current2 === void 0 ? void 0 : _trackRef$current2.getBoundingClientRect()) !== null && _trackRef$current$get !== void 0 ? _trackRef$current$get : {},
+        trackWidth = _ref20.width;
+
+    var collisionWidth = trackWidth / pieces - 4;
+    var width = isCollisionVisible ? isBothCollision ? collisionWidth * 2 : isLeftCollision || isRightCollision ? collisionWidth : 0 : 0;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('collision', className, {
+        'collision--visible': isCollisionVisible,
+        'collision--left': isLeftCollision && !isBothCollision,
+        'collision--right': isRightCollision && !isBothCollision,
+        'collision--both': isBothCollision
+      }),
+      style: {
+        width: width
+      }
+    });
+  };
+
+  var renderAddTrackTriggerSettings = function renderAddTrackTriggerSettings() {
+    var _ref21 = addTriggerFixedRange || {},
+        label = _ref21.label,
+        value = _ref21.value;
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__settings")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__settings-body")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__settings-body--assign-left"),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setAssignValueToRange(ASSIGN_TO_LEFT);
+      },
+      "attr-is-active": "".concat(assignValueToRange === ASSIGN_TO_LEFT)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronLeft, null)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__settings-body--lenders-count")
+    }, label, value), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__settings-body--assign-right"),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setAssignValueToRange(ASSIGN_TO_RIGHT);
+      },
+      "attr-is-active": "".concat(assignValueToRange === ASSIGN_TO_RIGHT)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronRight, null))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__settings-actions")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__settings-actions--cancel"),
+      onClick: function onClick(e) {
+        return unfixAddTrigger(e);
+      }
+    }, "Cancel"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__settings-actions--apply"),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        addTrigger(addTriggerFixedScore);
+      }
+    }, "Apply")));
+  };
+
+  var renderAddTrackTrigger = function renderAddTrackTrigger() {
+    var _cn;
+
+    var isNoTriggers = !(triggers !== null && triggers !== void 0 && triggers.filter(function (_ref22) {
+      var isHidden = _ref22.isHidden;
+      return !isHidden;
+    }).length);
+    var x = getAddTriggerPosition();
+    var score = isAddTriggerFixed ? addTriggerFixedScore : isNoTriggers && !isMouseOverTrack ? (min + max) / 2 : getAddTriggerScore(x);
+    var triggerCollision = !isAddTriggerFixed ? getAddTriggerCollisionDirection(x) : NO_COLLISION;
+    var isLeftCollision = triggerCollision === LEFT_COLLISSION;
+    var isRightCollision = triggerCollision === RIGHT_COLLISION;
+    var isBothCollision = triggerCollision === BOTH_COLLISION;
+    var isCollisionVisible = (isLeftCollision || isRightCollision || isBothCollision) && !(isNoTriggers && !isMouseOverTrack);
+    var left = getTrackXByScore(score);
+    var inRange = getInRange(score);
+    var isTriggerWithScoreExists = getTriggerByScore(score);
+    if (isTriggerWithScoreExists || movingTrigger || isMouseOverTrigger) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger"), (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger--fixed"), isAddTriggerFixed), (0, _defineProperty2.default)(_cn, "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger--force-visible"), isNoTriggers), (0, _defineProperty2.default)(_cn, "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger--moved-smoothly"), isNoTriggers && !isMouseOverTrack), _cn)),
+      style: {
+        left: "".concat(left, "px")
+      },
+      onClick: function onClick() {
+        return inRange !== null && inRange !== void 0 && inRange.value ? fixAddTrigger(score, inRange) : addTrigger(score);
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: addTriggerRef,
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__point"), (0, _defineProperty2.default)({}, "".concat(COMPONENT_CLASS, "__track__range-triggers--add-trigger__point--shake"), isCollisionVisible)),
+      "data-point-value": "".concat(score, " | ").concat(score + 1)
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null)), isAddTriggerFixed && renderAddTrackTriggerSettings(), renderCollision({
+      isCollisionVisible: isCollisionVisible,
+      isLeftCollision: isLeftCollision,
+      isRightCollision: isRightCollision,
+      isBothCollision: isBothCollision
+    }));
+  };
+
+  var renderTrackTrigger = function renderTrackTrigger(_ref23, triggerIndex) {
+    var _cn3;
+
+    var triggerScore = _ref23.value,
+        isFixed = _ref23.isFixed,
+        isHidden = _ref23.isHidden;
+    var triggerCollision = getTriggerCollisionDirection(triggerIndex, triggerScore);
+    var isLeftCollision = triggerCollision === LEFT_COLLISSION;
+    var isRightCollision = triggerCollision === RIGHT_COLLISION;
+    var isBothCollision = triggerCollision === BOTH_COLLISION;
+    var isCurrentTriggerMoving = isTriggerMoving(triggerIndex);
+    var isCollisionVisible = isCurrentTriggerMoving && isTriggerMoved && (isLeftCollision || isRightCollision || isBothCollision);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "".concat(COMPONENT_CLASS, "__track__range-triggers--trigger-").concat(triggerIndex),
+      style: {
+        left: getTrackXByScore(triggerScore).toString().concat('px')
+      },
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track__range-triggers--trigger"), (_cn3 = {}, (0, _defineProperty2.default)(_cn3, "".concat(COMPONENT_CLASS, "__track__range-triggers--trigger__moving"), isCurrentTriggerMoving), (0, _defineProperty2.default)(_cn3, "".concat(COMPONENT_CLASS, "__track__range-triggers--trigger__fixed"), isFixed), (0, _defineProperty2.default)(_cn3, "".concat(COMPONENT_CLASS, "__track__range-triggers--trigger__hidden"), isHidden), _cn3)),
+      onMouseOver: setMouseOverTrigger,
+      onMouseLeave: setMouseLeaveTrigger
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track__range-triggers--trigger__point"), (0, _defineProperty2.default)({}, "".concat(COMPONENT_CLASS, "__track__range-triggers--trigger__point--shake"), isCollisionVisible)),
+      "data-point-value": "".concat(triggerScore, " | ").concat(triggerScore + 1),
+      onMouseDown: function onMouseDown(e) {
+        return onTriggerMouseDown(e, triggerIndex);
+      },
+      onMouseUp: resetMovingTrigger
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track__range-triggers--trigger__actions"), (0, _defineProperty2.default)({}, "".concat(COMPONENT_CLASS, "__track__range-triggers--trigger__actions--hidden"), isCurrentTriggerMoving))
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--trigger__actions--remove"),
+      onClick: function onClick() {
+        return removeTrigger(triggerIndex);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null))), renderCollision({
+      isCollisionVisible: isCollisionVisible,
+      isLeftCollision: isLeftCollision,
+      isRightCollision: isRightCollision,
+      isBothCollision: isBothCollision,
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers--trigger__collision")
+    }));
+  };
+
+  var renderTrackTriggers = function renderTrackTriggers() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__range-triggers")
+    }, triggers === null || triggers === void 0 ? void 0 : triggers.map(renderTrackTrigger));
+  };
+
+  var renderRangeValue = function renderRangeValue(_ref24, rangeIndex) {
+    var from = _ref24.from,
+        to = _ref24.to,
+        label = _ref24.label,
+        value = _ref24.value;
+    if (!value) return null;
+    var left = getTrackXByScore((to + from) / 2);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track__ranges-value--item")),
+      style: {
+        left: "".concat(left, "px")
+      },
+      key: "".concat(COMPONENT_CLASS, "__track__ranges-value--item-").concat(rangeIndex)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track__ranges-value--item__label"))
+    }, label), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track__ranges-value--item__value"))
+    }, value));
+  };
+
+  var renderRangesValue = function renderRangesValue() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track__ranges-value"))
+    }, ranges === null || ranges === void 0 ? void 0 : ranges.map(renderRangeValue));
+  };
+
+  var renderTrackDividers = (0, _react.useMemo)(function () {
+    var renderTrackDivider = function renderTrackDivider() {
+      var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: key,
+        className: "".concat(COMPONENT_CLASS, "__track__line__dividers--item")
+      });
+    };
+
+    var dividersCount = parseInt((max - min) / minRange);
+    var dividers = [];
+
+    for (var i = 0; i < dividersCount; ++i) {
+      dividers.push(renderTrackDivider(i));
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__line__dividers")
+    }, dividers);
+  }, [trackRef, minRange, min, max]);
+
+  var renderTrackLine = function renderTrackLine() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__line")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__line__extremum--min")
+    }, min), renderTrackDividers, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(COMPONENT_CLASS, "__track__line__extremum--max")
+    }, max));
+  };
+
+  var renderTrack = function renderTrack() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(COMPONENT_CLASS, "__track"), className),
+      ref: trackRef
+    }, renderTrackLine(), renderAddTrackTrigger(), renderTrackTriggers(), renderRangesValue());
+  };
+
+  var render = function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: COMPONENT_CLASS,
+      onMouseOver: setMouseOverTrack,
+      onMouseLeave: setMouseLeaveTrack,
+      onMouseMove: function onMouseMove(e) {
+        return setMouseTrackPosition(e === null || e === void 0 ? void 0 : e.clientX);
+      }
+    }, renderTrack());
+  };
+
+  return render();
+}