forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Support arrow key navigation for Lightbox.web.tsx (#761)
* Support arrow key navigation for Lightbox.web.tsx
renames onEscape to onKeyDown
* appease eslint
* appease eslint again
* wrap onPressLeft and onPressRight in useCallback
authored by
Ben Harris
and committed by
GitHub
ca34364c
442d4536
+13
-9
+13
-9
src/view/com/lightbox/Lightbox.web.tsx
+13
-9
src/view/com/lightbox/Lightbox.web.tsx
···
65
65
66
66
const canGoLeft = index >= 1
67
67
const canGoRight = index < imgs.length - 1
68
-
const onPressLeft = () => {
68
+
const onPressLeft = useCallback(() => {
69
69
if (canGoLeft) {
70
70
setIndex(index - 1)
71
71
}
72
-
}
73
-
const onPressRight = () => {
72
+
}, [index, canGoLeft])
73
+
const onPressRight = useCallback(() => {
74
74
if (canGoRight) {
75
75
setIndex(index + 1)
76
76
}
77
-
}
77
+
}, [index, canGoRight])
78
78
79
-
const onEscape = useCallback(
79
+
const onKeyDown = useCallback(
80
80
(e: KeyboardEvent) => {
81
81
if (e.key === 'Escape') {
82
82
onClose()
83
+
} else if (e.key === 'ArrowLeft') {
84
+
onPressLeft()
85
+
} else if (e.key === 'ArrowRight') {
86
+
onPressRight()
83
87
}
84
88
},
85
-
[onClose],
89
+
[onClose, onPressLeft, onPressRight],
86
90
)
87
91
88
92
useEffect(() => {
89
-
window.addEventListener('keydown', onEscape)
90
-
return () => window.removeEventListener('keydown', onEscape)
91
-
}, [onEscape])
93
+
window.addEventListener('keydown', onKeyDown)
94
+
return () => window.removeEventListener('keydown', onKeyDown)
95
+
}, [onKeyDown])
92
96
93
97
return (
94
98
<View style={styles.mask}>