fix VList

alchemy-fr · Apr 8, 2024 · 16a26b0 · 16a26b0
1 parent 12446b7
commit 16a26b0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/databox/client/src/components/AssetList/Layouts/Grid/GridLayout.tsx b/databox/client/src/components/AssetList/Layouts/Grid/GridLayout.tsx
@@ -12,6 +12,7 @@ import {usePreview} from '../../usePreview';
 import {tagListSx} from '../../../Media/Asset/Widgets/AssetTagList';
 import {collectionListSx} from '../../../Media/Asset/Widgets/AssetCollectionList';
 import LoadMoreButton from "../../LoadMoreButton.tsx";
+import {useScrollTopPages} from "../../useScrollTopPages.ts";
 
 export default function GridLayout<Item extends AssetOrAssetContainer>({
     toolbarHeight,
@@ -29,6 +30,9 @@ export default function GridLayout<Item extends AssetOrAssetContainer>({
     const collLineHeight = 32;
     const tagLineHeight = 32;
     const d = useContext(DisplayContext)!;
+    const listRef = React.useRef<HTMLDivElement | null>(null);
+
+    useScrollTopPages(listRef.current?.closest(`.${assetClasses.scrollable}`), pages);
 
     const gridSx = React.useCallback(
         (theme: Theme) => {
@@ -145,7 +149,12 @@ export default function GridLayout<Item extends AssetOrAssetContainer>({
 
     return (
         <>
-            <Grid container spacing={1} sx={gridSx}>
+            <Grid
+                container
+                spacing={1}
+                sx={gridSx}
+                ref={listRef}
+            >
                 {pages.map((page, i) => (
                     <GridPage
                         key={i}

diff --git a/databox/client/src/components/AssetList/Layouts/List/ListLayout.tsx b/databox/client/src/components/AssetList/Layouts/List/ListLayout.tsx
@@ -18,7 +18,6 @@ import {menuHeight} from "../../../Layout/MainAppBar.tsx";
 import {useWindowSize} from '@alchemy/react-hooks/src/useWindowSize.ts'
 import {CellMeasurerCache} from "react-virtualized/dist/es/CellMeasurer";
 import LoadMoreButton from "../../LoadMoreButton.tsx";
-import {useScrollTopPages} from "../../useScrollTopPages.ts";
 import SectionDivider from "../../SectionDivider.tsx";
 
 export default function ListLayout<Item extends AssetOrAssetContainer>({
@@ -34,18 +33,20 @@ export default function ListLayout<Item extends AssetOrAssetContainer>({
     itemToAsset,
 }: LayoutProps<Item>) {
     const {previewAnchorEl, onPreviewToggle} = usePreview([pages]);
-    const listRef = React.useRef<HTMLDivElement>();
+    const listRef = React.useRef<List | null>(null);
     const d = React.useContext(DisplayContext)!;
     const {innerHeight} = useWindowSize();
     const height = innerHeight - toolbarHeight - menuHeight;
 
-    useScrollTopPages(listRef.current?.querySelector(`.${assetClasses.scrollable}`), pages);
+    React.useLayoutEffect(() => {
+        listRef.current?.scrollToRow(0);
+    }, [pages[0], listRef]);
 
     const cellMeasurer = React.useMemo(() => {
         return new CellMeasurerCache({
             fixedWidth: true,
             minHeight: d.thumbSize + 20,
-            defaultHeight: 500
+            defaultHeight: 400
         })
     }, [pages[0], d.thumbSize]);
 
@@ -165,7 +166,16 @@ export default function ListLayout<Item extends AssetOrAssetContainer>({
                         onPreviewToggle={onPreviewToggle}
                     />
                     {loadMore && index === rowCount - 1 ? <LoadMoreButton
-                        onClick={loadMore}
+                        onClick={() => {
+                            loadMore!().then(() => {
+                                cellMeasurer.clear(index, 0);
+                                parent.recomputeGridSize!({
+                                    rowIndex: index,
+                                    columnIndex: 0,
+                                });
+                                parent.forceUpdate();
+                            });
+                        }}
                         pages={pages}
                     /> : ''}
                 </div>
@@ -176,11 +186,11 @@ export default function ListLayout<Item extends AssetOrAssetContainer>({
     return (
         <Box
             sx={layoutSx}
-            ref={listRef}
         >
             <AutoSizer disableHeight>
                 {({width}) => (
                     <List
+                        ref={listRef}
                         className={assetClasses.scrollable}
                         deferredMeasurementCache={cellMeasurer}
                         height={height}