Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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}>