@topconsultnpm/sdkui-react 6.20.0-dev1.7 → 6.20.0-dev1.70

package/lib/components/NewComponents/ContextMenu/useLongPress.js

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from 'react';
+import { useIsIOS } from './hooks';
+export function useLongPress({ containerRef, targetSelector, onLongPress, onTouchStart, duration = 500, moveThreshold = 10, hapticFeedback = true, enabled = true, }) {
+    const isIOS = useIsIOS();
+    const longPressTriggeredRef = useRef(false);
+    useEffect(() => {
+        if (!isIOS || !enabled || !containerRef.current)
+            return;
+        const container = containerRef.current;
+        let longPressTimeout = null;
+        let touchStartPos = null;
+        let longPressTarget = null;
+        const matchesSelector = (element) => {
+            const selectors = Array.isArray(targetSelector) ? targetSelector : [targetSelector];
+            for (const selector of selectors) {
+                const match = element.closest(selector);
+                if (match)
+                    return match;
+            }
+            return null;
+        };
+        const handleTouchStart = (e) => {
+            const touch = e.touches[0];
+            const target = touch.target;
+            // Check if target matches any of the specified selectors
+            const matchedElement = matchesSelector(target);
+            if (!matchedElement)
+                return;
+            touchStartPos = { x: touch.clientX, y: touch.clientY };
+            longPressTriggeredRef.current = false;
+            longPressTarget = target;
+            // Call optional onTouchStart callback
+            if (onTouchStart) {
+                onTouchStart({
+                    clientX: touch.clientX,
+                    clientY: touch.clientY,
+                    target,
+                    rowElement: matchedElement,
+                });
+            }
+            if (longPressTimeout)
+                clearTimeout(longPressTimeout);
+            longPressTimeout = setTimeout(() => {
+                longPressTriggeredRef.current = true;
+                // Haptic feedback
+                if (hapticFeedback && 'vibrate' in navigator) {
+                    navigator.vibrate(50);
+                }
+                // Call onLongPress callback
+                onLongPress({
+                    clientX: touch.clientX,
+                    clientY: touch.clientY,
+                    target: longPressTarget,
+                });
+                longPressTimeout = null;
+            }, duration);
+        };
+        const handleTouchMove = (e) => {
+            if (!touchStartPos || !longPressTimeout)
+                return;
+            const touch = e.touches[0];
+            const dx = Math.abs(touch.clientX - touchStartPos.x);
+            const dy = Math.abs(touch.clientY - touchStartPos.y);
+            // Cancel long-press if finger moved too much
+            if (dx > moveThreshold || dy > moveThreshold) {
+                clearTimeout(longPressTimeout);
+                longPressTimeout = null;
+            }
+        };
+        const handleTouchEnd = () => {
+            if (longPressTimeout) {
+                clearTimeout(longPressTimeout);
+                longPressTimeout = null;
+            }
+            touchStartPos = null;
+            longPressTarget = null;
+        };
+        // Prevent click after long-press to avoid unintended actions
+        const handleClick = (e) => {
+            if (longPressTriggeredRef.current) {
+                e.preventDefault();
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+                longPressTriggeredRef.current = false;
+            }
+        };
+        container.addEventListener('touchstart', handleTouchStart, { passive: true });
+        container.addEventListener('touchmove', handleTouchMove, { passive: true });
+        container.addEventListener('touchend', handleTouchEnd);
+        container.addEventListener('touchcancel', handleTouchEnd);
+        container.addEventListener('click', handleClick, { capture: true });
+        return () => {
+            if (longPressTimeout)
+                clearTimeout(longPressTimeout);
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('touchend', handleTouchEnd);
+            container.removeEventListener('touchcancel', handleTouchEnd);
+            container.removeEventListener('click', handleClick, { capture: true });
+        };
+    }, [isIOS, enabled, containerRef, targetSelector, onLongPress, onTouchStart, duration, moveThreshold, hapticFeedback]);
+}
+export function triggerContextMenuEvent(target, clientX, clientY) {
+    const contextMenuEvent = new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX,
+        clientY,
+        button: 2,
+    });
+    target.dispatchEvent(contextMenuEvent);
+}