@rolster/react-components 19.11.0 → 19.12.0

package/dist/es/index.mjs

@@ -3821,11 +3821,20 @@ const RlsModal = memo(RlsModalComponent);
 function formatTime(value) {
     return String(value).padStart(2, '0');
 }
+function pointerIsInsideTick({ clientX, clientY }, tick) {
+    const { left, top, width, height } = tick.getBoundingClientRect();
+    const distanceX = clientX - (left + width / 2);
+    const distanceY = clientY - (top + height / 2);
+    const radius = Math.min(width, height) / 2;
+    return distanceX ** 2 + distanceY ** 2 <= radius ** 2;
+}
 const CLOCK_VALUES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const CLOCK_HOURS = 12;
+const CLOCK_MINUTES = 60;
 const RADIUS = 48;
 const DIAL_RADIUS = 60;
 const TICK_RADIUS = 7;
-function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
+function RlsPickerClockTick({ selectionIsHours, value }) {
     const styleTick = useMemo(() => {
         const radian = (value / 6) * Math.PI;
         const x = Math.sin(radian) * RADIUS;
@@ -3835,20 +3844,13 @@ function RlsPickerClockTick({ onValue, selectionIsHours, value }) {
             top: `${DIAL_RADIUS - y - TICK_RADIUS - 1}rem`
         };
     }, []);
-    const label = useMemo(() => {
+    const tickValue = useMemo(() => {
         if (selectionIsHours) {
-            return formatTime(value);
-        }
-        if (value === 12) {
-            return formatTime(0);
+            return value;
         }
-        return formatTime(value * 5);
+        return value === CLOCK_HOURS ? 0 : value * 5;
     }, [selectionIsHours]);
-    const onClick = useCallback((event) => {
-        event.preventDefault();
-        onValue(value);
-    }, [onValue]);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, onClick: onClick, children: label }));
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__tick", style: styleTick, "data-value": tickValue, children: formatTime(tickValue) }));
 }
 function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
     const timeInitial = useMemo(() => {
@@ -3921,22 +3923,6 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
         }
         changeIsInternal.current = false;
     }, [formControl?.value]);
-    const refreshComponent = useCallback((clientX, clientY) => {
-        const rectangle = plateElement.current.getBoundingClientRect();
-        const centerX = rectangle.left + rectangle.width / 2;
-        const centerY = rectangle.top + rectangle.height / 2;
-        const positionX = clientX - centerX;
-        const positionY = clientY - centerY;
-        const angle = Math.atan2(-positionX, positionY) + Math.PI;
-        const value = Math.round(angle / radianUnit);
-        refreshClock(value);
-        if (selectionIsHours) {
-            setHour(value === 0 ? 12 : value);
-        }
-        else {
-            setMinute(value);
-        }
-    }, [selectionIsHours, radianUnit]);
     const refreshClock = useCallback((value) => {
         const angle = value * radianUnit;
         const x2 = Math.sin(angle) * (RADIUS - TICK_RADIUS);
@@ -3952,6 +3938,27 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
         pointElement.current.style.visibility =
             selectionIsHours || value % 5 === 0 ? 'hidden' : 'visible';
     }, [selectionIsHours, radianUnit]);
+    const selectValue = useCallback((value) => {
+        refreshClock(value);
+        if (selectionIsHours) {
+            setHour(value === 0 ? CLOCK_HOURS : value);
+        }
+        else {
+            setMinute(value);
+        }
+    }, [selectionIsHours, refreshClock]);
+    const selectFromPosition = useCallback((clientX, clientY) => {
+        const rectangle = plateElement.current.getBoundingClientRect();
+        const centerX = rectangle.left + rectangle.width / 2;
+        const centerY = rectangle.top + rectangle.height / 2;
+        const positionX = clientX - centerX;
+        const positionY = clientY - centerY;
+        // Angle in [0, 2π) measured clockwise from 12 o'clock
+        const angle = Math.atan2(-positionX, positionY) + Math.PI;
+        const steps = selectionIsHours ? CLOCK_HOURS : CLOCK_MINUTES;
+        // Modulo keeps the last half step before 12 o'clock as 0, not as 60/12
+        selectValue(Math.round(angle / radianUnit) % steps);
+    }, [selectionIsHours, radianUnit, selectValue]);
     const onClickHour = useCallback(() => {
         setSelectionIsHours(true);
     }, []);
