intelicoreact 1.5.32 → 1.5.34

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

@@ -0,0 +1,779 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return RangeSlider2;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactfeather = require("react-feather");
+const _useIsMobile = /*#__PURE__*/ _interop_require_default(require("../../../Functions/useIsMobile/useIsMobile"));
+const _utils = require("../../../Functions/utils");
+require("./RangeSlider2.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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;
+}
+const COMPONENT_CLASS = "range-slider2";
+const { LEFT_COLLISSION, RIGHT_COLLISION, BOTH_COLLISION, NO_COLLISION } = Object.freeze({
+    NO_COLLISION: 0,
+    LEFT_COLLISSION: -1,
+    RIGHT_COLLISION: 1,
+    BOTH_COLLISION: 2
+});
+const { ASSIGN_TO_LEFT, ASSIGN_TO_RIGHT } = Object.freeze({
+    ASSIGN_TO_LEFT: -1,
+    ASSIGN_TO_RIGHT: 1
+});
+const POINT_VALUE_TYPES = Object.freeze({
+    FROM: "from",
+    TO: "to",
+    BOTH: "both"
+});
+function RangeSlider2({ min = 300, max = 850, minRange = 50, dividersRange = 50, pointValueType = POINT_VALUE_TYPES.FROM, precision = 0, step = 5, className, value = [], onChange = ()=>{}, transformDataOnConcat = (d1, d2)=>{
+    return [];
+} }) {
+    const { isMobile } = (0, _useIsMobile.default)();
+    const [protectedValue, setProtectedValue] = (0, _react.useState)([]);
+    const trackRef = (0, _react.useRef)(null);
+    const addTriggerRef = (0, _react.useRef)(null);
+    const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+    const [trackPosition, setTrackPosition] = (0, _react.useState)(0);
+    const [mouseTrackPosition, setMouseTrackPosition] = (0, _react.useState)(0);
+    const prepareValue = (value)=>{
+        return parseInt(parseFloat(value) * 10 ** precision, 10) / 10 ** precision;
+    };
+    const [ranges, setRanges] = (0, _react.useState)(value);
+    const addRange = ({ from, to, label, value, data = [], id = null })=>setRanges((ranges)=>{
+            if (!id) {
+                id = ((ranges === null || ranges === void 0 ? void 0 : ranges.length) + 1) * -1;
+            }
+            return [
+                ...ranges,
+                {
+                    id,
+                    from,
+                    to,
+                    label,
+                    data,
+                    value: Number.isInteger(value) ? value : 0
+                }
+            ].sort((a, b)=>a.from - b.from);
+        });
+    const updateRange = ({ from, to, label, value, data, id })=>setRanges((ranges)=>{
+            const newRanges = [
+                ...ranges
+            ];
+            const range = newRanges === null || newRanges === void 0 ? void 0 : newRanges.find(({ id: rangeId })=>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 !== undefined ? data : range === null || range === void 0 ? void 0 : range.data;
+            }
+            return newRanges;
+        });
+    const updateRangesByTrigger = (trigger)=>{
+        var _triggers_find;
+        const newValue = triggers === null || triggers === void 0 ? void 0 : (_triggers_find = triggers.find(({ id })=>id === (trigger === null || trigger === void 0 ? void 0 : trigger.id))) === null || _triggers_find === void 0 ? void 0 : _triggers_find.value;
+        const oldValue = trigger === null || trigger === void 0 ? void 0 : trigger.value;
+        const leftRange = ranges === null || ranges === void 0 ? void 0 : ranges.find((range)=>(range === null || range === void 0 ? void 0 : range.to) === oldValue);
+        const rightRange = ranges === null || ranges === void 0 ? void 0 : ranges.find((range)=>(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
+            });
+        }
+    };
+    const splitRange = (score)=>{
+        const range = ranges === null || ranges === void 0 ? void 0 : ranges.find(({ from, to })=>from + minRange <= score + 1 && score <= to - minRange);
+        if (!range) return;
+        const { value = 0, label, data } = addTriggerFixedRange || {};
+        addRange({
+            value: assignValueToRange === ASSIGN_TO_RIGHT ? value : 0,
+            data: assignValueToRange === ASSIGN_TO_RIGHT ? data : null,
+            label,
+            from: score + 1,
+            to: range === null || range === void 0 ? void 0 : range.to,
+            id: null
+        });
+        updateRange({
+            ...range,
+            value: assignValueToRange === ASSIGN_TO_LEFT ? value : 0,
+            data: assignValueToRange === ASSIGN_TO_LEFT ? data : null,
+            label,
+            to: score
+        });
+        if (isAddTriggerFixed) unfixAddTrigger();
+    };
+    const concatRanges = (score)=>{
+        const [left, right] = ranges === null || ranges === void 0 ? void 0 : ranges.filter(({ from, to })=>from === score + 1 || score === to);
+        const { data, value } = transformDataOnConcat(left, right);
+        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,
+            value
+        });
+        removeRange(right === null || right === void 0 ? void 0 : right.id);
+    };
+    const removeRange = (id)=>setRanges((ranges)=>ranges === null || ranges === void 0 ? void 0 : ranges.filter((range)=>(range === null || range === void 0 ? void 0 : range.id) !== id));
+    const clearRanges = ()=>setRanges([]);
+    const [triggers, setTriggers] = (0, _react.useState)([]);
+    const addTrigger = (value, { isFixed = false, isHidden = false } = {}, { withRange = true } = {}, index = triggers.length)=>setTriggers((state)=>{
+            if (withRange) splitRange(value);
+            const newState = [
+                ...state
+            ];
+            const id = (state === null || state === void 0 ? void 0 : state.length) ? Math.max(...state === null || state === void 0 ? void 0 : state.map(({ id })=>id)) + 1 : 0;
+            newState.splice(index, 0, {
+                id,
+                value,
+                isFixed,
+                isHidden
+            });
+            return newState.sort((a, b)=>a.value < b.value ? -1 : 1);
+        });
+    const updateTrigger = (index, value)=>setTriggers((state)=>{
+            const newState = [
+                ...state
+            ];
+            newState[index] = {
+                ...newState[index],
+                value
+            };
+            return newState;
+        });
+    const removeTrigger = (index)=>setTriggers((state)=>{
+            var _state_index;
+            concatRanges((_state_index = state[index]) === null || _state_index === void 0 ? void 0 : _state_index.value);
+            const newState = [
+                ...state
+            ];
+            newState.splice(index, 1);
+            return newState;
+        });
+    const clearTriggers = ()=>setTriggers([]);
+    const getTriggerByScore = (score)=>{
+        return triggers === null || triggers === void 0 ? void 0 : triggers.find(({ value: triggerScore })=>triggerScore === score);
+    };
+    const [movingController, setMovingController] = (0, _react.useState)(null);
+    const [movingTrigger, setMovingTrigger] = (0, _react.useState)(null);
+    const [movingTriggerIndex, setMovingTriggerIndex] = (0, _react.useState)(null);
+    const [movingTriggerData, setMovingTriggerData] = (0, _react.useState)(null);
+    const [isTriggerMoved, setIsTriggerMoved] = (0, _react.useState)(false);
+    const [isMouseOverTrigger, setIsMouseOverTrigger] = (0, _react.useState)(false);
+    const setMouseOverTrigger = ()=>setIsMouseOverTrigger(true);
+    const setMouseLeaveTrigger = ()=>setIsMouseOverTrigger(false);
+    const [isMouseOverTrack, setIsMouseOverTrack] = (0, _react.useState)(false);
+    const setMouseOverTrack = ()=>setIsMouseOverTrack(true);
+    const setMouseLeaveTrack = ()=>setIsMouseOverTrack(false);
+    const isTriggerMoving = (triggerIndex)=>triggerIndex === movingTriggerIndex;
+    const [addTriggerFixedScore, setAddTriggerFixedScore] = (0, _react.useState)(null);
+    const [addTriggerFixedRange, setAddTriggerFixedRange] = (0, _react.useState)(null);
+    const [isAddTriggerFixed, setIsAddTriggerFixed] = (0, _react.useState)(false);
+    const [assignValueToRange, setAssignValueToRange] = (0, _react.useState)(ASSIGN_TO_LEFT);
+    const fixAddTrigger = (score, inRange)=>{
+        setAddTriggerFixedScore(score);
+        setAddTriggerFixedRange(inRange);
+        setIsAddTriggerFixed(true);
+    };
+    const 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);
+    };
+    const [pointsPerPx, setPointsPerPx] = (0, _react.useState)(0);
+    const countPointsPerPx = (width)=>{
+        return (max - min) / width;
+    };
+    // GETTERS //
+    const getTrackXByScore = (score)=>{
+        return (score - min) / pointsPerPx;
+    };
+    const getScoreByX = (x)=>{
+        let points = (x - trackPosition) * pointsPerPx + min;
+        points -= points % step;
+        if (points < min) points = min;
+        if (points > max) points = max;
+        return points - 1;
+    };
+    const getTriggerCollisionDirection = (index, points)=>{
+        var _triggers_, _triggers_1;
+        if (index <= 0) return points;
+        const [triggerBefore, triggerAfter] = [
+            (triggers === null || triggers === void 0 ? void 0 : (_triggers_ = triggers[index - 1]) === null || _triggers_ === void 0 ? void 0 : _triggers_.value) + minRange - 1,
+            (triggers === null || triggers === void 0 ? void 0 : (_triggers_1 = triggers[index + 1]) === null || _triggers_1 === void 0 ? void 0 : _triggers_1.value) - minRange - 1
+        ];
+        if (triggerBefore === triggerAfter) return BOTH_COLLISION;
+        else if (points === triggerBefore) return LEFT_COLLISSION;
+        else if (points === triggerAfter) return RIGHT_COLLISION;
+        else return NO_COLLISION;
+    };
+    const getTriggerScore = (index, points)=>{
+        var _triggers_, _triggers_1;
+        if (index <= 0) return points;
+        const [triggerBefore, triggerAfter] = [
+            (triggers === null || triggers === void 0 ? void 0 : (_triggers_ = triggers[index - 1]) === null || _triggers_ === void 0 ? void 0 : _triggers_.value) + minRange - 1,
+            (triggers === null || triggers === void 0 ? void 0 : (_triggers_1 = triggers[index + 1]) === null || _triggers_1 === void 0 ? void 0 : _triggers_1.value) - minRange - 1
+        ];
+        if (points < triggerBefore) return triggerBefore;
+        else if (points > triggerAfter) return triggerAfter;
+        else return points;
+    };
+    const getAddTriggerCollisionDirection = (x)=>{
+        const triggerScore = getAddTriggerScore(x);
+        const inRange = getInRange(triggerScore);
+        if (!inRange) return 0;
+        const { from, to } = inRange;
+        const triggerBefore = from + minRange - 1;
+        const triggerAfter = to - minRange - 1;
+        if (triggerBefore === triggerAfter) return BOTH_COLLISION;
+        else if (triggerScore <= triggerBefore) return LEFT_COLLISSION;
+        else if (triggerScore >= triggerAfter) return RIGHT_COLLISION;
+        else return NO_COLLISION;
+    };
+    const getAddTriggerPosition = ()=>{
+        return isAddTriggerFixed ? getTrackXByScore(addTriggerFixedScore) : mouseTrackPosition;
+    };
+    const getAddTriggerScore = (x)=>{
+        var _getRangesList;
+        const score = getScoreByX(x);
+        let result = (_getRangesList = getRangesList()) === null || _getRangesList === void 0 ? void 0 : _getRangesList.reduce((result, { from, to })=>{
+            if (to - from + 1 <= 2 * minRange && from <= score && score <= to) {
+                return null;
+            }
+            if (from <= score && score <= from + minRange) {
+                return from + minRange - 1;
+            } else if (to - minRange <= score && score <= to) {
+                return to - minRange - 1;
+            } else {
+                return result;
+            }
+        }, score);
+        if (!result) {
+            var _getRangesList_filter, _getRangesList1;
+            const closestRange = (_getRangesList1 = getRangesList()) === null || _getRangesList1 === void 0 ? void 0 : (_getRangesList_filter = _getRangesList1.filter(({ from, to })=>to - from + 1 >= 2 * minRange)) === null || _getRangesList_filter === void 0 ? void 0 : _getRangesList_filter.reduce((result, range)=>{
+                const distance = Math.abs((range.to + range.from) / 2 - score);
+                if (!result || distance < (result === null || result === void 0 ? void 0 : result.distance)) {
+                    return {
+                        ...range,
+                        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 - 1;
+                if (score < (closestRange === null || closestRange === void 0 ? void 0 : closestRange.from)) result = (closestRange === null || closestRange === void 0 ? void 0 : closestRange.from) + minRange - 1;
+            }
+        }
+        return result;
+    };
+    const getRangesList = ()=>{
+        return triggers.map(({ value })=>value).sort().reduce((result, score, i, scores)=>{
+            if (i !== 0) {
+                result.push({
+                    from: scores[i - 1],
+                    to: score
+                });
+            }
+            return result;
+        }, []);
+    };
+    const getInRange = (score)=>{
+        return ranges === null || ranges === void 0 ? void 0 : ranges.find(({ from, to })=>from <= score && score <= to);
+    };
+    const getPointValue = (score)=>{
+        switch(pointValueType){
+            case POINT_VALUE_TYPES.FROM:
+                return `${score + 1}`;
+            case POINT_VALUE_TYPES.TO:
+                return `${score}`;
+            case POINT_VALUE_TYPES.BOTH:
+            default:
+                return `${score} | ${score + 1}`;
+        }
+    };
+    // EVENTS //
+    const onRangeChange = (index, value, validate = true)=>{
+        if (validate) value = prepareValue(value);
+        if (isNaN(value)) value = 0;
+        updateTrigger(index, value);
+    };
+    const onTriggerMouseDown = (e, index)=>{
+        setMovingTrigger(e.target);
+        setMovingTriggerIndex(index);
+        setMovingTriggerData({
+            ...triggers[index]
+        });
+    };
+    const onTriggerMove = (e)=>{
+        var _e_touches;
+        if (e === null || e === void 0 ? void 0 : e.cancelable) e === null || e === void 0 ? void 0 : e.preventDefault();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        if (!movingTriggerIndex || !movingTrigger) {
+            return false;
+        }
+        if (!isTriggerMoved) setIsTriggerMoved(true);
+        var _e_touches_;
+        const { clientX: x } = (_e_touches_ = e === null || e === void 0 ? void 0 : (_e_touches = e.touches) === null || _e_touches === void 0 ? void 0 : _e_touches[0]) !== null && _e_touches_ !== void 0 ? _e_touches_ : e;
+        const { width: triggerWidth } = (movingTrigger === null || movingTrigger === void 0 ? void 0 : movingTrigger.getBoundingClientRect()) || {};
+        if (x < trackPosition || x > trackPosition + trackWidth + triggerWidth) return false;
+        const triggerPoints = getTriggerScore(movingTriggerIndex, getScoreByX(x));
+        onRangeChange(movingTriggerIndex, triggerPoints);
+    };
+    const resetMovingTrigger = ()=>{
+        setTimeout(()=>{
+            setMovingTrigger(null);
+            setMovingTriggerIndex(null);
+        }, 1);
+    };
+    // USE EFFECT'S //
+    // MouseUp Event Controller
+    (0, _react.useEffect)(()=>{
+        if (isMobile) {
+            document.addEventListener("touchend", resetMovingTrigger);
+        } else {
+            document.addEventListener("mouseup", resetMovingTrigger);
+        }
+        return ()=>{
+            if (isMobile) {
+                document.removeEventListener("touchend", resetMovingTrigger);
+            } else {
+                document.removeEventListener("mouseup", resetMovingTrigger);
+            }
+        };
+    }, []);
+    // MouseMove Event Controller
+    (0, _react.useEffect)(()=>{
+        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());
+        }
+        const 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)(()=>{
+        if (movingController) {
+            if (isMobile) {
+                document.addEventListener("touchmove", onTriggerMove, {
+                    signal: movingController === null || movingController === void 0 ? void 0 : movingController.signal
+                });
+            } else {
+                document.addEventListener("mousemove", onTriggerMove, {
+                    signal: movingController === null || movingController === void 0 ? void 0 : movingController.signal
+                });
+            }
+        }
+        return ()=>{
+            if (isMobile) {
+                document.removeEventListener("touchmove", onTriggerMove, {
+                    signal: movingController === null || movingController === void 0 ? void 0 : movingController.signal,
+                    passive: false
+                });
+            } else {
+                document.removeEventListener("mousemove", onTriggerMove, {
+                    signal: movingController === null || movingController === void 0 ? void 0 : movingController.signal
+                });
+            }
+        };
+    }, [
+        movingController
+    ]);
+    (0, _react.useLayoutEffect)(()=>{
+        var _trackRef_current;
+        const { width, x } = (trackRef === null || trackRef === void 0 ? void 0 : (_trackRef_current = trackRef.current) === null || _trackRef_current === void 0 ? void 0 : _trackRef_current.getBoundingClientRect()) || {};
+        setPointsPerPx(countPointsPerPx(width));
+        setTrackWidth(width);
+        setTrackPosition(x);
+    }, [
+        trackRef
+    ]);
+    (0, _react.useEffect)(()=>{
+        onChange(ranges, triggers);
+    }, [
+        ranges
+    ]);
+    (0, _react.useEffect)(()=>{
+        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_reduce_sort_filter, _protectedValue_reduce_sort, _protectedValue_reduce;
+            protectedValue === null || protectedValue === void 0 ? void 0 : (_protectedValue_reduce = protectedValue.reduce((result, range)=>{
+                addRange({
+                    ...range
+                });
+                if (!result.find((score)=>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((score)=>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_reduce === void 0 ? void 0 : (_protectedValue_reduce_sort = _protectedValue_reduce.sort((a, b)=>a < b ? -1 : 1)) === null || _protectedValue_reduce_sort === void 0 ? void 0 : (_protectedValue_reduce_sort_filter = _protectedValue_reduce_sort.filter((item, i, arr)=>i === 0 || item - 1 !== arr[i - 1])) === null || _protectedValue_reduce_sort_filter === void 0 ? void 0 : _protectedValue_reduce_sort_filter.map((score, i, triggers)=>{
+                if (i === 0 || score - 1 !== triggers[i - 1]) {
+                    const isExtremum = score === min || score === max;
+                    addTrigger(score, {
+                        isFixed: isExtremum,
+                        isHidden: isExtremum
+                    }, {
+                        withRange: false
+                    });
+                }
+            });
+        }
+    }, [
+        protectedValue
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (!(0, _utils.compare)(value, protectedValue)) {
+            setProtectedValue(value);
+        }
+    }, [
+        value
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (!movingTriggerIndex && movingTriggerData) {
+            updateRangesByTrigger({
+                ...movingTriggerData
+            });
+            setMovingTriggerData(null);
+        }
+    }, [
+        movingTriggerIndex
+    ]);
+    // RENDER //
+    const renderCollision = ({ isCollisionVisible, isLeftCollision, isRightCollision, isBothCollision, className })=>{
+        var _trackRef_current;
+        const pieces = parseInt((max - min) / minRange, 10);
+        var _trackRef_current_getBoundingClientRect;
+        const { width: trackWidth } = (_trackRef_current_getBoundingClientRect = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef_current = trackRef.current) === null || _trackRef_current === void 0 ? void 0 : _trackRef_current.getBoundingClientRect()) !== null && _trackRef_current_getBoundingClientRect !== void 0 ? _trackRef_current_getBoundingClientRect : {};
+        const collisionWidth = trackWidth / pieces - 4;
+        const width = isCollisionVisible ? isBothCollision ? collisionWidth * 2 : isLeftCollision || isRightCollision ? collisionWidth : 0 : 0;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)("collision", className, {
+                "collision--visible": isCollisionVisible,
+                "collision--left": isLeftCollision && !isBothCollision,
+                "collision--right": isRightCollision && !isBothCollision,
+                "collision--both": isBothCollision
+            }),
+            style: {
+                width
+            }
+        });
+    };
+    const renderAddTrackTriggerSettings = ()=>{
+        const { label, value } = addTriggerFixedRange || {};
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings`,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body`,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--assign-left`,
+                            onClick: (e)=>{
+                                e.stopPropagation();
+                                setAssignValueToRange(ASSIGN_TO_LEFT);
+                            },
+                            "attr-is-active": `${assignValueToRange === ASSIGN_TO_LEFT}`,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronLeft, {})
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--lenders-count`,
+                            children: [
+                                label,
+                                value
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--assign-right`,
+                            onClick: (e)=>{
+                                e.stopPropagation();
+                                setAssignValueToRange(ASSIGN_TO_RIGHT);
+                            },
+                            "attr-is-active": `${assignValueToRange === ASSIGN_TO_RIGHT}`,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronRight, {})
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions`,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions--cancel`,
+                            onClick: (e)=>unfixAddTrigger(e),
+                            children: "Cancel"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: `${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions--apply`,
+                            onClick: (e)=>{
+                                e.stopPropagation();
+                                addTrigger(addTriggerFixedScore);
+                            },
+                            children: "Apply"
+                        })
+                    ]
+                })
+            ]
+        });
+    };
+    const renderAddTrackTrigger = ()=>{
+        const isNoTriggers = !(triggers === null || triggers === void 0 ? void 0 : triggers.filter(({ isHidden })=>!isHidden).length);
+        const x = getAddTriggerPosition();
+        const score = isAddTriggerFixed ? addTriggerFixedScore : isNoTriggers && !isMouseOverTrack ? (min + max) / 2 - 1 : getAddTriggerScore(x);
+        const triggerCollision = !isAddTriggerFixed ? getAddTriggerCollisionDirection(x) : NO_COLLISION;
+        const isLeftCollision = triggerCollision === LEFT_COLLISSION;
+        const isRightCollision = triggerCollision === RIGHT_COLLISION;
+        const isBothCollision = triggerCollision === BOTH_COLLISION;
+        const isCollisionVisible = (isLeftCollision || isRightCollision || isBothCollision) && !(isNoTriggers && !isMouseOverTrack);
+        const left = getTrackXByScore(score);
+        const inRange = getInRange(score);
+        const isTriggerWithScoreExists = getTriggerByScore(score);
+        if (isTriggerWithScoreExists || movingTrigger || isMouseOverTrigger) return null;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)(`${COMPONENT_CLASS}__track__range-triggers--add-trigger`, {
+                [`${COMPONENT_CLASS}__track__range-triggers--add-trigger--fixed`]: isAddTriggerFixed,
+                [`${COMPONENT_CLASS}__track__range-triggers--add-trigger--force-visible`]: isNoTriggers,
+                [`${COMPONENT_CLASS}__track__range-triggers--add-trigger--moved-smoothly`]: isNoTriggers && !isMouseOverTrack
+            }),
+            style: {
+                left: `${left}px`
+            },
+            onClick: ()=>(inRange === null || inRange === void 0 ? void 0 : inRange.value) ? fixAddTrigger(score, inRange) : addTrigger(score),
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    ref: addTriggerRef,
+                    className: (0, _classnames.default)(`${COMPONENT_CLASS}__track__range-triggers--add-trigger__point`, {
+                        [`${COMPONENT_CLASS}__track__range-triggers--add-trigger__point--shake`]: isCollisionVisible
+                    }),
+                    "data-point-value": getPointValue(score),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Plus, {})
+                }),
+                isAddTriggerFixed && renderAddTrackTriggerSettings(),
+                renderCollision({
+                    isCollisionVisible,
+                    isLeftCollision,
+                    isRightCollision,
+                    isBothCollision
+                })
+            ]
+        });
+    };
+    const renderTrackTrigger = ({ value: triggerScore, isFixed, isHidden }, triggerIndex)=>{
+        const triggerCollision = getTriggerCollisionDirection(triggerIndex, triggerScore);
+        const isLeftCollision = triggerCollision === LEFT_COLLISSION;
+        const isRightCollision = triggerCollision === RIGHT_COLLISION;
+        const isBothCollision = triggerCollision === BOTH_COLLISION;
+        const isCurrentTriggerMoving = isTriggerMoving(triggerIndex);
+        const isCollisionVisible = isCurrentTriggerMoving && isTriggerMoved && (isLeftCollision || isRightCollision || isBothCollision);
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            style: {
+                left: getTrackXByScore(triggerScore).toString().concat("px")
+            },
+            className: (0, _classnames.default)(`${COMPONENT_CLASS}__track__range-triggers--trigger`, {
+                [`${COMPONENT_CLASS}__track__range-triggers--trigger__moving`]: isCurrentTriggerMoving,
+                [`${COMPONENT_CLASS}__track__range-triggers--trigger__fixed`]: isFixed,
+                [`${COMPONENT_CLASS}__track__range-triggers--trigger__hidden`]: isHidden
+            }),
+            ...isMobile ? {} : {
+                onMouseOver: setMouseOverTrigger,
+                onMouseLeave: setMouseLeaveTrigger
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(`${COMPONENT_CLASS}__track__range-triggers--trigger__point`, {
+                        [`${COMPONENT_CLASS}__track__range-triggers--trigger__point--shake`]: isCollisionVisible
+                    }),
+                    "data-point-value": getPointValue(triggerScore),
+                    ...isMobile ? {
+                        onTouchStart: (e)=>onTriggerMouseDown(e, triggerIndex),
+                        onTouchEnd: resetMovingTrigger
+                    } : {
+                        onMouseDown: (e)=>onTriggerMouseDown(e, triggerIndex),
+                        onMouseUp: resetMovingTrigger
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(`${COMPONENT_CLASS}__track__range-triggers--trigger__actions`, {
+                        [`${COMPONENT_CLASS}__track__range-triggers--trigger__actions--hidden`]: isCurrentTriggerMoving
+                    }),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: `${COMPONENT_CLASS}__track__range-triggers--trigger__actions--remove`,
+                        onClick: ()=>removeTrigger(triggerIndex),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {})
+                    })
+                }),
+                renderCollision({
+                    isCollisionVisible,
+                    isLeftCollision,
+                    isRightCollision,
+                    isBothCollision,
+                    className: `${COMPONENT_CLASS}__track__range-triggers--trigger__collision`
+                })
+            ]
+        }, `${COMPONENT_CLASS}__track__range-triggers--trigger-${triggerIndex}`);
+    };
+    const renderTrackTriggers = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: `${COMPONENT_CLASS}__track__range-triggers`,
+            children: triggers === null || triggers === void 0 ? void 0 : triggers.map(renderTrackTrigger)
+        });
+    };
+    const renderRangeValue = ({ from, to, label, value }, rangeIndex)=>{
+        if (!value) return null;
+        const left = getTrackXByScore((to + from) / 2);
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)(`${COMPONENT_CLASS}__track__ranges-value--item`),
+            style: {
+                left: `${left}px`
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(`${COMPONENT_CLASS}__track__ranges-value--item__label`),
+                    children: label
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(`${COMPONENT_CLASS}__track__ranges-value--item__value`),
+                    children: value
+                })
+            ]
+        }, `${COMPONENT_CLASS}__track__ranges-value--item-${rangeIndex}`);
+    };
+    const renderRangesValue = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)(`${COMPONENT_CLASS}__track__ranges-value`),
+            children: ranges === null || ranges === void 0 ? void 0 : ranges.map(renderRangeValue)
+        });
+    };
+    const renderTrackDividers = (0, _react.useMemo)(()=>{
+        const renderTrackDivider = (key = 0)=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: `${COMPONENT_CLASS}__track__line__dividers--item`
+            }, key);
+        const dividersCount = parseInt((max - min) / dividersRange, 10);
+        const dividers = [];
+        for(let i = 0; i < dividersCount; ++i)dividers.push(renderTrackDivider(i));
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: `${COMPONENT_CLASS}__track__line__dividers`,
+            children: dividers
+        });
+    }, [
+        trackRef,
+        minRange,
+        min,
+        max
+    ]);
+    const renderTrackLine = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: `${COMPONENT_CLASS}__track__line`,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: `${COMPONENT_CLASS}__track__line__extremum--min`,
+                    children: min
+                }),
+                renderTrackDividers,
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: `${COMPONENT_CLASS}__track__line__extremum--max`,
+                    children: max
+                })
+            ]
+        });
+    };
+    const renderTrack = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)(`${COMPONENT_CLASS}__track`, className),
+            ref: trackRef,
+            children: [
+                renderTrackLine(),
+                renderAddTrackTrigger(),
+                renderTrackTriggers(),
+                renderRangesValue()
+            ]
+        });
+    };
+    const render = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: COMPONENT_CLASS,
+            onMouseOver: setMouseOverTrack,
+            onMouseLeave: setMouseLeaveTrack,
+            onMouseMove: (e)=>setMouseTrackPosition(e === null || e === void 0 ? void 0 : e.clientX),
+            children: renderTrack()
+        });
+    };
+    return render();
+}