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

1 files changed, 13 insertions, 9 deletions

diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index d389279b1..61446519d 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/src/view/com/lightbox/Lightbox.web.tsx
@@ -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}>