2022-08-15 14:41:39 +00:00
|
|
|
import React, { useCallback, useEffect, createRef } from "react";
|
2022-08-12 11:45:14 +00:00
|
|
|
import { InfiniteLoader, WindowScroller } from "react-virtualized";
|
2022-08-09 06:49:28 +00:00
|
|
|
import Loaders from "@docspace/common/components/Loaders";
|
2022-08-12 07:35:32 +00:00
|
|
|
import { StyledList } from "./StyledInfiniteLoader";
|
2022-07-15 08:58:58 +00:00
|
|
|
|
|
|
|
const ListComponent = ({
|
|
|
|
viewAs,
|
|
|
|
hasMoreFiles,
|
|
|
|
filesLength,
|
|
|
|
itemCount,
|
2022-08-12 07:35:32 +00:00
|
|
|
onScroll,
|
2022-07-15 08:58:58 +00:00
|
|
|
loadMoreItems,
|
|
|
|
itemSize,
|
|
|
|
columnStorageName,
|
2022-08-12 12:28:57 +00:00
|
|
|
columnInfoPanelStorageName,
|
2022-07-15 08:58:58 +00:00
|
|
|
children,
|
|
|
|
className,
|
2022-08-12 07:35:32 +00:00
|
|
|
scroll,
|
2022-08-12 12:28:57 +00:00
|
|
|
infoPanelVisible,
|
2022-08-15 14:41:39 +00:00
|
|
|
selectedFolderId,
|
2022-07-15 08:58:58 +00:00
|
|
|
}) => {
|
2022-08-15 14:41:39 +00:00
|
|
|
const loaderRef = createRef();
|
2022-08-15 14:22:50 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
2022-08-18 07:20:12 +00:00
|
|
|
setTimeout(() => loaderRef?.current?.resetLoadMoreRowsCache(true), 1000);
|
|
|
|
}, [loaderRef, selectedFolderId, filesLength]);
|
2022-08-15 14:22:50 +00:00
|
|
|
|
2022-08-12 07:35:32 +00:00
|
|
|
const renderRow = ({ key, index, style }) => {
|
2022-08-24 08:28:13 +00:00
|
|
|
const isLoaded = isItemLoaded({ index });
|
2022-08-12 07:35:32 +00:00
|
|
|
if (!isLoaded) return getLoader(style, key);
|
2022-07-15 08:58:58 +00:00
|
|
|
|
2022-08-10 08:37:14 +00:00
|
|
|
return (
|
2022-08-12 07:35:32 +00:00
|
|
|
<div className="row-list-item window-item" style={style} key={key}>
|
2022-08-10 08:37:14 +00:00
|
|
|
{children[index]}
|
|
|
|
</div>
|
|
|
|
);
|
2022-08-12 07:35:32 +00:00
|
|
|
};
|
2022-07-15 08:58:58 +00:00
|
|
|
|
|
|
|
const isItemLoaded = useCallback(
|
2022-08-12 07:35:32 +00:00
|
|
|
({ index }) => !hasMoreFiles || index < filesLength,
|
2022-07-15 08:58:58 +00:00
|
|
|
[filesLength, hasMoreFiles]
|
|
|
|
);
|
|
|
|
|
2022-08-12 07:35:32 +00:00
|
|
|
const renderTable = ({ index, style, key }) => {
|
2022-08-12 12:28:57 +00:00
|
|
|
const storageSize = infoPanelVisible
|
|
|
|
? localStorage.getItem(columnInfoPanelStorageName)
|
|
|
|
: localStorage.getItem(columnStorageName);
|
2022-07-15 08:58:58 +00:00
|
|
|
|
2022-08-24 08:28:13 +00:00
|
|
|
const isLoaded = isItemLoaded({ index });
|
2022-08-12 07:35:32 +00:00
|
|
|
if (!isLoaded) return getLoader(style, key);
|
2022-07-15 08:58:58 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2022-08-10 08:37:14 +00:00
|
|
|
className="table-list-item window-item"
|
2022-07-15 08:58:58 +00:00
|
|
|
style={{
|
|
|
|
...style,
|
|
|
|
display: "grid",
|
|
|
|
gridTemplateColumns: storageSize,
|
|
|
|
}}
|
2022-08-12 07:35:32 +00:00
|
|
|
key={key}
|
2022-07-15 08:58:58 +00:00
|
|
|
>
|
|
|
|
{children[index]}
|
|
|
|
</div>
|
|
|
|
);
|
2022-08-12 07:35:32 +00:00
|
|
|
};
|
2022-07-15 08:58:58 +00:00
|
|
|
|
2022-08-12 07:35:32 +00:00
|
|
|
const getLoader = (style, key) => {
|
2022-07-15 08:58:58 +00:00
|
|
|
switch (viewAs) {
|
|
|
|
case "table":
|
|
|
|
return (
|
2022-08-12 07:35:32 +00:00
|
|
|
<Loaders.TableLoader
|
|
|
|
key={key}
|
2022-07-15 08:58:58 +00:00
|
|
|
style={style}
|
|
|
|
className="table-container_body-loader"
|
2022-08-12 07:35:32 +00:00
|
|
|
count={1}
|
|
|
|
/>
|
2022-07-15 08:58:58 +00:00
|
|
|
);
|
|
|
|
case "row":
|
|
|
|
return (
|
2022-08-12 07:35:32 +00:00
|
|
|
<Loaders.Rows
|
|
|
|
key={key}
|
|
|
|
style={style}
|
|
|
|
className="row-loader"
|
|
|
|
count={1}
|
|
|
|
/>
|
2022-07-15 08:58:58 +00:00
|
|
|
);
|
|
|
|
default:
|
|
|
|
return <></>;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2022-08-12 07:35:32 +00:00
|
|
|
return (
|
|
|
|
<InfiniteLoader
|
|
|
|
isRowLoaded={isItemLoaded}
|
|
|
|
rowCount={itemCount}
|
|
|
|
loadMoreRows={loadMoreItems}
|
2022-08-15 14:22:50 +00:00
|
|
|
ref={loaderRef}
|
2022-08-12 07:35:32 +00:00
|
|
|
>
|
|
|
|
{({ onRowsRendered, registerChild }) => (
|
|
|
|
<WindowScroller scrollElement={scroll}>
|
|
|
|
{({ height, isScrolling, onChildScroll, scrollTop }) => {
|
|
|
|
if (height === undefined) {
|
|
|
|
height = scroll.getBoundingClientRect().height;
|
|
|
|
}
|
2022-07-15 08:58:58 +00:00
|
|
|
|
2022-08-12 11:45:14 +00:00
|
|
|
const viewId =
|
|
|
|
viewAs === "table" ? "table-container" : "rowContainer";
|
|
|
|
|
|
|
|
const width =
|
|
|
|
document.getElementById(viewId)?.getBoundingClientRect().width ??
|
|
|
|
0;
|
|
|
|
|
2022-08-12 07:35:32 +00:00
|
|
|
return (
|
2022-08-12 11:45:14 +00:00
|
|
|
<StyledList
|
|
|
|
autoHeight
|
|
|
|
height={height}
|
|
|
|
onRowsRendered={onRowsRendered}
|
|
|
|
ref={registerChild}
|
2022-08-24 08:28:13 +00:00
|
|
|
rowCount={hasMoreFiles ? children.length + 2 : children.length}
|
2022-08-12 11:45:14 +00:00
|
|
|
rowHeight={itemSize}
|
|
|
|
rowRenderer={viewAs === "table" ? renderTable : renderRow}
|
|
|
|
width={width}
|
|
|
|
className={className}
|
|
|
|
isScrolling={isScrolling}
|
|
|
|
onChildScroll={onChildScroll}
|
|
|
|
scrollTop={scrollTop}
|
|
|
|
overscanRowCount={3}
|
|
|
|
onScroll={onScroll}
|
2022-08-17 12:11:48 +00:00
|
|
|
viewAs={viewAs}
|
2022-08-12 11:45:14 +00:00
|
|
|
/>
|
2022-08-12 07:35:32 +00:00
|
|
|
);
|
|
|
|
}}
|
|
|
|
</WindowScroller>
|
|
|
|
)}
|
|
|
|
</InfiniteLoader>
|
|
|
|
);
|
2022-07-15 08:58:58 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default ListComponent;
|