import { useCallback , useRef } from 'react' ; import { off , on } from './misc/util' ; interface Options { isPreventDefault ? : boolean ; delay ? : number ; } const isTouchEvent = ( ev ) : ev is TouchEvent => { return 'touches' in ev ; } ; const preventDefault = ( ev ) => { if ( ! isTouchEvent ( ev ) ) return ; if ( ev . touches . length < 2 && ev . preventDefault ) { ev . preventDefault ( ) ; } } ; const useLongPress = ( callback , { isPreventDefault = true , delay = 300 } = { } ) => { const timeout = useRef < ReturnType < typeof setTimeout > > ( ) ; const target = useRef < EventTarget > ( ) ; const start = useCallback ( ( event ) => { if ( isPreventDefault && event . target ) { on ( event . target , 'touchend' , preventDefault , { passive : false } ) ; target . current = event . target ; } timeout . current = setTimeout ( ( ) => callback ( event ) , delay ) ; } , [ callback , delay , isPreventDefault ] ) ; const clear = useCallback ( ( ) => { timeout . current && clearTimeout ( timeout . current ) ; if ( isPreventDefault && target . current ) { off ( target . current , 'touchend' , preventDefault ) ; } } , [ isPreventDefault ] ) ; return { onMouseDown : ( e ) => start ( e ) , onTouchStart : ( e ) => start ( e ) , onMouseUp : clear , onMouseLeave : clear , onTouchEnd : clear , } as const ; } ; export default useLongPress ;