From 142e97ab5aad57a602044608206bd7845a78faa4 Mon Sep 17 00:00:00 2001 From: RoccoSmit Date: Mon, 11 Nov 2024 11:16:09 +1100 Subject: [PATCH] feat: navigate image view with keyboard keys (#4116) * Navigate images with keyboard left and right keys * Fix linting * Adding missing " * Added change to incorrect branch --- web/src/components/PreviewImageDialog.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx index 1688400e4adf2..768ff19d0ff71 100644 --- a/web/src/components/PreviewImageDialog.tsx +++ b/web/src/components/PreviewImageDialog.tsx @@ -94,6 +94,14 @@ const PreviewImageDialog: React.FC = ({ destroy, imgUrls, initialIndex }: } }; + const handleImageContainerKeyDown = (event: KeyboardEvent) => { + if (event.key == "ArrowLeft") { + showPrevImg(); + } else if (event.key == "ArrowRight") { + showNextImg(); + } + }; + const handleImgContainerScroll = (event: React.WheelEvent) => { const offsetX = event.nativeEvent.offsetX; const offsetY = event.nativeEvent.offsetY; @@ -137,6 +145,13 @@ const PreviewImageDialog: React.FC = ({ destroy, imgUrls, initialIndex }: setViewportScalable(); }, []); + useEffect(() => { + document.addEventListener("keydown", handleImageContainerKeyDown); + return () => { + document.removeEventListener("keydown", handleImageContainerKeyDown); + }; + }, [currentIndex]); + return ( <>