IconViewMode/TableViewMode: fix cursor navigation

When no element is selected, next/prev cursor keys should select first/last element. Also fixed: changing sort method and using cursor navigation would use previous cursorIndex.
warpdesign · May 5, 2024 · 9a23481 · 9a23481
1 parent 08497d2
commit 9a23481
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/src/components/FileView.tsx b/src/components/FileView.tsx
@@ -149,6 +149,7 @@ const FileView = observer(({ hide }: Props) => {
                         event.preventDefault()
                         const { getNextIndex } = getActions()
                         const nextIndex = getNextIndex(cursorIndex, event.key as ArrowKey)
+                        if (nextIndex === cursorIndex) return
                         if (nextIndex > -1 && nextIndex <= rowCount - 1) {
                             const file = cache.files[nextIndex]
                             selectFile(file, false, event.shiftKey)
@@ -180,7 +181,7 @@ const FileView = observer(({ hide }: Props) => {
                     }
                 }
             },
-            [cursor, cache, rowCount],
+            [cursor, cache, rowCount, cursorIndex],
         ),
         ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Enter', ' '],
         { alwaysCatchEvent: true },

diff --git a/src/components/viewmodes/IconViewMode/index.tsx b/src/components/viewmodes/IconViewMode/index.tsx
@@ -76,6 +76,8 @@ export const IconViewMode = forwardRef<ViewModeActions, ViewModeProps<IconViewMo
                         `should navigate to ${direction} index=${index} itemCount=${itemCount} itemsPerRow=${itemsPerRow}`,
                     )
 
+                    const lastIndex = itemCount - 1
+
                     switch (direction) {
                         case 'ArrowDown':
                             // if it's the first time arrow down key is pressed
@@ -91,14 +93,23 @@ export const IconViewMode = forwardRef<ViewModeActions, ViewModeProps<IconViewMo
                             // last element of the row
                             return newIndex >= itemCount ? itemCount - 1 : newIndex
 
-                        case 'ArrowUp':
-                            return index - itemsPerRow
+                        case 'ArrowUp': {
+                            const pos = index - itemsPerRow
+                            if (index > -1) return pos >= 0 ? pos : index
+                            else return lastIndex
+                        }
 
-                        case 'ArrowRight':
-                            return index + 1
+                        case 'ArrowRight': {
+                            const pos = index + 1
+                            if (index > -1) return pos <= lastIndex ? pos : index
+                            else return 0
+                        }
 
-                        case 'ArrowLeft':
-                            return index - 1
+                        case 'ArrowLeft': {
+                            const pos = index - 1
+                            if (index > -1) return pos > -1 ? pos : index
+                            else return lastIndex
+                        }
 
                         default:
                             console.warn(`getNextIndex: unknown direction ${direction}`)
@@ -107,14 +118,14 @@ export const IconViewMode = forwardRef<ViewModeActions, ViewModeProps<IconViewMo
                 },
                 icons: true,
             }),
-            [itemsPerRow, numRows],
+            [itemsPerRow, numRows, itemCount],
         )
 
         useEffect(() => {
             // Position scrolling in these cases:
             // 1. new file has been selected: scroll to selected index to make sure it's visible
             // 2. new directory has been loaded (or same reloaded): scroll to top or selected index
-            if (status === 'ok' && itemsPerRow > 0) {
+            if (status === 'ok' && cursorIndex > -1 && itemsPerRow > 0) {
                 const row = Math.floor(cursorIndex / itemsPerRow)
                 scrollToIndex(cursorIndex === -1 ? 0 : row)
             }

diff --git a/src/components/viewmodes/TableViewMode/index.tsx b/src/components/viewmodes/TableViewMode/index.tsx
@@ -54,10 +54,12 @@ export const TableViewMode = forwardRef<ViewModeActions, ViewModeProps<undefined
                 console.log(`should navigate to ${direction} index=${index} itemCount=${itemCount}`)
                 switch (direction) {
                     case 'ArrowDown':
-                        return index + 1
+                        if (index > -1) return index < itemCount - 1 ? index + 1 : index
+                        else return 0
 
                     case 'ArrowUp':
-                        return index - 1
+                        if (index > -1) return index > 0 ? index - 1 : index
+                        else return itemCount - 1
 
                     default:
                         console.warn(`getNextIndex: unknown direction ${direction}`)
@@ -71,7 +73,7 @@ export const TableViewMode = forwardRef<ViewModeActions, ViewModeProps<undefined
             // Position scrolling in these cases:
             // 1. new file has been selected: scroll to selected index to make sure it's visible
             // 2. new directory has been loaded (or same reloaded): scroll to top or selected index
-            status === 'ok' && scrollToIndex(cursorIndex === -1 ? 0 : cursorIndex)
+            status === 'ok' && cursorIndex > -1 && scrollToIndex(cursorIndex === -1 ? 0 : cursorIndex)
         }, [cursorIndex, status])
 
         return (