intelicoreact 1.8.3 → 1.8.5

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.jsx

@@ -0,0 +1,449 @@
+import cn from 'classnames';
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { X } from 'react-feather';
+
+import { formatToAddBitDepthPoints as addCommas } from '../../../Functions/fieldValueFormatters';
+import { NUMERIC_KEYBOARD } from '../../../Functions/presets/mobileKeyboardTypesPresets';
+import useIsMobile from '../../../Functions/useIsMobile/useIsMobile';
+import Input from '../Input/Input';
+
+import './RangeSlider.scss';
+
+let timer;
+
+const DEBOUNCE_TIME = 800;
+
+function debounce(func, timeout = DEBOUNCE_TIME) {
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, timeout);
+  };
+}
+
+export default function RangeSlider({
+  required,
+  noTrack,
+  rangeSymbol,
+  min = 0,
+  max = 100,
+  decimalPlaces = 2,
+  minRange = 0,
+  precision = 0,
+  testId = 'range-slider',
+  value = {
+    from: min,
+    to: max,
+  },
+  unit = '',
+  label = '',
+  isUseBitPoints = true,
+
+  onChange = () => {},
+}) {
+  const { isMobile } = useIsMobile();
+  const trackRef = useRef(0);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const [trackPosition, setTrackPosition] = useState(0);
+
+  const fromTriggerRef = useRef(0);
+  const toTriggerRef = useRef(0);
+
+  const prepareValue = (value) => {
+    return Number.parseInt(Number.parseFloat(value) * 10 ** precision, 10) / 10 ** precision;
+  };
+
+  const [from, setFromValue] = useState(value?.from ?? min);
+  const setFrom = v => setFromValue(prepareValue(v));
+  const [to, setToValue] = useState(value?.to ?? max);
+  const setTo = v => setToValue(prepareValue(v));
+
+  const [focusedType, setFocusedType] = useState(null);
+  const [frezeedValues, setFrezeedValues] = useState(null);
+
+  const [isInputsFocused, setIsInputsFocused] = useState({
+    from: false,
+    to: false,
+  });
+
+  const setIsInputFocused = (input, value) =>
+    setIsInputsFocused(state => ({ ...state, [input]: value }));
+
+  const fromValue = frezeedValues ? frezeedValues?.from : from;
+  const toValue = frezeedValues ? frezeedValues?.to : to;
+
+  const [movingController, setMovingController] = useState(null);
+
+  const [movingTrigger, setMovingTrigger] = useState(null);
+  const [movingTriggerType, setMovingTriggerType] = useState(null);
+  const [isTriggerMoved, setIsTriggerMoved] = useState(false);
+
+  const [pointsPerPx, setPointsPerPx] = useState(0);
+
+  const [extremumRange, setExtremumRange] = useState(0);
+  const [extremumWidth, setExtremumWidth] = useState(0);
+
+  const countPointsPerPx = (width) => {
+    return (max - min) / width;
+  };
+
+  const resetRange = () => {
+    setFrom(min);
+    setTo(max);
+  };
+
+  const getTrackXByPoints = (pts) => {
+    return (pts - min) / pointsPerPx;
+  };
+
+  const getRangeWidth = () => {
+    return getTrackXByPoints(toValue) - getTrackXByPoints(fromValue);
+  };
+
+  const getRangeOffset = () => {
+    return getTrackXByPoints(fromValue);
+  };
+
+  const getXByPoints = (pts) => {
+    return (pts - min) / pointsPerPx + trackPosition;
+  };
+
+  const getPointsByX = (x) => {
+    return (x - trackPosition) * pointsPerPx + min;
+  };
+
+  const onRangeChange = (type, value, validate = true, callOnChange = true) => {
+    if (validate) value = prepareValue(value);
+
+    if (isNaN(value)) value = 0;
+
+    switch (type) {
+      case 'from':
+        const getValidatedFromValue = (value) => {
+          if ((!value && value !== 0) || value < min) {
+            value = min;
+          }
+
+          if (value > to - minRange) {
+            value = to - minRange;
+          }
+
+          return value;
+        };
+
+        if (validate) {
+          value = getValidatedFromValue(value);
+        }
+
+        validate ? setFrom(value) : setFromValue(value);
+        if (!isTriggerMoved && callOnChange) {
+          debounce(() => {
+            const values = {
+              from: prepareValue(getValidatedFromValue(value)),
+              to,
+            };
+            onChange(values);
+            setFrezeedValues(values);
+          }, DEBOUNCE_TIME)();
+        }
+        break;
+      case 'to':
+        const getValidatedToValue = (value) => {
+          if ((!value && value !== 0) || value > max) {
+            value = max;
+          }
+
+          if (value < from + minRange) {
+            value = from + minRange;
+          }
+
+          return value;
+        };
+
+        if (validate) {
+          value = getValidatedToValue(value);
+        }
+
+        validate ? setTo(value) : setToValue(value);
+        if (!isTriggerMoved && callOnChange) {
+          debounce(() => {
+            const values = {
+              from,
+              to: prepareValue(getValidatedToValue(value)),
+            };
+            onChange(values);
+            setFrezeedValues(values);
+          }, DEBOUNCE_TIME)();
+        }
+        break;
+    }
+  };
+  // MouseDown Event Controller
+  const onTriggerMouseDown = (e, type) => {
+    if (e.button !== 0 && !isMobile) return; // Отменить обработку, если нажата не левая кнопка мыши
+    setMovingTrigger(e.target);
+    setMovingTriggerType(type);
+    setIsTriggerMoved(true); // Установить флаг движения в true при клике
+  };
+
+  const onTriggerMove = (e) => {
+    if (!isMobile) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    if (!isTriggerMoved) setIsTriggerMoved(true);
+    if (!movingTrigger) return false;
+
+    let { clientX: x } = isMobile ? e?.touches?.[0] : e;
+    const { width: triggerWidth = 16 }
+      = movingTrigger?.getBoundingClientRect() || {};
+
+    if (x < trackPosition || x > trackPosition + trackWidth + triggerWidth)
+      return false;
+
+    x -= triggerWidth / 2;
+
+    onRangeChange(movingTriggerType, getPointsByX(x));
+  };
+  const onTriggerMoveEnd = () => {
+    setMovingTrigger(null);
+    setMovingTriggerType(null);
+    setIsTriggerMoved(false);
+  };
+  const onRangeInputFocus = (e, type) => {
+    setTimeout(() => setIsInputFocused(type, true), 1);
+  };
+
+  const onRangeInputBlur = (e, type) => {
+    setIsInputFocused(type, false);
+  };
+
+  useEffect(() => {
+    onRangeChange('from', value?.from ?? max, true, false);
+    onRangeChange('to', value?.to ?? min, true, false);
+  }, []);
+
+  /// MouseUp Event Controller
+  useEffect(() => {
+    document.addEventListener('mouseup', onTriggerMoveEnd);
+
+    return () => {
+      document.removeEventListener('mouseup', onTriggerMoveEnd);
+    };
+  }, []);
+
+  // MouseMove Event Controller
+  useEffect(() => {
+    // Прекратить обработку, если нет активного триггера или не было движения
+    if (!movingTrigger || !isTriggerMoved) return;
+    const handleMouseMove = (e) => {
+      onTriggerMove(e);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [movingTrigger, isTriggerMoved]);
+
+  useEffect(() => {
+    if (movingController) {
+      document.addEventListener('mousemove', onTriggerMove, {
+        signal: movingController?.signal,
+      });
+    }
+  }, [movingController]);
+
+  useEffect(() => {
+    setFrezeedValues(null);
+  }, [isTriggerMoved]);
+
+  useEffect(() => {
+    if (
+      Object.values(isInputsFocused).every(v => !v)
+      && !isTriggerMoved
+      && (value.from !== from || value.to !== to)
+    ) {
+      onChange({ from, to });
+    }
+    if (isTriggerMoved) setFrezeedValues({ from, to });
+  }, [from, to, isTriggerMoved]);
+
+  useLayoutEffect(() => {
+    setFrom(value.from);
+    setTo(value.to);
+  }, [value]);
+
+  useLayoutEffect(() => {
+    let { width, x } = trackRef?.current?.getBoundingClientRect() || {};
+    width
+      -= fromTriggerRef?.current?.getBoundingClientRect()?.width
+        || toTriggerRef?.current?.getBoundingClientRect()?.width;
+
+    setPointsPerPx(countPointsPerPx(width));
+    setTrackWidth(width);
+    setTrackPosition(x);
+  }, [trackRef]);
+
+  useEffect(() => {
+    if (Object.values(isInputsFocused).every(v => !v)) {
+      setFrezeedValues(false);
+    }
+    else {
+      setFrezeedValues({ from, to });
+    }
+  }, [isInputsFocused]);
+
+  const renderLabel = () => {
+    return (
+      <div className="range-slider__header__label">
+        {label}
+        {required && <span className="label_isRequired">*</span>}
+      </div>
+    );
+  };
+
+  const renderSelectedRange = () => {
+    return (
+      <div className="range-slider__header__selected-range">
+        <div className="range-slider__header__selected-range--text">
+          from
+          {' '}
+          {isUseBitPoints ? addCommas(fromValue) : fromValue}
+          {' '}
+          to
+          {' '}
+          {isUseBitPoints ? addCommas(toValue) : toValue}
+          {rangeSymbol}
+          {unit}
+        </div>
+        <div
+          className="range-slider__header__selected-range--reset"
+          onClick={resetRange}
+        >
+          <X />
+        </div>
+      </div>
+    );
+  };
+
+  const renderHeader = () => {
+    return (
+      <div className="range-slider__header">
+        {renderLabel()}
+        {min !== fromValue || max !== toValue ? renderSelectedRange() : null}
+      </div>
+    );
+  };
+
+  const renderInputs = () => {
+    return (
+      <div className="range-slider__inputs">
+        <div className="range-slider__inputs--from">
+          <Input
+            data-testid={`${testId}-input-from`}
+            value={from.toString()}
+            onFocus={e => onRangeInputFocus(e, 'from')}
+            onBlur={e => onRangeInputBlur(e, 'from')}
+            onChange={value => onRangeChange('from', value, false)}
+            onlyNumbers={{ type: 'float', decimalPlaces, min, max }}
+            isPriceInput={isUseBitPoints}
+            {...NUMERIC_KEYBOARD}
+          />
+        </div>
+        <div className="range-slider__inputs__input">
+          <Input
+            data-testid={`${testId}-input-to`}
+            value={to.toString()}
+            onFocus={e => onRangeInputFocus(e, 'to')}
+            onBlur={e => onRangeInputBlur(e, 'to')}
+            onChange={value => onRangeChange('to', value, false)}
+            onlyNumbers={{ type: 'float', decimalPlaces, min, max }}
+            isPriceInput={isUseBitPoints}
+            {...NUMERIC_KEYBOARD}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  const renderTrackRange = () => {
+    const style = {
+      width: `${getRangeWidth()}px`,
+      left: `${getRangeOffset()}px`,
+    };
+    return <div className="range-slider__track__range" style={style} />;
+  };
+
+  const renderTrackTriggers = () => {
+    const fromStyle = {
+      left: `${getTrackXByPoints(fromValue)}px`,
+    };
+    const toStyle = {
+      left: `${getTrackXByPoints(toValue)}px`,
+    };
+    const renderTrack = () => {
+      return (
+        <div
+          className={cn('range-slider__track', { hidden: noTrack })}
+          ref={trackRef}
+        >
+          <div className="range-slider__track__line" />
+          {renderTrackRange()}
+          {renderTrackTriggers()}
+        </div>
+      );
+    };
+    return (
+      <div className="range-slider__track__range-triggers">
+        <div
+          data-testid={`${testId}-track-from`}
+          ref={fromTriggerRef}
+          style={fromStyle}
+          className="range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-left"
+          onMouseDown={e => (!isMobile ? onTriggerMouseDown(e, 'from') : {})}
+          onTouchStart={e => onTriggerMouseDown(e, 'from')}
+          onTouchMove={onTriggerMove}
+          onTouchEnd={onTriggerMoveEnd}
+          onClick={() => {}} // DONT REMOVE! MOBILE WILL NOT WORK WITHOUT IT
+        />
+        <div
+          data-testid={`${testId}-track-to`}
+          ref={toTriggerRef}
+          style={toStyle}
+          className="range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-right"
+          onMouseDown={e => (!isMobile ? onTriggerMouseDown(e, 'to') : {})}
+          onTouchStart={e => onTriggerMouseDown(e, 'to')}
+          onTouchMove={onTriggerMove}
+          onTouchEnd={onTriggerMoveEnd}
+          onClick={() => {}} // DONT REMOVE! MOBILE WILL NOT WORK WITHOUT IT
+        />
+      </div>
+    );
+  };
+
+  const renderTrack = () => {
+    return (
+      <div
+        className={cn('range-slider__track', { hidden: noTrack })}
+        ref={trackRef}
+      >
+        <div className="range-slider__track__line" />
+        {renderTrackRange()}
+        {renderTrackTriggers()}
+      </div>
+    );
+  };
+
+  return (
+    <div data-testid={testId} className="range-slider">
+      {renderHeader()}
+      {renderInputs()}
+      {renderTrack()}
+    </div>
+  );
+}