@rolster/react-components 19.8.19 → 19.8.20

package/dist/es/index.mjs

@@ -1,4 +1,4 @@
-import require$$0, { memo, useMemo, useState, useRef, useCallback, useEffect, useInsertionEffect, createContext, useContext } from 'react';
+import require$$0, { memo, useMemo, useState, useRef, useCallback, useEffect, useInsertionEffect, useId, createContext, useContext } from 'react';
 import { currencyFormat, BigDecimal, valueIsDefined, SealedPartial } from '@rolster/commons';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -2374,57 +2374,183 @@ function RlsPickerYearComponent({ date, disabled, formControl, maxDate, minDate,
 }
 const RlsPickerYear = memo(RlsPickerYearComponent);
 
-function calculateInitialValue(value, minValue, maxValue) {
-    return minValue > value ? minValue : maxValue < value ? maxValue : value;
+const RATE_MIN = 0;
+const RATE_MAX = 100;
+const PRECISION = 12;
+function clampNumber(value, minValue, maxValue) {
+    if (minValue > maxValue) {
+        return minValue;
+    }
+    return Math.min(Math.max(value, minValue), maxValue);
+}
+function normalizeSliderValue(value, minValue, maxValue, step) {
+    const valueClamped = clampNumber(value, minValue, maxValue);
+    if (!step || step <= 0) {
+        return valueClamped;
+    }
+    if (valueClamped <= minValue) {
+        return minValue;
+    }
+    if (valueClamped >= maxValue) {
+        return maxValue;
+    }
+    const steps = Math.round((valueClamped - minValue) / step);
+    const valueStepped = parseFloat((minValue + steps * step).toPrecision(PRECISION));
+    return clampNumber(valueStepped, minValue, maxValue);
+}
+function sliderValueToRate(value, minValue, maxValue) {
+    const range = maxValue - minValue;
+    if (range <= 0) {
+        return RATE_MIN;
+    }
+    return clampNumber(((value - minValue) / range) * RATE_MAX, RATE_MIN, RATE_MAX);
 }
-function calculateInitialRate(value, minValue, maxValue) {
-    const rateMax = maxValue - minValue;
-    const rateValue = value - minValue;
-    return Math.ceil((rateValue / rateMax) * 100);
+function sliderRateToValue(rate, minValue, maxValue, step) {
+    const range = maxValue - minValue;
+    const rateClamped = clampNumber(rate, RATE_MIN, RATE_MAX);
+    return normalizeSliderValue(minValue + (range * rateClamped) / RATE_MAX, minValue, maxValue, step);
 }
-function RlsSliderComponent({ children, className, disabled, formControl, identifier, maxValue, minValue, onValue, prefixIcon, rlsTheme, value }) {
+
+const DEFAULT_STEP = 1;
+const PAGE_STEP_DIVISOR = 10;
+function RlsSliderComponent({ children, className, disabled, formControl, identifier, maxValue, minValue, onValue, prefixIcon, rlsTheme, step, value }) {
     const minValueSlider = useMemo(() => {
         return minValue ?? 0;
     }, [minValue]);
     const maxValueSlider = useMemo(() => {
         return maxValue ?? 100;
     }, [maxValue]);
-    const [valueSlider, setValue] = useState(calculateInitialValue(formControl?.value ?? value ?? 0, minValueSlider, maxValueSlider));
-    const [rate, setRate] = useState(calculateInitialRate(valueSlider, minValueSlider, maxValueSlider));
-    const refComponent = useRef(null);
+    const stepSlider = useMemo(() => {
+        return step && step > 0 ? step : DEFAULT_STEP;
+    }, [step]);
+    const [valueSlider, setValueSlider] = useState(() => {
+        return normalizeSliderValue(formControl?.value ?? value ?? 0, minValueSlider, maxValueSlider, stepSlider);
+    });
+    const [dragging, setDragging] = useState(false);
     const refTrack = useRef(null);
-    const refTrackOn = useRef(null);
     const refThumb = useRef(null);
+    const refValue = useRef(valueSlider);
+    const refValueExternal = useRef(formControl?.value ?? value);
+    const labelId = useId();
+    const rate = useMemo(() => {
+        return sliderValueToRate(valueSlider, minValueSlider, maxValueSlider);
+    }, [valueSlider, minValueSlider, maxValueSlider]);
     const classNameSlider = renderClassStatus('rls-slider', {
         complet: valueSlider === maxValueSlider,
         disabled: disabled,
+        dragging: dragging,
         empty: valueSlider === minValueSlider
     }, className);
+    const commitValue = useCallback((valueNext) => {
+        if (refValue.current === valueNext) {
+            return;
+        }
+        refValue.current = valueNext;
+        setValueSlider(valueNext);
+        formControl?.setValue(valueNext);
+        onValue?.(valueNext);
+    }, [formControl, onValue]);
+    const commitRate = useCallback((rateNext) => {
+        commitValue(sliderRateToValue(rateNext, minValueSlider, maxValueSlider, stepSlider));
+    }, [commitValue, minValueSlider, maxValueSlider, stepSlider]);
+    const calculateRateFromClientX = useCallback((clientX) => {
+        const { left, width } = refTrack.current.getBoundingClientRect();
+        return width > 0 ? ((clientX - left) / width) * 100 : 0;
+    }, []);
+    const onPointerDown = useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        event.preventDefault();
+        refThumb.current.focus();
+        setDragging(true);
+        commitRate(calculateRateFromClientX(event.clientX));
+    }, [disabled, commitRate, calculateRateFromClientX]);
+    const calculateValueFromKey = useCallback((key) => {
+        const pageStep = Math.max(stepSlider, (maxValueSlider - minValueSlider) / PAGE_STEP_DIVISOR);
+        switch (key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                return refValue.current + stepSlider;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                return refValue.current - stepSlider;
+            case 'PageUp':
+                return refValue.current + pageStep;
+            case 'PageDown':
+                return refValue.current - pageStep;
+            case 'Home':
+                return minValueSlider;
+            case 'End':
+                return maxValueSlider;
+            default:
+                return undefined;
+        }
+    }, [stepSlider, minValueSlider, maxValueSlider]);
+    const onKeyDown = useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        const valueNext = calculateValueFromKey(event.key);
+        if (valueNext === undefined) {
+            return;
+        }
+        event.preventDefault();
+        commitValue(normalizeSliderValue(valueNext, minValueSlider, maxValueSlider, stepSlider));
+    }, [
+        disabled,
+        calculateValueFromKey,
+        commitValue,
+        minValueSlider,
+        maxValueSlider,
+        stepSlider
+    ]);
+    useEffect(() => {
+        if (!dragging) {
+            return;
+        }
+        const onPointerMove = (event) => {
+            commitRate(calculateRateFromClientX(event.clientX));
+        };
+        const onPointerRelease = () => {
+            setDragging(false);
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerRelease);
+        window.addEventListener('pointercancel', onPointerRelease);
+        return () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerRelease);
+            window.removeEventListener('pointercancel', onPointerRelease);
+        };
+    }, [dragging, commitRate, calculateRateFromClientX]);
     useEffect(() => {
         const valueInitial = formControl?.value ?? value ?? 0;
-        refThumb.current.style.left = `${rate}%`;
-        refTrackOn.current.style.width = `${rate}%`;
-        if (valueInitial !== valueSlider) {
-            formControl?.setValue(valueSlider);
-            onValue?.(valueSlider);
+        if (valueInitial !== refValue.current) {
+            formControl?.setValue(refValue.current);
+            onValue?.(refValue.current);
         }
     }, []);
-    const calculateValueWithRate = useCallback((rate) => {
-        const value = Math.ceil(((maxValueSlider - minValueSlider) * rate) / 100);
-        refThumb.current.style.left = `${rate}%`;
-        refTrackOn.current.style.width = `${rate}%`;
-        const sliderValue = value + minValueSlider;
-        setRate(rate);
-        setValue(sliderValue);
-        formControl?.setValue(sliderValue);
-        onValue?.(sliderValue);
-    }, [minValueSlider, maxValueSlider, formControl, onValue]);
-    const onClickTrack = useCallback((event) => {
-        const { left, width } = refTrack.current.getBoundingClientRect();
-        const rate = Math.ceil(((event.clientX - left) / width) * 100);
-        calculateValueWithRate(rate);
-    }, [minValueSlider, maxValueSlider]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameSlider, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("span", { className: "rls-slider__label", children: children }), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), jsxRuntimeExports.jsxs("div", { ref: refComponent, className: "rls-slider__component", children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", onClick: onClickTrack, children: jsxRuntimeExports.jsx("div", { ref: refTrackOn, className: "rls-slider__track__on" }) }), jsxRuntimeExports.jsxs("div", { ref: refThumb, className: "rls-slider__thumb", children: [rate, "%"] })] })] })] }));
+    useEffect(() => {
+        const valueExternal = formControl?.value ?? value;
+        if (valueExternal === undefined ||
+            valueExternal === refValueExternal.current) {
+            return;
+        }
+        refValueExternal.current = valueExternal;
+        commitValue(normalizeSliderValue(valueExternal, minValueSlider, maxValueSlider, stepSlider));
+    }, [
+        value,
+        formControl?.value,
+        commitValue,
+        minValueSlider,
+        maxValueSlider,
+        stepSlider
+    ]);
+    useEffect(() => {
+        commitValue(normalizeSliderValue(refValue.current, minValueSlider, maxValueSlider, stepSlider));
+    }, [commitValue, minValueSlider, maxValueSlider, stepSlider]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: classNameSlider, "rls-theme": rlsTheme, children: [children && (jsxRuntimeExports.jsx("span", { id: labelId, className: "rls-slider__label", children: children })), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), jsxRuntimeExports.jsxs("div", { className: "rls-slider__component", onPointerDown: onPointerDown, children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", children: jsxRuntimeExports.jsx("div", { className: "rls-slider__track__on", style: { width: `${rate}%` } }) }), jsxRuntimeExports.jsx("div", { ref: refThumb, className: "rls-slider__thumb", style: { left: `${rate}%` }, role: "slider", tabIndex: disabled ? -1 : 0, "aria-orientation": "horizontal", "aria-valuemin": minValueSlider, "aria-valuemax": maxValueSlider, "aria-valuenow": valueSlider, "aria-disabled": disabled || undefined, "aria-labelledby": children ? labelId : undefined, onKeyDown: onKeyDown, children: valueSlider })] })] })] }));
 }
 const RlsSlider = memo(RlsSliderComponent);
 
@@ -4641,11 +4767,17 @@ function RlsImageEditorComponent(props) {
     useResize({ refElement: refImage, onResize: onResizeElement });
     const onCropImage = useCallback(() => {
         const cropProps = getCropProperties();
-        const width = props.maxWidth || cropProps.width;
-        const height = width * getRatioFactor(ratio);
+        const width = Math.round(props.maxWidth
+            ? Math.min(props.maxWidth, cropProps.width)
+            : cropProps.width);
+        const height = Math.round(width * getRatioFactor(ratio));
         refPicture.current.width = width;
         refPicture.current.height = height;
         const context = refPicture.current.getContext('2d');
+        if (context) {
+            context.imageSmoothingEnabled = true;
+            context.imageSmoothingQuality = 'high';
+        }
         context?.drawImage(refCanvas.current, cropProps.left, cropProps.top, cropProps.width, cropProps.height, 0, 0, width, height);
         refPicture.current.toBlob((blob) => {
             if (blob) {