@a-type/ui 0.6.8 → 0.6.9

package/src/hooks/useAnimationFrame.ts

@@ -0,0 +1,23 @@
+import { useStableCallback } from './useStableCallback.js';
+import { useEffect, useRef } from 'react';
+
+export function useAnimationFrame<Context>(
+	callback: (deltaTime: number, context: Context) => void,
+	initialContext?: Context,
+) {
+	const requestRef = useRef<number>();
+	const previousTimeRef = useRef<number>();
+	const contextRef = useRef<Context>(initialContext!);
+	const animate = useStableCallback((time: number) => {
+		if (previousTimeRef.current !== undefined) {
+			const deltaTime = time - previousTimeRef.current;
+			callback(deltaTime, contextRef.current);
+		}
+		previousTimeRef.current = time;
+		requestRef.current = requestAnimationFrame(animate);
+	});
+	useEffect(() => {
+		requestRef.current = requestAnimationFrame(animate);
+		return () => cancelAnimationFrame(requestRef.current!);
+	}, [animate]);
+}

package/src/hooks/useLongPress.ts

@@ -0,0 +1,135 @@
+import { useDrag } from '@use-gesture/react';
+import { useEffect, useRef, useState } from 'react';
+import { useAnimationFrame } from './useAnimationFrame.js';
+
+/**
+ * The press gesture must remain within THRESHOLD_DISTANCE until delay time has passed
+ * to be considered a press.
+ *
+ * After delay, the gesture must remain within CANCEL_DISTANCE or be cancelled.
+ */
+
+const THRESHOLD_DISTANCE = 10;
+const CANCEL_DISTANCE = 30;
+
+export function useLongPress({
+	onActivate,
+	duration = 2000,
+	delay = 200,
+}: {
+	onActivate: () => void;
+	duration?: number;
+	delay?: number;
+}) {
+	const [gestureState, setGestureState] = useState<'released' | 'pressed'>(
+		'released',
+	);
+	const [state, setState] = useState<'holding' | 'idle' | 'failed' | 'pending'>(
+		'idle',
+	);
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+	const ref = useRef<any>(null);
+
+	const gestureStateRef = useRef<{ distance: number; startedAt: number }>({
+		distance: 0,
+		startedAt: 0,
+	});
+	useDrag(
+		({ first, cancel, elapsedTime, down, distance }) => {
+			const totalDistance = Math.sqrt(
+				Math.pow(distance[0], 2) + Math.pow(distance[1], 2),
+			);
+			gestureStateRef.current.distance = totalDistance;
+
+			if (elapsedTime < delay && totalDistance > THRESHOLD_DISTANCE) {
+				cancel();
+				setGestureState('released');
+				return;
+			}
+
+			if (totalDistance > CANCEL_DISTANCE) {
+				cancel();
+				setGestureState('released');
+				return;
+			}
+
+			if (first) {
+				gestureStateRef.current.startedAt = Date.now();
+				try {
+					navigator?.vibrate?.(200);
+				} catch (err) {
+					console.log(err);
+				}
+			}
+
+			if (down) {
+				setGestureState('pressed');
+			} else {
+				setGestureState('released');
+			}
+		},
+		{
+			// triggerAllEvents: true,
+			// preventDefault: true,
+			target: ref,
+		},
+	);
+
+	useAnimationFrame(() => {
+		const gestureDuration = gestureStateRef.current.startedAt
+			? Date.now() - gestureStateRef.current.startedAt
+			: 0;
+		const distance = gestureStateRef.current.distance;
+
+		// nothing to do in this case
+		if (
+			gestureState === 'released' &&
+			(state === 'idle' || state === 'failed')
+		) {
+			return;
+		}
+
+		if (gestureState === 'released') {
+			if (state === 'holding') {
+				// holding for longer than duration - activate
+				if (gestureDuration >= duration + delay && distance < CANCEL_DISTANCE) {
+					onActivate();
+					setState('idle');
+				} else {
+					// normal release before duration - cancel
+					setState('idle');
+				}
+			} else if (state === 'pending' && distance < THRESHOLD_DISTANCE) {
+				setState('failed');
+			}
+		} else if (gestureState === 'pressed') {
+			// begin a new press
+			if (state === 'idle' || state === 'failed') {
+				setState('pending');
+			} else if (state === 'pending' && gestureDuration >= delay) {
+				// begin holding after delay has passed
+				setState('holding');
+			} else if (distance > CANCEL_DISTANCE) {
+				// cancel if moved too far
+				setState('idle');
+			}
+		}
+	});
+
+	useEffect(() => {
+		if (state === 'failed') {
+			const timeout = setTimeout(() => {
+				setState('idle');
+			}, 1000);
+			return () => {
+				clearTimeout(timeout);
+			};
+		}
+	}, [state]);
+
+	return {
+		ref,
+		timeoutRef,
+		state,
+	};
+}