feat(FileOrganizer): grid size based on first item, not hard-coded

Author: liamross

src/components/FileOrganizer/FileOrganizer.tsx

@@ -143,6 +143,20 @@ export function FileOrganizer<F extends ObjectWithId>({
 
   const [draggingId, setDraggingId] = useState<string>();
 
+  // Detect size of first item and use as size throughout.
+  const [size, setSize] = useState({ width: THUMBNAIL_WIDTH, height: THUMBNAIL_WIDTH });
+  const hasFiles = files.length > 0;
+  useEffect(() => {
+    if (!fileOrganizerRef.current) return;
+    const firstItem = fileOrganizerRef.current.querySelector('div[draggable="true"]');
+    if (!firstItem) return;
+    const { width, height } = firstItem.getBoundingClientRect();
+    setSize(prev => {
+      if (prev.width === width && prev.height === height) return prev;
+      return { width, height };
+    });
+  }, [hasFiles]);
+
   const handleOnDragChange = useCallback(
     (id?: string) => {
       onDragChange?.(id);
@@ -151,18 +165,23 @@ export function FileOrganizer<F extends ObjectWithId>({
     [onDragChange],
   );
 
-  // Detect all shown items and set as array of IDs to notify onRenderThumbnail.
-  // Set to null if all IDs are shown (no virtualization).
+  // Whenever files changes, detect which items are in view and prevent
+  // throttling. Set as array of IDs to notify onRenderThumbnail.
   const [initialShownIds, setInitialShownIds] = useState<string[]>([]);
   useEffect(() => {
-    requestAnimationFrame(() => {
-      if (!fileOrganizerRef.current) return;
-      const itemsInView = fileOrganizerRef.current.querySelectorAll('div[draggable="true"]');
-      const ids: string[] = [];
-      itemsInView.forEach(draggableItem => ids.push(draggableItem.id));
-      setInitialShownIds(ids);
-    });
-  }, []);
+    if (files) {
+      requestAnimationFrame(() => {
+        if (!fileOrganizerRef.current) return;
+        const itemsInView = fileOrganizerRef.current.querySelectorAll('div[draggable="true"]');
+        const ids: string[] = [];
+        itemsInView.forEach(draggableItem => {
+          const dataFileId = draggableItem.getAttribute('data-file-id');
+          if (dataFileId) ids.push(dataFileId);
+        });
+        setInitialShownIds(ids);
+      });
+    }
+  }, [files]);
 
   const handleItemKeyDown = useCallback(
     (event: KeyboardEvent<HTMLDivElement>, index: number, _file: F, draggableRef: RefObject<HTMLDivElement>) => {
@@ -202,8 +221,8 @@ export function FileOrganizer<F extends ObjectWithId>({
       const isInDragGroup = draggingIds?.includes(file.id) ?? false;
       return (
         <Draggable
+          data-file-id={file.id}
           key={file.id}
-          id={file.id}
           index={index}
           style={
             style && {
@@ -294,6 +313,7 @@ export function FileOrganizer<F extends ObjectWithId>({
           ref={gridRef}
           files={files}
           padding={pad}
+          size={size}
           renderItem={renderItem}
           onColumnCountChange={setColumnCount}
         />

src/components/FileOrganizer/MemoAutoSizer.tsx

@@ -1,11 +1,12 @@
 import React, { forwardRef, memo, useCallback, useEffect, useMemo } from 'react';
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
 import { FixedSizeGrid as Grid, GridChildComponentProps } from 'react-window';
-import { getItemIndex, ObjectWithId, THUMBNAIL_WIDTH } from '../../utils';
+import { getItemIndex, ObjectWithId } from '../../utils';
 
 interface VirtualizedProps {
   files: ObjectWithId[];
   padding: number;
+  size: { width: number; height: number };
   onColumnCountChange: (newColumnCount: number) => void;
   renderItem: (file: any, index: number, style: React.CSSProperties | undefined) => JSX.Element; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
@@ -19,15 +20,15 @@ const MemoGridItem = memo<GridChildComponentProps>(({ columnIndex, rowIndex, sty
 
 const MemoGrid = memo(
   forwardRef<Grid, Size & VirtualizedProps>(
-    ({ width, height, files, padding, renderItem, onColumnCountChange }, ref) => {
+    ({ width, height, files, padding, renderItem, onColumnCountChange, size }, ref) => {
       const modifiedHeight = height - 2 * padding;
       const modifiedWidth = width - 2 * padding;
 
       const data = useMemo(() => {
-        let columnCount = Math.floor(modifiedWidth / THUMBNAIL_WIDTH);
+        let columnCount = Math.floor(modifiedWidth / size.width);
         if (columnCount > files.length) columnCount = files.length;
         return { files, renderItem, columnCount };
-      }, [files, renderItem, modifiedWidth]);
+      }, [modifiedWidth, size.width, files, renderItem]);
 
       useEffect(() => {
         onColumnCountChange(data.columnCount);
@@ -36,8 +37,8 @@ const MemoGrid = memo(
       return (
         <Grid
           ref={ref}
-          columnWidth={THUMBNAIL_WIDTH}
-          rowHeight={THUMBNAIL_WIDTH}
+          columnWidth={size.width}
+          rowHeight={size.height}
           height={modifiedHeight}
           width={modifiedWidth}
           style={{ padding, height, width }}
@@ -57,7 +58,7 @@ const MemoGrid = memo(
 );
 
 export const MemoAutoSizer = memo(
-  forwardRef<Grid, VirtualizedProps>(({ files, padding, renderItem, onColumnCountChange }, ref) => {
+  forwardRef<Grid, VirtualizedProps>(({ files, padding, size, renderItem, onColumnCountChange }, ref) => {
     const onRenderGrid = useCallback(
       ({ width, height }: Size) => (
         <MemoGrid
@@ -66,11 +67,12 @@ export const MemoAutoSizer = memo(
           width={width}
           height={height}
           files={files}
+          size={size}
           renderItem={renderItem}
           onColumnCountChange={onColumnCountChange}
         />
       ),
-      [files, padding, renderItem, ref, onColumnCountChange],
+      [padding, ref, files, size, renderItem, onColumnCountChange],
     );
 
     return <AutoSizer>{onRenderGrid}</AutoSizer>;