import React, { useCallback, useEffect, createRef } from "react";
import { InfiniteLoader, WindowScroller } from "react-virtualized";
import Loaders from "@docspace/common/components/Loaders";
import { StyledList } from "./StyledInfiniteLoader";
const ListComponent = ({
viewAs,
hasMoreFiles,
filesLength,
itemCount,
onScroll,
loadMoreItems,
itemSize,
columnStorageName,
columnInfoPanelStorageName,
children,
className,
scroll,
infoPanelVisible,
selectedFolderId,
}) => {
const loaderRef = createRef();
useEffect(() => {
setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 1000);
}, [loaderRef, selectedFolderId, filesLength]);
const renderRow = ({ key, index, style }) => {
const isLoaded = isItemLoaded({ index });
if (!isLoaded) return getLoader(style, key);
return (
{children[index]}
);
};
const isItemLoaded = useCallback(
({ index }) => !hasMoreFiles || index < filesLength,
[filesLength, hasMoreFiles]
);
const renderTable = ({ index, style, key }) => {
const storageSize = infoPanelVisible
? localStorage.getItem(columnInfoPanelStorageName)
: localStorage.getItem(columnStorageName);
const isLoaded = isItemLoaded({ index });
if (!isLoaded) return getLoader(style, key);
return (
{children[index]}
);
};
const getLoader = (style, key) => {
switch (viewAs) {
case "table":
return (
);
case "row":
return (
);
default:
return <>>;
}
};
return (
{({ onRowsRendered, registerChild }) => (
{({ height, isScrolling, onChildScroll, scrollTop }) => {
if (height === undefined) {
height = scroll.getBoundingClientRect().height;
}
const viewId =
viewAs === "table" ? "table-container" : "rowContainer";
const width =
document.getElementById(viewId)?.getBoundingClientRect().width ??
0;
return (
);
}}
)}
);
};
export default ListComponent;