intelicoreact 1.6.20 → 1.6.21

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js

@@ -1,443 +1 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-
-import cn from "classnames";
-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 parseInt(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>
-  );
-}
+var n;function e(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}function t(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function r(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(n){return Object.getOwnPropertyDescriptor(r,n).enumerable}))),o.forEach(function(e){t(n,e,r[e])})}return n}function o(n,t){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var t,r,o=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=o){var i=[],u=!0,a=!1;try{for(o=o.call(n);!(u=(t=o.next()).done)&&(i.push(t.value),!e||i.length!==e);u=!0);}catch(n){a=!0,r=n}finally{try{u||null==o.return||o.return()}finally{if(a)throw r}}return i}}(n,t)||function(n,t){if(n){if("string"==typeof n)return e(n,t);var r=Object.prototype.toString.call(n).slice(8,-1);if("Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return e(n,t)}}(n,t)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as i,jsxs as u}from"react/jsx-runtime";import{useEffect as a,useLayoutEffect as l,useRef as c,useState as s}from"react";import d from"classnames";import{X as f}from"react-feather";import{formatToAddBitDepthPoints as m}from"../../../Functions/fieldValueFormatters";import{NUMERIC_KEYBOARD as v}from"../../../Functions/presets/mobileKeyboardTypesPresets";import g from"../../../Functions/useIsMobile/useIsMobile";import p from"../Input/Input";import"./RangeSlider.scss";function h(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:800,r=this;return function(){for(var o=arguments.length,i=Array(o),u=0;u<o;u++)i[u]=arguments[u];clearTimeout(n),n=setTimeout(function(){e.apply(r,i)},t)}}export default function _(n){var e,_,y,b,O=n.required,j=n.noTrack,w=n.rangeSymbol,N=n.min,P=void 0===N?0:N,k=n.max,S=void 0===k?100:k,x=n.decimalPlaces,T=void 0===x?2:x,C=n.minRange,I=void 0===C?0:C,E=n.precision,M=void 0===E?0:E,A=n.testId,B=void 0===A?"range-slider":A,D=n.value,F=void 0===D?{from:P,to:S}:D,R=n.unit,L=n.label,q=n.isUseBitPoints,U=void 0===q||q,K=n.onChange,V=void 0===K?function(){}:K,X=g().isMobile,$=c(0),z=o(s(0),2),G=z[0],H=z[1],J=o(s(0),2),Q=J[0],W=J[1],Y=c(0),Z=c(0),nn=function(n){return parseInt(parseFloat(n)*Math.pow(10,M),10)/Math.pow(10,M)},ne=o(s(null!=(y=null==F?void 0:F.from)?y:P),2),nt=ne[0],nr=ne[1],no=function(n){return nr(nn(n))},ni=o(s(null!=(b=null==F?void 0:F.to)?b:S),2),nu=ni[0],na=ni[1],nl=function(n){return na(nn(n))},nc=o(s(null),2);nc[0],nc[1];var ns=o(s(null),2),nd=ns[0],nf=ns[1],nm=o(s({from:!1,to:!1}),2),nv=nm[0],ng=nm[1],np=function(n,e){return ng(function(o){var i,u;return i=r({},o),u=null!=(u=t({},n,e))?u:{},Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(u)):(function(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t.push.apply(t,r)}return t})(Object(u)).forEach(function(n){Object.defineProperty(i,n,Object.getOwnPropertyDescriptor(u,n))}),i})},nh=nd?null==nd?void 0:nd.from:nt,n_=nd?null==nd?void 0:nd.to:nu,ny=o(s(null),2),nb=ny[0];ny[1];var nO=o(s(null),2),nj=nO[0],nw=nO[1],nN=o(s(null),2),nP=nN[0],nk=nN[1],nS=o(s(!1),2),nx=nS[0],nT=nS[1],nC=o(s(0),2),nI=nC[0],nE=nC[1],nM=o(s(0),2);nM[0],nM[1];var nA=o(s(0),2);nA[0],nA[1];var nB=function(n){return(n-P)/nI},nD=function(n,e){var t=!(arguments.length>2)||void 0===arguments[2]||arguments[2],r=!(arguments.length>3)||void 0===arguments[3]||arguments[3];switch(t&&(e=nn(e)),isNaN(e)&&(e=0),n){case"from":var o=function(n){return(!n&&0!==n||n<P)&&(n=P),n>nu-I&&(n=nu-I),n};t&&(e=o(e)),t?no(e):nr(e),!nx&&r&&h(function(){var n={from:nn(o(e)),to:nu};V(n),nf(n)},800)();break;case"to":var i=function(n){return(!n&&0!==n||n>S)&&(n=S),n<nt+I&&(n=nt+I),n};t&&(e=i(e)),t?nl(e):na(e),!nx&&r&&h(function(){var n={from:nt,to:nn(i(e))};V(n),nf(n)},800)()}},nF=function(n,e){(0===n.button||X)&&(nw(n.target),nk(e),nT(!0))},nR=function(n){if(X||(n.preventDefault(),n.stopPropagation()),nx||nT(!0),!nj)return!1;var e,t=(X?null==n||null==(e=n.touches)?void 0:e[0]:n).clientX,r=((null==nj?void 0:nj.getBoundingClientRect())||{}).width,o=void 0===r?16:r;if(t<Q||t>Q+G+o)return!1;nD(nP,((t-=o/2)-Q)*nI+P)},nL=function(){nw(null),nk(null),nT(!1)},nq=function(n,e){setTimeout(function(){return np(e,!0)},1)},nU=function(n,e){np(e,!1)};a(function(){var n,e;nD("from",null!=(n=null==F?void 0:F.from)?n:S,!0,!1),nD("to",null!=(e=null==F?void 0:F.to)?e:P,!0,!1)},[]),a(function(){return document.addEventListener("mouseup",nL),function(){document.removeEventListener("mouseup",nL)}},[]),a(function(){if(nj&&nx){var n=function(n){nR(n)};return document.addEventListener("mousemove",n),function(){document.removeEventListener("mousemove",n)}}},[nj,nx]),a(function(){nb&&document.addEventListener("mousemove",nR,{signal:null==nb?void 0:nb.signal})},[nb]),a(function(){nf(null)},[nx]),a(function(){Object.values(nv).every(function(n){return!n})&&!nx&&(F.from!==nt||F.to!==nu)&&V({from:nt,to:nu}),nx&&nf({from:nt,to:nu})},[nt,nu,nx]),l(function(){no(F.from),nl(F.to)},[F]),l(function(){var n,e,t,r,o,i=(null==$||null==(n=$.current)?void 0:n.getBoundingClientRect())||{},u=i.width,a=i.x;nE((S-P)/(u-=(null==Y||null==(t=Y.current)||null==(e=t.getBoundingClientRect())?void 0:e.width)||(null==Z||null==(o=Z.current)||null==(r=o.getBoundingClientRect())?void 0:r.width))),H(u),W(a)},[$]),a(function(){Object.values(nv).every(function(n){return!n})?nf(!1):nf({from:nt,to:nu})},[nv]);return u("div",{"data-testid":B,className:"range-slider",children:[u("div",{className:"range-slider__header",children:[u("div",{className:"range-slider__header__label",children:[void 0===L?"":L,O&&i("span",{className:"label_isRequired",children:"*"})]}),P!==nh||S!==n_?u("div",{className:"range-slider__header__selected-range",children:[u("div",{className:"range-slider__header__selected-range--text",children:["from ",U?m(nh):nh," to"," ",U?m(n_):n_,w,void 0===R?"":R]}),i("div",{className:"range-slider__header__selected-range--reset",onClick:function(){no(P),nl(S)},children:i(f,{})})]}):null]}),u("div",{className:"range-slider__inputs",children:[i("div",{className:"range-slider__inputs--from",children:i(p,r({"data-testid":"".concat(B,"-input-from"),value:nt.toString(),onFocus:function(n){return nq(n,"from")},onBlur:function(n){return nU(n,"from")},onChange:function(n){return nD("from",n,!1)},onlyNumbers:{type:"float",decimalPlaces:T,min:P,max:S},isPriceInput:U},v))}),i("div",{className:"range-slider__inputs__input",children:i(p,r({"data-testid":"".concat(B,"-input-to"),value:nu.toString(),onFocus:function(n){return nq(n,"to")},onBlur:function(n){return nU(n,"to")},onChange:function(n){return nD("to",n,!1)},onlyNumbers:{type:"float",decimalPlaces:T,min:P,max:S},isPriceInput:U},v))})]}),u("div",{className:d("range-slider__track",{hidden:j}),ref:$,children:[i("div",{className:"range-slider__track__line"}),i("div",{className:"range-slider__track__range",style:{width:"".concat(nB(n_)-nB(nh),"px"),left:"".concat(nB(nh),"px")}}),(e={left:"".concat(nB(nh),"px")},_={left:"".concat(nB(n_),"px")},u("div",{className:"range-slider__track__range-triggers",children:[i("div",{"data-testid":"".concat(B,"-track-from"),ref:Y,style:e,className:"range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-left",onMouseDown:function(n){return X?{}:nF(n,"from")},onTouchStart:function(n){return nF(n,"from")},onTouchMove:nR,onTouchEnd:nL,onClick:function(){}}),i("div",{"data-testid":"".concat(B,"-track-to"),ref:Z,style:_,className:"range-slider__track__range-triggers--trigger range-slider__track__range-triggers--trigger-right",onMouseDown:function(n){return X?{}:nF(n,"to")},onTouchStart:function(n){return nF(n,"to")},onTouchMove:nR,onTouchEnd:nL,onClick:function(){}})]}))]})]})}