Bläddra i källkod

Fix keyboard navigation issue (#1567)

Fix keyboard navigation issue
Abhinav Kumar 1 år sedan
förälder
incheckning
022a387460
1 ändrade filer med 25 tillägg och 0 borttagningar
  1. 25 0
      apps/photos/src/components/PhotoViewer/index.tsx

+ 25 - 0
apps/photos/src/components/PhotoViewer/index.tsx

@@ -192,6 +192,12 @@ function PhotoViewer(props: Iprops) {
                 case 'L':
                     onFavClick(photoSwipe?.currItem as EnteFile);
                     break;
+                case 'ArrowLeft':
+                    handleArrowClick(event, 'left');
+                    break;
+                case 'ArrowRight':
+                    handleArrowClick(event, 'right');
+                    break;
                 default:
                     break;
             }
@@ -352,6 +358,7 @@ function PhotoViewer(props: Iprops) {
             maxSpreadZoom: 5,
             index: currentIndex,
             showHideOpacity: true,
+            arrowKeys: false,
             getDoubleTapZoom(isMouseClick, item) {
                 if (isMouseClick) {
                     return 2.5;
@@ -505,6 +512,24 @@ function PhotoViewer(props: Iprops) {
         appContext.setDialogMessage(getTrashFileMessage(() => trashFile(file)));
     };
 
+    const handleArrowClick = (
+        e: KeyboardEvent,
+        direction: 'left' | 'right'
+    ) => {
+        // ignore arrow clicks if the user is typing in a text field
+        if (
+            e.target instanceof HTMLInputElement ||
+            e.target instanceof HTMLTextAreaElement
+        ) {
+            return;
+        }
+        if (direction === 'left') {
+            photoSwipe.prev();
+        } else {
+            photoSwipe.next();
+        }
+    };
+
     const updateItems = (items: EnteFile[]) => {
         try {
             if (photoSwipe) {