small bug fix

- ページ移動キーで高速にスクロールするとフォーカスが外れる問題を修正
goemoncode · Mar 16, 2023 · cd038de · cd038de
1 parent 665d573
commit cd038de
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@goemoncode/react-explorer-listview",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
   "description": "Windows Explorer like ListView component for React",
   "publishConfig": {

diff --git a/src/ListView.tsx b/src/ListView.tsx
@@ -64,15 +64,24 @@ function ListView<R, K extends Key = Key>(
     [onSortColumnChange, sortColumn]
   );
   const { getByRow, getIndexByKey } = useRowKey(rows, rowKey);
+
   const [focusedRow, setFocusedRow] = useState<K | undefined>(propFocusedRow);
   const focusedRowIndex = getIndexByKey(focusedRow) ?? -1;
+  useDebounce(() => onFocusedRowChange?.(focusedRow), 50, [focusedRow]);
+  useLayoutEffect(() => setFocusedRow(propFocusedRow), [propFocusedRow]);
+  useLayoutEffect(() => {
+    if (focusedRow && focusedRowIndex < 0) {
+      setFocusedRow(undefined);
+    }
+  }, [focusedRow, focusedRowIndex]);
+
   const [selectedRows, setSelectedRows] = useSelectedRows(propSelectedRows);
+  useDebounce(() => onSelectedRowsChange?.(selectedRows), 50, [selectedRows]);
+
   const [shiftKeyHeldRow, setShiftKeyHeldRow] = useState<K | undefined>();
   const [headerHeight, setHeaderHeight] = useState(0);
   const headerHeightContext = useMemo<HeaderHeightContext>(
-    () => ({
-      onHeaderHeightResize: setHeaderHeight,
-    }),
+    () => ({ onHeaderHeightResize: setHeaderHeight }),
     []
   );
   const ref = useRef<HTMLDivElement>(null);
@@ -88,6 +97,7 @@ function ListView<R, K extends Key = Key>(
     refHandle,
     () => ({
       element: ref.current,
+      containerElement: null,
       scrollToRow: (rowIndex: number) => {
         if (rowIndex >= 0 && rowIndex <= rows.length - 1) {
           setFocusedRow(getByRow(rows[rowIndex]));
@@ -96,17 +106,6 @@ function ListView<R, K extends Key = Key>(
     }),
     [ref, rows, getByRow]
   );
-  useDebounce(() => onFocusedRowChange?.(focusedRow), 50, [focusedRow]);
-  useDebounce(() => onSelectedRowsChange?.(selectedRows), 50, [selectedRows]);
-
-  useLayoutEffect(() => {
-    if (focusedRow && focusedRowIndex < 0) {
-      setFocusedRow(undefined);
-    }
-  }, [focusedRow, focusedRowIndex]);
-  // useLayoutEffect(() => setFocusedRow(undefined), [rows]);
-  useLayoutEffect(() => setFocusedRow(propFocusedRow), [propFocusedRow]);
-  // useLayoutEffect(() => setShiftKeyHeldRow(undefined), [rows]);
 
   const [columnResizeEventArgs, setColumnResizeEventArgs] =
     useState<[CalculatedColumn<R>, number]>();
@@ -154,14 +153,10 @@ function ListView<R, K extends Key = Key>(
             return 0;
           case 'End':
             return rows.length - 1;
-          case 'PageUp': {
-            const nextRowY = index * rowHeight + rowHeight - viewportHeight;
-            return clamp(Math.floor(nextRowY / rowHeight));
-          }
-          case 'PageDown': {
-            const nextRowY = index * rowHeight + viewportHeight;
-            return clamp(Math.floor(nextRowY / rowHeight));
-          }
+          case 'PageUp':
+            return clamp(index - Math.floor(viewportHeight / rowHeight) + 1);
+          case 'PageDown':
+            return clamp(index + Math.floor(viewportHeight / rowHeight) - 1);
           default:
             return false;
         }

diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
@@ -1,5 +1,5 @@
 import { RefObject, useMemo } from 'react';
-import { useMeasure, useScroll } from 'react-use';
+import { useMeasure, usePrevious, useScroll } from 'react-use';
 import { useMergeRefs } from './useMergeRefs';
 import { range } from '../utils';
 
@@ -9,15 +9,12 @@ export function useViewportRows<R, E extends HTMLElement>(
   rowHeight: number,
   headerHeight: number,
   focusedRowIndex: number
-): [
-  refs: ReturnType<typeof useMergeRefs<E>>,
-  viewportHeight: number,
-  viewportRows: number[]
-] {
+): [refs: ReturnType<typeof useMergeRefs<E>>, viewportHeight: number, viewportRows: number[]] {
   const { y: scrollTop } = useScroll(ref);
   const [measureRef, { height: clientHeight }] = useMeasure<E>();
   const refs = useMergeRefs(ref, measureRef);
   const viewportHeight = clientHeight - headerHeight;
+  const prevFocusedRowIndex = usePrevious(focusedRowIndex) ?? -1;
 
   const viewportRows = useMemo(() => {
     if (rows.length == 0) return [];
@@ -33,10 +30,13 @@ export function useViewportRows<R, E extends HTMLElement>(
     );
     return Array.from(
       new Set(
-        range(overscanTopIndex, overscanBottomIndex).concat([Math.max(0, focusedRowIndex)])
+        range(overscanTopIndex, overscanBottomIndex).concat([
+          Math.max(0, prevFocusedRowIndex),
+          Math.max(0, focusedRowIndex),
+        ])
       ).values()
     ).sort();
-  }, [rows, rowHeight, scrollTop, focusedRowIndex, viewportHeight]);
+  }, [rows.length, scrollTop, viewportHeight, prevFocusedRowIndex, focusedRowIndex, rowHeight]);
 
   return [refs, viewportHeight, viewportRows];
 }