a tool for shared writing and social publishing
only use onPointer events in long press hook
Using touch + mouse was resulting in the timeout set twice and only
cancelled once, we don't need to listen for both events!
+6
-16
+6
-16
src/hooks/useLongPress.ts
+6
-16
src/hooks/useLongPress.ts
···
7
7
) => {
8
8
let longPressTimer = useRef<number>();
9
9
let isLongPress = useRef(false);
10
-
// Change isDown to store the starting position
11
10
let [startPosition, setStartPosition] = useState<{
12
11
x: number;
13
12
y: number;
14
13
} | null>(null);
15
14
16
-
let onMouseDown = useCallback(
15
+
let onPointerDown = useCallback(
17
16
(e: React.MouseEvent) => {
18
-
propsOnMouseDown && propsOnMouseDown(e);
17
+
propsOnMouseDown?.(e);
19
18
if (e.button === 2) {
20
19
return;
21
20
}
···
30
29
[propsOnMouseDown, cb],
31
30
);
32
31
33
-
let onTouchStart = useCallback(() => {
34
-
isLongPress.current = false;
35
-
longPressTimer.current = window.setTimeout(() => {
36
-
isLongPress.current = true;
37
-
cb();
38
-
}, 500);
39
-
}, [cb]);
40
-
41
32
let end = useCallback(() => {
42
33
// Clear the starting position
43
34
setStartPosition(null);
44
35
window.clearTimeout(longPressTimer.current);
45
36
longPressTimer.current = undefined;
46
37
}, []);
38
+
47
39
useEffect(() => {
48
40
if (startPosition) {
49
41
let listener = (e: MouseEvent) => {
···
79
71
() => ({
80
72
isLongPress: isLongPress,
81
73
handlers: {
82
-
onMouseDown,
83
-
onMouseUp: end,
84
-
onTouchStart: onTouchStart,
85
-
onTouchEnd: end,
74
+
onPointerDown,
75
+
onPointerUp: end,
86
76
onClickCapture: click,
87
77
},
88
78
}),
89
-
[isLongPress, end, onMouseDown, onTouchStart, click],
79
+
[isLongPress, end, onPointerDown, click],
90
80
);
91
81
};