@@ -3964,49 +3971,56 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
     const onClickPM = useCallback(() => {
         setZoneIsPM(true);
     }, []);
-    const onActiveSelection = useCallback(() => {
+    const onPointerDown = useCallback((event) => {
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
         selectionIsActive.current = true;
-    }, []);
-    const onMouseSelection = useCallback((event) => {
+        const tick = event.target.closest('.rls-picker-clock__tick');
+        // Pressing inside a label circle snaps to its exact value,
+        // anywhere else (and while dragging) the angle decides
+        if (tick?.dataset.value && pointerIsInsideTick(event, tick)) {
+            selectValue(Number(tick.dataset.value));
+        }
+        else {
+            selectFromPosition(event.clientX, event.clientY);
+        }
+    }, [selectValue, selectFromPosition]);
+    const onPointerMove = useCallback((event) => {
         if (selectionIsActive.current) {
-            event.preventDefault();
-            refreshComponent(event.clientX, event.clientY);
+            selectFromPosition(event.clientX, event.clientY);
         }
-    }, [refreshComponent]);
-    const onTouchSelection = useCallback((event) => {
-        const touch = event.touches.item(0);
-        if (selectionIsActive.current && touch) {
-            refreshComponent(touch.clientX, touch.clientY);
+    }, [selectFromPosition]);
+    const onPointerUp = useCallback(() => {
+        if (!selectionIsActive.current) {
+            return;
         }
-    }, [refreshComponent]);
-    const onInactiveSelection = useCallback(() => {
         selectionIsActive.current = false;
-    }, []);
-    const onClickValue = useCallback((value) => {
+        // Once the hour is chosen, continue with the minutes
         if (selectionIsHours) {
-            setHour(value);
-            refreshClock(value);
-        }
-        else {
-            const minute = value === 12 ? 0 : value * 5;
-            setMinute(minute);
-            refreshClock(minute);
+            setSelectionIsHours(false);
         }
     }, [selectionIsHours]);
+    const onPointerCancel = useCallback(() => {
+        selectionIsActive.current = false;
+    }, []);
     const onCancel = useCallback(() => {
         onListener?.({ event: PickerListenerEvent.Cancel });
     }, [onListener]);
     const onCurrentTime = useCallback(() => {
         const currentTime = Time.now();
+        const zoneIsPM = currentTime.hour >= 12;
+        const hour = zoneIsPM ? currentTime.hour - 12 : currentTime.hour;
         changeIsInternal.current = true;
         formControl?.setValue(currentTime);
-        setHour(currentTime.hour);
+        setZoneIsPM(zoneIsPM);
+        setHour(hour);
         setMinute(currentTime.minute);
+        refreshClock(selectionIsHours ? hour : currentTime.minute);
         onListener?.({
             event: PickerListenerEvent.Select,
             value: currentTime
         });
-    }, [formControl, onListener]);
+    }, [formControl, onListener, selectionIsHours, refreshClock]);
     const onSelect = useCallback(() => {
         const hourValue = zoneIsPM
             ? hour !== 12
@@ -4023,10 +4037,10 @@ function RlsPickerClockComponent({ formControl, onListener, rlsTheme, time }) {
             value: timeValue
         });
     }, [formControl, hour, minute, zoneIsPM, onListener]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onMouseDown: onActiveSelection, onMouseMove: onMouseSelection, onMouseUp: onInactiveSelection, onMouseLeave: onInactiveSelection, onTouchStart: onActiveSelection, onTouchMove: onTouchSelection, onTouchEnd: onInactiveSelection, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__header", children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__title", children: [jsxRuntimeExports.jsx("span", { className: classNameHour, onClick: onClickHour, children: hourFormat }), jsxRuntimeExports.jsx("span", { className: "rls-picker-clock__title__separator", children: ":" }), jsxRuntimeExports.jsx("span", { className: classNameMinute, onClick: onClickMinute, children: minuteFormat })] }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__zone", children: [jsxRuntimeExports.jsx("span", { className: classNameAM, onClick: onClickAM, children: "AM" }), jsxRuntimeExports.jsx("span", { className: classNamePM, onClick: onClickPM, children: "PM" })] })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__body", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__plate", ref: plateElement, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__canvas", children: jsxRuntimeExports.jsx("svg", { width: "120rem", height: "120rem", children: jsxRuntimeExports.jsxs("g", { style: {
                                         transform: `translate(${DIAL_RADIUS}rem, ${DIAL_RADIUS}rem)`
                                     }, children: [jsxRuntimeExports.jsx("line", { ref: lineElement, className: "rls-picker-clock__canvas__line", x1: "-1", y1: "-1" }), jsxRuntimeExports.jsx("circle", { ref: centerElement, className: "rls-picker-clock__canvas__center", r: "4", cx: "-1", cy: "-1" }), jsxRuntimeExports.jsx("circle", { ref: indicatorElement, className: "rls-picker-clock__canvas__indicator", r: `${TICK_RADIUS}rem` }), jsxRuntimeExports.jsx("circle", { ref: pointElement, className: "rls-picker-clock__canvas__point", r: "3.5" })] }) }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__hours", children: CLOCK_VALUES.map((value) => {
-                                return (jsxRuntimeExports.jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours, onValue: onClickValue }, value));
+                                return (jsxRuntimeExports.jsx(RlsPickerClockTick, { value: value, selectionIsHours: selectionIsHours }, value));
                             }) })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-picker-clock__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", onClick: onCancel, children: labels.timeActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--today", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "timer", onClick: onCurrentTime }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-clock__footer--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.timeActionSelect }) })] })] }));
 }
 const RlsPickerClock = memo(RlsPickerClockComponent);
