Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-02 11:13:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix window resize with virtualizer

Browse source
This commit is contained in:
Jamie Pine 2022-09-04 13:42:04 -07:00
parent a9087ca429
commit e517b33adf
No known key found for this signature in database
GPG key ID: D5AC85A0C2F646E9
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.vscode/settings.json vendored
View file

@ -23,6 +23,7 @@
"subpackage",
"svgr",
"tailwindcss",
"tanstack",
"titlebar",
"trivago",
"tsparticles",

20
packages/interface/src/components/explorer/VirtualizedList.tsx
View file

@ -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) => {