intelicoreact 1.6.7 → 1.6.8

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

@@ -1,482 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return RangeSlider;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _reactfeather = require("react-feather");
-const _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
-const _mobileKeyboardTypesPresets = require("../../../Functions/presets/mobileKeyboardTypesPresets");
-const _useIsMobile = /*#__PURE__*/ _interop_require_default(require("../../../Functions/useIsMobile/useIsMobile"));
-const _Input = /*#__PURE__*/ _interop_require_default(require("../Input/Input"));
-require("./RangeSlider.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-let timer;
-const DEBOUNCE_TIME = 800;
-function debounce(func, timeout = DEBOUNCE_TIME) {
-    return (...args)=>{
-        clearTimeout(timer);
-        timer = setTimeout(()=>{
-            func.apply(this, args);
-        }, timeout);
-    };
-}
-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 } = (0, _useIsMobile.default)();
-    const trackRef = (0, _react.useRef)(0);
-    const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
-    const [trackPosition, setTrackPosition] = (0, _react.useState)(0);
-    const fromTriggerRef = (0, _react.useRef)(0);
-    const toTriggerRef = (0, _react.useRef)(0);
-    const prepareValue = (value)=>{
-        return parseInt(parseFloat(value) * 10 ** precision, 10) / 10 ** precision;
-    };
-    var _value_from;
-    const [from, setFromValue] = (0, _react.useState)((_value_from = value === null || value === void 0 ? void 0 : value.from) !== null && _value_from !== void 0 ? _value_from : min);
-    const setFrom = (v)=>setFromValue(prepareValue(v));
-    var _value_to;
-    const [to, setToValue] = (0, _react.useState)((_value_to = value === null || value === void 0 ? void 0 : value.to) !== null && _value_to !== void 0 ? _value_to : max);
-    const setTo = (v)=>setToValue(prepareValue(v));
-    const [focusedType, setFocusedType] = (0, _react.useState)(null);
-    const [frezeedValues, setFrezeedValues] = (0, _react.useState)(null);
-    const [isInputsFocused, setIsInputsFocused] = (0, _react.useState)({
-        from: false,
-        to: false
-    });
-    const setIsInputFocused = (input, value)=>setIsInputsFocused((state)=>({
-                ...state,
-                [input]: value
-            }));
-    const fromValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.from : from;
-    const toValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.to : to;
-    const [movingController, setMovingController] = (0, _react.useState)(null);
-    const [movingTrigger, setMovingTrigger] = (0, _react.useState)(null);
-    const [movingTriggerType, setMovingTriggerType] = (0, _react.useState)(null);
-    const [isTriggerMoved, setIsTriggerMoved] = (0, _react.useState)(false);
-    const [pointsPerPx, setPointsPerPx] = (0, _react.useState)(0);
-    const [extremumRange, setExtremumRange] = (0, _react.useState)(0);
-    const [extremumWidth, setExtremumWidth] = (0, _react.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)=>{
-        var _e_touches;
-        if (!isMobile) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        if (!isTriggerMoved) setIsTriggerMoved(true);
-        if (!movingTrigger) return false;
-        let { clientX: x } = isMobile ? e === null || e === void 0 ? void 0 : (_e_touches = e.touches) === null || _e_touches === void 0 ? void 0 : _e_touches[0] : e;
-        const { width: triggerWidth = 16 } = (movingTrigger === null || movingTrigger === void 0 ? void 0 : 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);
-    };
-    (0, _react.useEffect)(()=>{
-        var _value_from;
-        onRangeChange("from", (_value_from = value === null || value === void 0 ? void 0 : value.from) !== null && _value_from !== void 0 ? _value_from : max, true, false);
-        var _value_to;
-        onRangeChange("to", (_value_to = value === null || value === void 0 ? void 0 : value.to) !== null && _value_to !== void 0 ? _value_to : min, true, false);
-    }, []);
-    /// MouseUp Event Controller
-    (0, _react.useEffect)(()=>{
-        document.addEventListener("mouseup", onTriggerMoveEnd);
-        return ()=>{
-            document.removeEventListener("mouseup", onTriggerMoveEnd);
-        };
-    }, []);
-    // MouseMove Event Controller
-    (0, _react.useEffect)(()=>{
-        // Прекратить обработку, если нет активного триггера или не было движения
-        if (!movingTrigger || !isTriggerMoved) return;
-        const handleMouseMove = (e)=>{
-            onTriggerMove(e);
-        };
-        document.addEventListener("mousemove", handleMouseMove);
-        return ()=>{
-            document.removeEventListener("mousemove", handleMouseMove);
-        };
-    }, [
-        movingTrigger,
-        isTriggerMoved
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (movingController) {
-            document.addEventListener("mousemove", onTriggerMove, {
-                signal: movingController === null || movingController === void 0 ? void 0 : movingController.signal
-            });
-        }
-    }, [
-        movingController
-    ]);
-    (0, _react.useEffect)(()=>{
-        setFrezeedValues(null);
-    }, [
-        isTriggerMoved
-    ]);
-    (0, _react.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
-    ]);
-    (0, _react.useLayoutEffect)(()=>{
-        setFrom(value.from);
-        setTo(value.to);
-    }, [
-        value
-    ]);
-    (0, _react.useLayoutEffect)(()=>{
-        var _trackRef_current, _fromTriggerRef_current_getBoundingClientRect, _fromTriggerRef_current, _toTriggerRef_current_getBoundingClientRect, _toTriggerRef_current;
-        let { width, x } = (trackRef === null || trackRef === void 0 ? void 0 : (_trackRef_current = trackRef.current) === null || _trackRef_current === void 0 ? void 0 : _trackRef_current.getBoundingClientRect()) || {};
-        width -= (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef_current = fromTriggerRef.current) === null || _fromTriggerRef_current === void 0 ? void 0 : (_fromTriggerRef_current_getBoundingClientRect = _fromTriggerRef_current.getBoundingClientRect()) === null || _fromTriggerRef_current_getBoundingClientRect === void 0 ? void 0 : _fromTriggerRef_current_getBoundingClientRect.width) || (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef_current = toTriggerRef.current) === null || _toTriggerRef_current === void 0 ? void 0 : (_toTriggerRef_current_getBoundingClientRect = _toTriggerRef_current.getBoundingClientRect()) === null || _toTriggerRef_current_getBoundingClientRect === void 0 ? void 0 : _toTriggerRef_current_getBoundingClientRect.width);
-        setPointsPerPx(countPointsPerPx(width));
-        setTrackWidth(width);
-        setTrackPosition(x);
-    }, [
-        trackRef
-    ]);
-    (0, _react.useEffect)(()=>{
-        if (Object.values(isInputsFocused).every((v)=>!v)) {
-            setFrezeedValues(false);
-        } else {
-            setFrezeedValues({
-                from,
-                to
-            });
-        }
-    }, [
-        isInputsFocused
-    ]);
-    const renderLabel = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__header__label",
-            children: [
-                label,
-                required && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                    className: "label_isRequired",
-                    children: "*"
-                })
-            ]
-        });
-    };
-    const renderSelectedRange = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__header__selected-range",
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    className: "range-slider__header__selected-range--text",
-                    children: [
-                        "from ",
-                        isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(fromValue) : fromValue,
-                        " to",
-                        " ",
-                        isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(toValue) : toValue,
-                        rangeSymbol,
-                        unit
-                    ]
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "range-slider__header__selected-range--reset",
-                    onClick: resetRange,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {})
-                })
-            ]
-        });
-    };
-    const renderHeader = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__header",
-            children: [
-                renderLabel(),
-                min !== fromValue || max !== toValue ? renderSelectedRange() : null
-            ]
-        });
-    };
-    const renderInputs = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__inputs",
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "range-slider__inputs--from",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
-                        "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,
-                        ..._mobileKeyboardTypesPresets.NUMERIC_KEYBOARD
-                    })
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "range-slider__inputs__input",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
-                        "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,
-                        ..._mobileKeyboardTypesPresets.NUMERIC_KEYBOARD
-                    })
-                })
-            ]
-        });
-    };
-    const renderTrackRange = ()=>{
-        const style = {
-            width: `${getRangeWidth()}px`,
-            left: `${getRangeOffset()}px`
-        };
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("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 /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)("range-slider__track", {
-                    hidden: noTrack
-                }),
-                ref: trackRef,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "range-slider__track__line"
-                    }),
-                    renderTrackRange(),
-                    renderTrackTriggers()
-                ]
-            });
-        };
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: "range-slider__track__range-triggers",
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("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: ()=>{}
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("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: ()=>{}
-                })
-            ]
-        });
-    };
-    const renderTrack = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-            className: (0, _classnames.default)("range-slider__track", {
-                hidden: noTrack
-            }),
-            ref: trackRef,
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: "range-slider__track__line"
-                }),
-                renderTrackRange(),
-                renderTrackTriggers()
-            ]
-        });
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        "data-testid": testId,
-        className: "range-slider",
-        children: [
-            renderHeader(),
-            renderInputs(),
-            renderTrack()
-        ]
-    });
-}