intelicoreact 1.8.10 → 1.8.11

package/dist/Atomic/FormElements/RangeSlider2/RangeSlider2.jsx

@@ -1,865 +0,0 @@
-import cn from 'classnames';
-
-import {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { ChevronLeft, ChevronRight, Plus, X } from 'react-feather';
-
-import useIsMobile from '../../../Functions/useIsMobile/useIsMobile';
-import { compare } from '../../../Functions/utils';
-
-import './RangeSlider2.scss';
-
-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',
-});
-
-export default 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 } = useIsMobile();
-  const [protectedValue, setProtectedValue] = useState([]);
-
-  const trackRef = useRef(null);
-  const addTriggerRef = useRef(null);
-
-  const [trackWidth, setTrackWidth] = useState(0);
-  const [trackPosition, setTrackPosition] = useState(0);
-
-  const [mouseTrackPosition, setMouseTrackPosition] = useState(0);
-
-  const prepareValue = (value) => {
-    return Number.parseInt(Number.parseFloat(value) * 10 ** precision, 10) / 10 ** precision;
-  };
-
-  const [ranges, setRanges] = useState(value);
-  const addRange = ({ from, to, label, value, data = [], id = null }) =>
-    setRanges((ranges) => {
-      if (!id) {
-        id = (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?.find(({ id: rangeId }) => rangeId === id);
-
-      if (range) {
-        range.from = from ?? range?.from;
-        range.to = to ?? range?.to;
-        range.label = label ?? range?.label;
-        range.value
-          = value !== undefined
-            ? Number.isInteger(value)
-              ? value
-              : 0
-            : range?.value;
-        range.data = data !== undefined ? data : range?.data;
-      }
-
-      return newRanges;
-    });
-  const updateRangesByTrigger = (trigger) => {
-    const newValue = triggers?.find(({ id }) => id === trigger?.id)?.value;
-    const oldValue = trigger?.value;
-
-    const leftRange = ranges?.find(range => range?.to === oldValue);
-    const rightRange = ranges?.find(range => range?.from === oldValue + 1);
-
-    if (leftRange && rightRange) {
-      updateRange({ from: leftRange?.from, to: newValue, id: leftRange?.id });
-      updateRange({
-        from: newValue + 1,
-        to: rightRange?.to,
-        id: rightRange?.id,
-      });
-    }
-  };
-  const splitRange = (score) => {
-    const range = 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?.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?.filter(
-      ({ from, to }) => from === score + 1 || score === to,
-    );
-    const { data, value } = transformDataOnConcat(left, right);
-
-    updateRange({ from: left?.from, to: right?.to, id: left?.id, data, value });
-    removeRange(right?.id);
-  };
-  const removeRange = id =>
-    setRanges(ranges => ranges?.filter(range => range?.id !== id));
-  const clearRanges = () => setRanges([]);
-
-  const [triggers, setTriggers] = 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?.length
-        ? Math.max(...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) => {
-      concatRanges(state[index]?.value);
-
-      const newState = [...state];
-      newState.splice(index, 1);
-      return newState;
-    });
-  const clearTriggers = () => setTriggers([]);
-  const getTriggerByScore = (score) => {
-    return triggers?.find(({ value: triggerScore }) => triggerScore === score);
-  };
-
-  const [movingController, setMovingController] = useState(null);
-
-  const [movingTrigger, setMovingTrigger] = useState(null);
-  const [movingTriggerIndex, setMovingTriggerIndex] = useState(null);
-  const [movingTriggerData, setMovingTriggerData] = useState(null);
-  const [isTriggerMoved, setIsTriggerMoved] = useState(false);
-  const [isMouseOverTrigger, setIsMouseOverTrigger] = useState(false);
-  const setMouseOverTrigger = () => setIsMouseOverTrigger(true);
-  const setMouseLeaveTrigger = () => setIsMouseOverTrigger(false);
-  const [isMouseOverTrack, setIsMouseOverTrack] = useState(false);
-  const setMouseOverTrack = () => setIsMouseOverTrack(true);
-  const setMouseLeaveTrack = () => setIsMouseOverTrack(false);
-
-  const isTriggerMoving = triggerIndex => triggerIndex === movingTriggerIndex;
-
-  const [addTriggerFixedScore, setAddTriggerFixedScore] = useState(null);
-  const [addTriggerFixedRange, setAddTriggerFixedRange] = useState(null);
-  const [isAddTriggerFixed, setIsAddTriggerFixed] = useState(false);
-  const [assignValueToRange, setAssignValueToRange] = useState(ASSIGN_TO_LEFT);
-  const fixAddTrigger = (score, inRange) => {
-    setAddTriggerFixedScore(score);
-    setAddTriggerFixedRange(inRange);
-    setIsAddTriggerFixed(true);
-  };
-  const unfixAddTrigger = (e) => {
-    e?.stopPropagation();
-    e?.preventDefault();
-
-    setAddTriggerFixedScore(null);
-    setAddTriggerFixedRange(null);
-    setIsAddTriggerFixed(false);
-    setAssignValueToRange(ASSIGN_TO_LEFT);
-  };
-
-  const [pointsPerPx, setPointsPerPx] = 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) => {
-    if (index <= 0) return points;
-
-    const [triggerBefore, triggerAfter] = [
-      triggers?.[index - 1]?.value + minRange - 1,
-      triggers?.[index + 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) => {
-    if (index <= 0) return points;
-
-    const [triggerBefore, triggerAfter] = [
-      triggers?.[index - 1]?.value + minRange - 1,
-      triggers?.[index + 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) => {
-    const score = getScoreByX(x);
-
-    let result = 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) {
-      const closestRange = getRangesList()
-        ?.filter(({ from, to }) => to - from + 1 >= 2 * minRange)
-        ?.reduce((result, range) => {
-          const distance = Math.abs((range.to + range.from) / 2 - score);
-          if (!result || distance < result?.distance) {
-            return {
-              ...range,
-              distance,
-            };
-          }
-
-          return result;
-        }, null);
-
-      if (closestRange) {
-        if (closestRange?.to < score) result = closestRange?.to - minRange - 1;
-        if (score < closestRange?.from)
-          result = 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?.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) => {
-    if (e?.cancelable) e?.preventDefault();
-    e?.stopPropagation();
-
-    if (!movingTriggerIndex || !movingTrigger) {
-      return false;
-    }
-
-    if (!isTriggerMoved) setIsTriggerMoved(true);
-
-    const { clientX: x } = e?.touches?.[0] ?? e;
-    const { width: triggerWidth }
-      = 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
-  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
-  useEffect(() => {
-    if (!movingTrigger && isTriggerMoved) {
-      movingController?.abort();
-      setIsTriggerMoved(false);
-      setMovingController(null);
-    }
-    else if (movingTrigger && !isTriggerMoved) {
-      setMovingController(new AbortController());
-    }
-
-    const body = document.getElementsByTagName('body')[0];
-    body.classList?.[movingTrigger ? 'add' : 'remove']('moving-cursor');
-  }, [movingTrigger]);
-
-  useEffect(() => {
-    if (movingController) {
-      if (isMobile) {
-        document.addEventListener('touchmove', onTriggerMove, {
-          signal: movingController?.signal,
-        });
-      }
-      else {
-        document.addEventListener('mousemove', onTriggerMove, {
-          signal: movingController?.signal,
-        });
-      }
-    }
-
-    return () => {
-      if (isMobile) {
-        document.removeEventListener('touchmove', onTriggerMove, {
-          signal: movingController?.signal,
-          passive: false,
-        });
-      }
-      else {
-        document.removeEventListener('mousemove', onTriggerMove, {
-          signal: movingController?.signal,
-        });
-      }
-    };
-  }, [movingController]);
-  useLayoutEffect(() => {
-    const { width, x } = trackRef?.current?.getBoundingClientRect() || {};
-
-    setPointsPerPx(countPointsPerPx(width));
-    setTrackWidth(width);
-    setTrackPosition(x);
-  }, [trackRef]);
-  useEffect(() => {
-    onChange(ranges, triggers);
-  }, [ranges]);
-  useEffect(() => {
-    clearRanges();
-    clearTriggers();
-
-    if (protectedValue?.length === 0) {
-      addRange({ from: min, to: max });
-      addTrigger(min, { isFixed: true, isHidden: true });
-      addTrigger(max, { isFixed: true, isHidden: true });
-    }
-    else {
-      protectedValue
-        ?.reduce((result, range) => {
-          addRange({ ...range });
-
-          if (!result.find(score => score === range?.from))
-            result.splice(result?.length - 1, 0, range?.from);
-          if (!result.find(score => score === range?.to))
-            result.splice(result?.length - 1, 0, range?.to);
-          return result;
-        }, [])
-        ?.sort((a, b) => (a < b ? -1 : 1))
-        ?.filter((item, i, arr) => i === 0 || item - 1 !== arr[i - 1])
-        ?.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]);
-  useEffect(() => {
-    if (!compare(value, protectedValue)) {
-      setProtectedValue(value);
-    }
-  }, [value]);
-  useEffect(() => {
-    if (!movingTriggerIndex && movingTriggerData) {
-      updateRangesByTrigger({ ...movingTriggerData });
-      setMovingTriggerData(null);
-    }
-  }, [movingTriggerIndex]);
-
-  // RENDER //
-  const renderCollision = ({
-    isCollisionVisible,
-    isLeftCollision,
-    isRightCollision,
-    isBothCollision,
-    className,
-  }) => {
-    const pieces = Number.parseInt((max - min) / minRange, 10);
-    const { width: trackWidth }
-      = trackRef?.current?.getBoundingClientRect() ?? {};
-    const collisionWidth = trackWidth / pieces - 4;
-
-    const width = isCollisionVisible
-      ? isBothCollision
-        ? collisionWidth * 2
-        : isLeftCollision || isRightCollision
-          ? collisionWidth
-          : 0
-      : 0;
-
-    return (
-      <div
-        className={cn('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 (
-      <div
-        className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings`}
-      >
-        <div
-          className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body`}
-        >
-          <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}`}
-          >
-            <ChevronLeft />
-          </div>
-          <div
-            className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--lenders-count`}
-          >
-            {label}
-            {value}
-          </div>
-          <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}`}
-          >
-            <ChevronRight />
-          </div>
-        </div>
-        <div
-          className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions`}
-        >
-          <div
-            className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions--cancel`}
-            onClick={e => unfixAddTrigger(e)}
-          >
-            Cancel
-          </div>
-          <div
-            className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions--apply`}
-            onClick={(e) => {
-              e.stopPropagation();
-              addTrigger(addTriggerFixedScore);
-            }}
-          >
-            Apply
-          </div>
-        </div>
-      </div>
-    );
-  };
-  const renderAddTrackTrigger = () => {
-    const isNoTriggers = !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 (
-      <div
-        className={cn(
-          `${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?.value ? fixAddTrigger(score, inRange) : addTrigger(score)}
-      >
-        <div
-          ref={addTriggerRef}
-          className={cn(
-            `${COMPONENT_CLASS}__track__range-triggers--add-trigger__point`,
-            {
-              [`${COMPONENT_CLASS}__track__range-triggers--add-trigger__point--shake`]:
-                isCollisionVisible,
-            },
-          )}
-          data-point-value={getPointValue(score)}
-        >
-          <Plus />
-        </div>
-        {isAddTriggerFixed && renderAddTrackTriggerSettings()}
-        {renderCollision({
-          isCollisionVisible,
-          isLeftCollision,
-          isRightCollision,
-          isBothCollision,
-        })}
-      </div>
-    );
-  };
-  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 (
-      <div
-        key={`${COMPONENT_CLASS}__track__range-triggers--trigger-${triggerIndex}`}
-        style={{
-          left: getTrackXByScore(triggerScore).toString().concat('px'),
-        }}
-        className={cn(`${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,
-            })}
-      >
-        <div
-          className={cn(
-            `${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,
-              })}
-        />
-        <div
-          className={cn(
-            `${COMPONENT_CLASS}__track__range-triggers--trigger__actions`,
-            {
-              [`${COMPONENT_CLASS}__track__range-triggers--trigger__actions--hidden`]:
-                isCurrentTriggerMoving,
-            },
-          )}
-        >
-          <div
-            className={`${COMPONENT_CLASS}__track__range-triggers--trigger__actions--remove`}
-            onClick={() => removeTrigger(triggerIndex)}
-          >
-            <X />
-          </div>
-        </div>
-        {renderCollision({
-          isCollisionVisible,
-          isLeftCollision,
-          isRightCollision,
-          isBothCollision,
-          className: `${COMPONENT_CLASS}__track__range-triggers--trigger__collision`,
-        })}
-      </div>
-    );
-  };
-  const renderTrackTriggers = () => {
-    return (
-      <div className={`${COMPONENT_CLASS}__track__range-triggers`}>
-        {triggers?.map(renderTrackTrigger)}
-      </div>
-    );
-  };
-  const renderRangeValue = ({ from, to, label, value }, rangeIndex) => {
-    if (!value) return null;
-
-    const left = getTrackXByScore((to + from) / 2);
-
-    return (
-      <div
-        className={cn(`${COMPONENT_CLASS}__track__ranges-value--item`)}
-        style={{ left: `${left}px` }}
-        key={`${COMPONENT_CLASS}__track__ranges-value--item-${rangeIndex}`}
-      >
-        <div
-          className={cn(`${COMPONENT_CLASS}__track__ranges-value--item__label`)}
-        >
-          {label}
-        </div>
-        <div
-          className={cn(`${COMPONENT_CLASS}__track__ranges-value--item__value`)}
-        >
-          {value}
-        </div>
-      </div>
-    );
-  };
-  const renderRangesValue = () => {
-    return (
-      <div className={cn(`${COMPONENT_CLASS}__track__ranges-value`)}>
-        {ranges?.map(renderRangeValue)}
-      </div>
-    );
-  };
-  const renderTrackDividers = useMemo(() => {
-    const renderTrackDivider = (key = 0) => (
-      <div
-        key={key}
-        className={`${COMPONENT_CLASS}__track__line__dividers--item`}
-      />
-    );
-
-    const dividersCount = Number.parseInt((max - min) / dividersRange, 10);
-    const dividers = [];
-
-    for (let i = 0; i < dividersCount; ++i)
-      dividers.push(renderTrackDivider(i));
-
-    return (
-      <div className={`${COMPONENT_CLASS}__track__line__dividers`}>
-        {dividers}
-      </div>
-    );
-  }, [trackRef, minRange, min, max]);
-  const renderTrackLine = () => {
-    return (
-      <div className={`${COMPONENT_CLASS}__track__line`}>
-        <div className={`${COMPONENT_CLASS}__track__line__extremum--min`}>
-          {min}
-        </div>
-        {renderTrackDividers}
-        <div className={`${COMPONENT_CLASS}__track__line__extremum--max`}>
-          {max}
-        </div>
-      </div>
-    );
-  };
-  const renderTrack = () => {
-    return (
-      <div
-        className={cn(`${COMPONENT_CLASS}__track`, className)}
-        ref={trackRef}
-      >
-        {renderTrackLine()}
-        {renderAddTrackTrigger()}
-        {renderTrackTriggers()}
-        {renderRangesValue()}
-      </div>
-    );
-  };
-  const render = () => {
-    return (
-      <div
-        className={COMPONENT_CLASS}
-        onMouseOver={setMouseOverTrack}
-        onMouseLeave={setMouseLeaveTrack}
-        onMouseMove={e => setMouseTrackPosition(e?.clientX)}
-      >
-        {renderTrack()}
-      </div>
-    );
-  };
-
-  return render();
-}