intelicoreact 1.8.10 → 1.8.12

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

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