zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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
zio/stable
Ben Harris 2023-05-30 19:45:49 -04:00 committed by GitHub
parent 442d453600
commit ca34364cf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/view/com/lightbox/Lightbox.web.tsx
View File

@ -65,30 +65,34 @@ function LightboxInner({
const canGoLeft = index >= 1
const canGoRight = index < imgs.length - 1
const onPressLeft = () => {
const onPressLeft = useCallback(() => {
if (canGoLeft) {
setIndex(index - 1)
}
}
const onPressRight = () => {
}, [index, canGoLeft])
const onPressRight = useCallback(() => {
if (canGoRight) {
setIndex(index + 1)
}
}
}, [index, canGoRight])
const onEscape = useCallback(
const onKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose()
} else if (e.key === 'ArrowLeft') {
onPressLeft()
} else if (e.key === 'ArrowRight') {
onPressRight()
}
},
[onClose],
[onClose, onPressLeft, onPressRight],
)
useEffect(() => {
window.addEventListener('keydown', onEscape)
return () => window.removeEventListener('keydown', onEscape)
}, [onEscape])
window.addEventListener('keydown', onKeyDown)
return () => window.removeEventListener('keydown', onKeyDown)
}, [onKeyDown])
return (
<View style={styles.mask}>