add keyboard key event listeners

NationalLibraryOfNorway · Dec 16, 2024 · 8d1c0e5 · 8d1c0e5
1 parent 92202dc
commit 8d1c0e5
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 51 deletions.
diff --git a/eslint.config.js b/eslint.config.js
@@ -12,5 +12,9 @@ export default [
   ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
   { ignores: ['src-tauri/**/*', 'dist/**/*', 'node_modules/**/*'] },
-  { rules: { 'quotes': ['error', 'single', { 'avoidEscape': true }] } }
+  {
+    rules: {
+      'quotes': ['error', 'single', { 'avoidEscape': true }],
+      'react/react-in-jsx-scope': "off"
+    } }
 ];
diff --git a/src/features/detailed-image-view/detailed-image-view.tsx b/src/features/detailed-image-view/detailed-image-view.tsx
@@ -1,18 +1,38 @@
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
+import {convertFileSrc} from '@tauri-apps/api/core';
+import {FileTree} from '../../model/file-tree.ts';
 
 interface DetailedImageViewProps {
-    imageSrc?: string;
-    displayTitle: boolean;
     onClose: () => void;
+    images: FileTree[];
+    currentIndex: number;
+    setCurrentIndex: (index: number) => void;
 }
 
-export default function DetailedImageView({imageSrc, displayTitle, onClose}: DetailedImageViewProps) {
+export default function DetailedImageView({ onClose, images, currentIndex, setCurrentIndex }: DetailedImageViewProps) {
     const handleKeyPress = (event: KeyboardEvent) => {
         if (event.key === 'Escape') {
             onClose();
         }
+        if (event.key === 'ArrowLeft') {
+            handlePrevious();
+        }
+        if (event.key === 'ArrowRight') {
+            handleNext();
+        }
     }
 
+    const handlePrevious = () => {
+        const newIndex = (currentIndex - 1 + images.length) % images.length;
+        setCurrentIndex(newIndex);
+    };
+
+    const handleNext = () => {
+        const newIndex = (currentIndex + 1) % images.length;
+        setCurrentIndex(newIndex);
+    };
+
     useEffect(() => {
         document.addEventListener('keydown', handleKeyPress);
         return () => {
@@ -21,15 +41,26 @@ export default function DetailedImageView({imageSrc, displayTitle, onClose}: Det
     }, []);
 
     return (
-        <div className="relative bg-gray-200 bg-opacity-25 dark:bg-gray-700 dark:bg-opacity-25">
-            {displayTitle && <p className="text-xl text-center py-4">{imageSrc?.split('%2F').pop() ?? ''}</p>}
+        <div className="relative">
+            {/*{displayTitle && <p className="text-xl text-center pt-4">{imageSrc?.split('%2F').pop() ?? ''}</p>}*/}
+            <p className="text-center pt-4">Viser bilde {currentIndex + 1} av {images.length}</p>
+            <div className="flex justify-center mt-4">
+                <button onClick={handlePrevious} className="mx-2 px-4 py-2 bg-gray-800 text-white rounded">
+                    <ChevronLeft/>
+                </button>
+                <button onClick={handleNext} className="mx-2 px-4 py-2 bg-gray-800 text-white rounded">
+                    <ChevronRight/>
+                </button>
+            </div>
             <button
                 onClick={onClose}
-                className="absolute top-0 right-0 m-4 w-10 h-10 flex items-center justify-center rounded-full bg-gray-800 text-white"
+                className="absolute top-[100px] right-0 m-4 w-10 h-10 flex items-center justify-center rounded-full bg-gray-800 text-white"
             >
                 x
             </button>
-            <img src={imageSrc} alt="Image in full size" className="p-2.5 max-h-screen w-full object-contain" />
+            <img src={convertFileSrc(images[currentIndex].path)} alt="Image in full size"
+                 className="p-2.5 max-h-screen w-full object-contain"/>
+
         </div>
     );
 }
diff --git a/src/features/files-container/files-container.tsx b/src/features/files-container/files-container.tsx
@@ -1,60 +1,66 @@
-import React, {useEffect} from 'react';
-import {convertFileSrc} from '@tauri-apps/api/core';
-import {Folder} from 'lucide-react';
-import {useTrokkFiles} from '../../context/trokk-files-context.tsx';
+import React, { useEffect, useState } from 'react';
+import { convertFileSrc } from '@tauri-apps/api/core';
+import { Folder } from 'lucide-react';
+import { useTrokkFiles } from '../../context/trokk-files-context.tsx';
 import DetailedImageView from '../detailed-image-view/detailed-image-view.tsx';
 import Thumbnail from '../thumbnail/thumbnail.tsx';
 
 const FilesContainer: React.FC = () => {
     const { state, dispatch } = useTrokkFiles();
-    const [selectedImgSrc, setselectedImgSrc] = React.useState<string | undefined>(undefined);
+    const [selectedImgSrc, setSelectedImgSrc] = useState<string | undefined>(undefined);
+    const [currentIndex, setCurrentIndex] = useState<number>(0);
 
     useEffect(() => {
-        setselectedImgSrc(undefined);
+        setSelectedImgSrc(undefined);
     }, [state.current]);
 
+    const files = state.current?.children?.filter(child => !child.isDirectory) || [];
+
     return (
         <div className="flex flex-wrap overflow-y-auto h-[calc(96%)] justify-start content-start ml-4">
-
             {state.current && state.current.children ? (
                 <>
-                    {
-                        selectedImgSrc && (
+                    {selectedImgSrc && (
+                        <div className="bg-gray-200 bg-opacity-25 dark:bg-gray-700 dark:bg-opacity-25">
                             <DetailedImageView
-                                imageSrc={selectedImgSrc}
-                                displayTitle={true}
-                                onClose={() => setselectedImgSrc(undefined)}
+                                onClose={() => setSelectedImgSrc(undefined)}
+                                images={files}
+                                currentIndex={currentIndex}
+                                setCurrentIndex={setCurrentIndex}
                             />
-                        )
-                    }
-                    {
-                        state.current.children.length !== 0 ? (
-                            state.current.children.map((child) => (
-                                !child.name.startsWith('.thumbnails') && child.isDirectory ? (
-                                    <button
-                                        key={child.path}
-                                        className="max-w-[150px]"
-                                        onClick={() => dispatch({ type: 'SET_CURRENT_AND_EXPAND_PARENTS', payload: child })}
-                                    >
-                                        <Folder size="96" />
-                                        <i>{child.name}</i>
-                                    </button>
-                                ) : (
-                                    <Thumbnail
-                                        key={child.name}
-                                        onClick={() => setselectedImgSrc(convertFileSrc(child.path))}
-                                        fileTree={child}
-                                    />
-                                )
-                            ))
-                        ) : (
-                            <p className="m-8 font-bold break-words">
-                                Ingen filer i mappen.
-                            </p>
-                        )
-                    }
+                        </div>
+                    )}
+                    {state.current.children.length !== 0 ? (
+                        state.current.children.map((child) => (
+                            !child.name.startsWith('.thumbnails') && child.isDirectory ? (
+                                <button
+                                    key={child.path}
+                                    className="max-w-[150px]"
+                                    onClick={() => dispatch({
+                                        type: 'SET_CURRENT_AND_EXPAND_PARENTS',
+                                        payload: child
+                                    })}
+                                >
+                                    <Folder size="96" />
+                                    <i>{child.name}</i>
+                                </button>
+                            ) : (
+                                <Thumbnail
+                                    key={child.name}
+                                    onClick={() => {
+                                        setSelectedImgSrc(convertFileSrc(child.path));
+                                        setCurrentIndex(files.indexOf(child));
+                                    }}
+                                    fileTree={child}
+                                />
+                            )
+                        ))
+                    ) : (
+                        <p className="m-8 font-bold break-words">
+                            Ingen filer i mappen.
+                        </p>
+                    )}
                 </>
-
             ) : (
                 <p className="m-8 font-bold break-words">
                     Velg en mappe i listen til venstre. <br />

diff --git a/src/features/thumbnail/thumbnail.tsx b/src/features/thumbnail/thumbnail.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {formatFileNames} from '../../util/file-utils.ts';
 import {FileTree} from '../../model/file-tree.ts';
 import {convertFileSrc} from '@tauri-apps/api/core';