@@ -4840,10 +4854,6 @@ function calculateImgDimension(image, dimension) {
 }
 function RlsImageEditorComponent(props) {
     const [selection, setSelection] = useState(props.selection ?? 60);
-    const [labels, setLabels] = useState({
-        actionRestore: reactI18n('editorImageActionRestore'),
-        actionSelect: reactI18n('editorImageActionSelect')
-    });
     const refBody = useRef(null);
     const refImage = useRef(null);
     const refSelection = useRef(null);
@@ -4968,16 +4978,9 @@ function RlsImageEditorComponent(props) {
             refreshImageStyle();
             refreshSelectionStyle(selection);
         };
-        const unsubscription = i18nSubscribe(() => {
-            setLabels({
-                actionRestore: reactI18n('editorImageActionRestore'),
-                actionSelect: reactI18n('editorImageActionSelect')
-            });
-        });
         window.addEventListener('resize', refreshImageStyle);
         return () => {
             window.removeEventListener('resize', refreshImageStyle);
-            unsubscription();
         };
     }, []);
     useEffect(() => {
@@ -5040,7 +5043,7 @@ function RlsImageEditorComponent(props) {
             context?.putImageData(originalImage.current, 0, 0);
         }
     }, []);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "standard", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", rlsTheme: "primary", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "crop", value: selection, minValue: MIN_SLIDER_VALUE, maxValue: MAX_SLIDER_VALUE, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "standard", onClick: onRestore, disabled: props.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "refresh" }) }), jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "success", onClick: onCropImage, disabled: props.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "checkmark-circle-out" }) })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
 }
 const RlsImageEditor = memo(RlsImageEditorComponent);
 
@@ -5098,7 +5101,7 @@ function useImageEditorController(options) {
         setSrcEditor(undefined);
     }, []);
     const RlsImageEditorChooser = useMemo(() => {
-        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { visible: true, src: srcEditor, formControl: options.formControl, maxWidth: options.maxWidth, quality: options.quality, ratio: options.ratio, selection: options.selection, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: options.disabled, children: labels.actionCancel }) })));
+        return (srcEditor && (jsxRuntimeExports.jsx(RlsImageEditorModal, { visible: true, src: srcEditor, formControl: options.formControl, maxWidth: options.maxWidth, quality: options.quality, ratio: options.ratio, selection: options.selection, onValue: onEditorValue, children: jsxRuntimeExports.jsx("button", { className: "rls-image-editor__action", "rls-theme": "danger", onClick: onCancel, disabled: options.disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: "close" }) }) })));
     }, [
         srcEditor,
         labels,