usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-12-16 21:59:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat: navigate image view with keyboard keys (#4116)

Browse source 
* Navigate images with keyboard left and right keys

* Fix linting

* Adding missing "

* Added change to incorrect branch
This commit is contained in:
RoccoSmit 2024-11-11 11:16:09 +11:00 • committed by GitHub
parent bcd8856732
commit 142e97ab5a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/components/PreviewImageDialog.tsx
View file

@ -94,6 +94,14 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
} }
}; };
const handleImageContainerKeyDown = (event: KeyboardEvent) => {
if (event.key == "ArrowLeft") {
showPrevImg();
} else if (event.key == "ArrowRight") {
showNextImg();
}
};
const handleImgContainerScroll = (event: React.WheelEvent) => { const handleImgContainerScroll = (event: React.WheelEvent) => {
const offsetX = event.nativeEvent.offsetX; const offsetX = event.nativeEvent.offsetX;
const offsetY = event.nativeEvent.offsetY; const offsetY = event.nativeEvent.offsetY;
@ -137,6 +145,13 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
setViewportScalable(); setViewportScalable();
}, []); }, []);
useEffect(() => {
document.addEventListener("keydown", handleImageContainerKeyDown);
return () => {
document.removeEventListener("keydown", handleImageContainerKeyDown);
};
}, [currentIndex]);
return ( return (
<> <>
<div className="btns-container"> <div className="btns-container">