File size: 1,651 Bytes
064bfd6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | // Creates a function that calls one function on the first call and another
// function on the second call within a certain timeout
import { useCallback, useEffect, useRef } from 'react'
export const DOUBLE_PRESS_TIMEOUT_MS = 800
export function useDoublePress(
setPending: (pending: boolean) => void,
onDoublePress: () => void,
onFirstPress?: () => void,
): () => void {
const lastPressRef = useRef<number>(0)
const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
const clearTimeoutSafe = useCallback(() => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current)
timeoutRef.current = undefined
}
}, [])
// Cleanup timeout on unmount
useEffect(() => {
return () => {
clearTimeoutSafe()
}
}, [clearTimeoutSafe])
return useCallback(() => {
const now = Date.now()
const timeSinceLastPress = now - lastPressRef.current
const isDoublePress =
timeSinceLastPress <= DOUBLE_PRESS_TIMEOUT_MS &&
timeoutRef.current !== undefined
if (isDoublePress) {
// Double press detected
clearTimeoutSafe()
setPending(false)
onDoublePress()
} else {
// First press
onFirstPress?.()
setPending(true)
// Clear any existing timeout and set new one
clearTimeoutSafe()
timeoutRef.current = setTimeout(
(setPending, timeoutRef) => {
setPending(false)
timeoutRef.current = undefined
},
DOUBLE_PRESS_TIMEOUT_MS,
setPending,
timeoutRef,
)
}
lastPressRef.current = now
}, [setPending, onDoublePress, onFirstPress, clearTimeoutSafe])
}
|