52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import { useCallback, useEffect, useRef } from '../lib/teact/teact';
|
|
|
|
const DEFAULT_THRESHOLD = 250;
|
|
|
|
function useLongPress(
|
|
onStart: NoneToVoidFunction,
|
|
onEnd: NoneToVoidFunction,
|
|
) {
|
|
const isLongPressActive = useRef(false);
|
|
const isPressed = useRef(false);
|
|
const timerId = useRef<number | undefined>(undefined);
|
|
|
|
const start = useCallback((e: React.MouseEvent | React.TouchEvent) => {
|
|
const canProcessEvent = ('button' in e && e.button === 0) || ('touches' in e && e.touches.length > 0);
|
|
if (isPressed.current || !canProcessEvent) {
|
|
return;
|
|
}
|
|
|
|
isPressed.current = true;
|
|
timerId.current = window.setTimeout(() => {
|
|
onStart();
|
|
isLongPressActive.current = true;
|
|
}, DEFAULT_THRESHOLD);
|
|
}, [onStart]);
|
|
|
|
const cancel = useCallback(() => {
|
|
if (isLongPressActive.current) {
|
|
onEnd();
|
|
}
|
|
|
|
isLongPressActive.current = false;
|
|
isPressed.current = false;
|
|
window.clearTimeout(timerId.current);
|
|
}, [onEnd]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
window.clearTimeout(timerId.current);
|
|
};
|
|
}, []);
|
|
|
|
return {
|
|
onMouseDown: start,
|
|
onMouseUp: cancel,
|
|
onMouseLeave: cancel,
|
|
onTouchStart: start,
|
|
onTouchEnd: cancel,
|
|
};
|
|
}
|
|
|
|
export default useLongPress;
|