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

Support arrow key navigation for Lightbox.web.tsx (#761)

Browse source 
* Support arrow key navigation for Lightbox.web.tsx

renames onEscape to onKeyDown

* appease eslint

* appease eslint again

* wrap onPressLeft and onPressRight in useCallback
This commit is contained in:
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
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 canGoLeft = index >= 1
const canGoRight = index < imgs.length - 1 const canGoRight = index < imgs.length - 1
const onPressLeft = () => { const onPressLeft = useCallback(() => {
if (canGoLeft) { if (canGoLeft) {
setIndex(index - 1) setIndex(index - 1)
} }
} }, [index, canGoLeft])
const onPressRight = () => { const onPressRight = useCallback(() => {
if (canGoRight) { if (canGoRight) {
setIndex(index + 1) setIndex(index + 1)
} }
} }, [index, canGoRight])
const onEscape = useCallback( const onKeyDown = useCallback(
(e: KeyboardEvent) => { (e: KeyboardEvent) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
onClose() onClose()
} else if (e.key === 'ArrowLeft') {
onPressLeft()
} else if (e.key === 'ArrowRight') {
onPressRight()
} }
}, },
[onClose], [onClose, onPressLeft, onPressRight],
) )
useEffect(() => { useEffect(() => {
window.addEventListener('keydown', onEscape) window.addEventListener('keydown', onKeyDown)
return () => window.removeEventListener('keydown', onEscape) return () => window.removeEventListener('keydown', onKeyDown)
}, [onEscape]) }, [onKeyDown])
return ( return (
<View style={styles.mask}> <View style={styles.mask}>