Nelson Pires
baad4b6097
* feat: enable search panel in CodeMirrorEditor Add enableSearch and searchOpen props to toggle search UI Wire CodeMirror search extension and keybindings into the editor Automatically open or close the search panel based on searchOpen * feat(files): add breadcrumb navigation and inline comments Add breadcrumb trail derived from file path and root to navigate directories Introduce inline comment UI with draft storage for per-file discussions Enable long-press gestures on items to reveal quick actions * feat: add useLongPress hook for long-press gestures Provide a reusable long-press hook with onLongPress and onTap callbacks. Support pointer and touch events with movement threshold to cancel. Optionally vibrate on long press for haptic feedback. * feat: add expandedPaths state and expand actions for file tabs Introduce expandedPaths per root to remember expanded folders Add actions to toggle, expand a path, and expand multiple paths Initialize expandedPaths for new roots and clamp state to valid roots * feat: add onSearchOpenChange prop to CodeMirrorEditor Expose onSearchOpenChange callback prop for search state Notify parent when search panel visibility toggles
101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import { useRef, useCallback, useEffect } from 'react';
|
|
|
|
type LongPressOptions = {
|
|
delay?: number;
|
|
onLongPress: () => void;
|
|
onTap?: () => void;
|
|
enableHaptic?: boolean;
|
|
};
|
|
|
|
export function useLongPress({
|
|
delay = 500,
|
|
onLongPress,
|
|
onTap,
|
|
enableHaptic = true,
|
|
}: LongPressOptions) {
|
|
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const isLongPressRef = useRef(false);
|
|
const startPosRef = useRef<{ x: number; y: number } | null>(null);
|
|
|
|
const clear = useCallback(() => {
|
|
if (timerRef.current) {
|
|
clearTimeout(timerRef.current);
|
|
timerRef.current = null;
|
|
}
|
|
startPosRef.current = null;
|
|
}, []);
|
|
|
|
const onPointerDown = useCallback((e: React.PointerEvent | React.TouchEvent) => {
|
|
isLongPressRef.current = false;
|
|
|
|
// Store start position to detect movement
|
|
const clientX = 'touches' in e ? e.touches[0].clientX : (e as React.PointerEvent).clientX;
|
|
const clientY = 'touches' in e ? e.touches[0].clientY : (e as React.PointerEvent).clientY;
|
|
startPosRef.current = { x: clientX, y: clientY };
|
|
|
|
timerRef.current = setTimeout(() => {
|
|
isLongPressRef.current = true;
|
|
if (enableHaptic && typeof navigator !== 'undefined' && navigator.vibrate) {
|
|
try {
|
|
navigator.vibrate(15);
|
|
} catch {
|
|
// Ignore vibration errors
|
|
}
|
|
}
|
|
onLongPress();
|
|
}, delay);
|
|
}, [delay, onLongPress, enableHaptic]);
|
|
|
|
const onPointerMove = useCallback((e: React.PointerEvent | React.TouchEvent) => {
|
|
if (!startPosRef.current || !timerRef.current) return;
|
|
|
|
const clientX = 'touches' in e ? e.touches[0].clientX : (e as React.PointerEvent).clientX;
|
|
const clientY = 'touches' in e ? e.touches[0].clientY : (e as React.PointerEvent).clientY;
|
|
|
|
// If moved more than 10px, cancel long press
|
|
const dx = Math.abs(clientX - startPosRef.current.x);
|
|
const dy = Math.abs(clientY - startPosRef.current.y);
|
|
|
|
if (dx > 10 || dy > 10) {
|
|
clear();
|
|
}
|
|
}, [clear]);
|
|
|
|
const onPointerUp = useCallback(() => {
|
|
if (timerRef.current) {
|
|
clearTimeout(timerRef.current);
|
|
timerRef.current = null;
|
|
if (!isLongPressRef.current && onTap) {
|
|
// Only trigger tap if we didn't drag too far (checked in move)
|
|
// and didn't trigger long press
|
|
onTap();
|
|
}
|
|
}
|
|
clear();
|
|
}, [clear, onTap]);
|
|
|
|
const onPointerLeave = useCallback(() => {
|
|
clear();
|
|
}, [clear]);
|
|
|
|
const onContextMenu = useCallback((e: React.MouseEvent) => {
|
|
// Prevent default context menu on long press
|
|
if (isLongPressRef.current) {
|
|
e.preventDefault();
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => clear, [clear]);
|
|
|
|
return {
|
|
onPointerDown,
|
|
onPointerMove,
|
|
onPointerUp,
|
|
onPointerLeave,
|
|
onTouchStart: onPointerDown, // Add touch handlers for better mobile support
|
|
onTouchMove: onPointerMove,
|
|
onTouchEnd: onPointerUp,
|
|
onContextMenu,
|
|
};
|
|
}
|