intelicoreact 1.8.2 → 1.8.4

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

@@ -0,0 +1,865 @@
+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();
+}