From e517b33adf558c904cfba3e36a802c37e148cabe Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Sun, 4 Sep 2022 13:42:04 -0700
Subject: [PATCH] fix window resize with virtualizer

---
 .vscode/settings.json                         |  1 +
 .../components/explorer/VirtualizedList.tsx   | 20 +++++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1f767097e..5a8e040eb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,6 +23,7 @@
 		"subpackage",
 		"svgr",
 		"tailwindcss",
+		"tanstack",
 		"titlebar",
 		"trivago",
 		"tsparticles",
diff --git a/packages/interface/src/components/explorer/VirtualizedList.tsx b/packages/interface/src/components/explorer/VirtualizedList.tsx
index f472b8501..f039b9d4b 100644
--- a/packages/interface/src/components/explorer/VirtualizedList.tsx
+++ b/packages/interface/src/components/explorer/VirtualizedList.tsx
@@ -3,7 +3,7 @@ import { ExplorerContext, ExplorerItem, FilePath } from '@sd/core';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import React, { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useKey, useWindowSize } from 'rooks';
+import { useKey, useOnWindowResize, useWindowSize } from 'rooks';
 import { useSnapshot } from 'valtio';
 
 import FileItem from './FileItem';
@@ -11,6 +11,7 @@ import FileRow from './FileRow';
 import { isPath } from './utils';
 
 const TOP_BAR_HEIGHT = 50;
+const GRID_TEXT_AREA_HEIGHT = 25;
 
 interface Props {
 	context: ExplorerContext;
@@ -35,13 +36,17 @@ export const VirtualizedList: React.FC<Props> = ({ data, context }) => {
 
 	const { gridItemSize, layoutMode, listItemSize, selectedRowIndex } = useSnapshot(explorerStore);
 
-	useLayoutEffect(() => {
+	function handleWindowResize() {
+		// so the virtualizer can render the correct number of columns
 		setWidth(innerRef.current?.offsetWidth || 0);
-	}, []);
+	}
+	useOnWindowResize(handleWindowResize);
+	useLayoutEffect(() => handleWindowResize(), []);
 
+	// sizing calculations
 	const amountOfColumns = Math.floor(width / gridItemSize) || 8,
 		amountOfRows = layoutMode === 'grid' ? Math.ceil(data.length / amountOfColumns) : data.length,
-		itemSize = layoutMode === 'grid' ? gridItemSize + 25 : listItemSize;
+		itemSize = layoutMode === 'grid' ? gridItemSize + GRID_TEXT_AREA_HEIGHT : listItemSize;
 
 	const rowVirtualizer = useVirtualizer({
 		count: amountOfRows,
@@ -51,11 +56,14 @@ export const VirtualizedList: React.FC<Props> = ({ data, context }) => {
 		measureElement: (index) => itemSize
 	});
 
+	// TODO: Make scroll adjustment work with both list and grid layout, currently top bar offset disrupts positioning of list, and grid just doesn't work
 	// useEffect(() => {
-	// 	if (selectedRowIndex === 0 && goingUp) rowVirtualizer.scrollToIndex(0);
+	// 	if (selectedRowIndex === 0 && goingUp) rowVirtualizer.scrollToIndex(0, { smoothScroll: false });
 
 	// 	if (selectedRowIndex !== -1)
-	// 		rowVirtualizer.scrollToIndex(goingUp ? selectedRowIndex - 1 : selectedRowIndex);
+	// 		rowVirtualizer.scrollToIndex(goingUp ? selectedRowIndex - 1 : selectedRowIndex, {
+	// 			smoothScroll: false
+	// 		});
 	// }, [goingUp, selectedRowIndex, rowVirtualizer]);
 
 	useKey('ArrowUp', (e) => {