diff --git a/packages/components/infinite-loader/Grid.js b/packages/components/infinite-loader/Grid.js
index c9d1cfe05f..dae8fd52f0 100644
--- a/packages/components/infinite-loader/Grid.js
+++ b/packages/components/infinite-loader/Grid.js
@@ -1,8 +1,6 @@
-import React, { memo, useCallback, useEffect, useRef } from "react";
-import AutoSizer from "react-virtualized-auto-sizer";
-import InfiniteLoader from "react-window-infinite-loader";
-import { VariableSizeList as List, areEqual } from "react-window";
-//import Scroll from "./Scroll";
+import React, { useCallback } from "react";
+import { InfiniteLoader, WindowScroller, AutoSizer } from "react-virtualized";
+import { StyledList } from "./StyledInfiniteLoader";
const GridComponent = ({
hasMoreFiles,
@@ -11,36 +9,26 @@ const GridComponent = ({
loadMoreItems,
onScroll,
countTilesInRow,
- selectedFolderId,
children,
className,
- listRef,
+ scroll,
}) => {
- const gridRef = useRef(null);
-
- useEffect(() => {
- //TODO: inf-scroll it is slow
- //console.log("resetAfterIndex");
-
- gridRef?.current?.resetAfterIndex(0);
- }, [selectedFolderId]);
-
const isItemLoaded = useCallback(
- (index) => {
+ ({ index }) => {
return !hasMoreFiles || index * countTilesInRow < filesLength;
},
[filesLength, hasMoreFiles, countTilesInRow]
);
- const renderTile = memo(({ index, style }) => {
+ const renderTile = ({ index, style, key }) => {
return (
-
+
{children[index]}
);
- }, areEqual);
+ };
- const getItemSize = (index) => {
+ const getItemSize = ({ index }) => {
const itemClassNames = children[index]?.props?.className;
const isFile = itemClassNames?.includes("isFile");
const isFolder = itemClassNames?.includes("isFolder");
@@ -56,41 +44,40 @@ const GridComponent = ({
return isFolder ? folderHeight : isFile ? fileHeight : titleHeight;
};
- const renderGrid = ({ height, width }) => {
- return (
-
- {({ onItemsRendered, ref }) => (
- {
- ref(listRef);
- gridRef.current = refList;
- listRef.current = refList;
- }}
- //outerElementType={Scroll}
- overscanCount={5} //TODO: inf-scroll
- style={{ height: "100% !important", overflow: "hidden" }}
- >
- {renderTile}
-
- )}
-
- );
- };
-
- //console.log("GridComponent render");
-
- return
{renderGrid};
+ return (
+
+ {({ onRowsRendered, registerChild }) => (
+
+ {({ height, isScrolling, onChildScroll, scrollTop }) => (
+
+ {({ width }) => (
+
+ )}
+
+ )}
+
+ )}
+
+ );
};
export default GridComponent;
diff --git a/packages/components/infinite-loader/InfiniteLoader.js b/packages/components/infinite-loader/InfiniteLoader.js
index f47b469f6c..da422afe9f 100644
--- a/packages/components/infinite-loader/InfiniteLoader.js
+++ b/packages/components/infinite-loader/InfiniteLoader.js
@@ -1,33 +1,18 @@
-import React, { useRef } from "react";
+import React from "react";
import PropTypes from "prop-types";
-import { WindowScroller } from "react-virtualized";
import { isMobileOnly } from "react-device-detect";
import ListComponent from "./List";
import GridComponent from "./Grid";
const InfiniteLoaderComponent = (props) => {
- const ref = useRef(null);
-
const scroll = isMobileOnly
? document.querySelector("#customScrollBar > .scroll-body")
: document.querySelector("#sectionScroll > .scroll-body");
- const onScroll = ({ scrollTop }) => {
- ref.current.scrollTo(scrollTop);
- };
-
- return (
- <>
-
- {() => }
-
-
- {props.viewAs === "tile" ? (
-
- ) : (
-
- )}
- >
+ return props.viewAs === "tile" ? (
+
+ ) : (
+
);
};
InfiniteLoaderComponent.propTypes = {
diff --git a/packages/components/infinite-loader/List.js b/packages/components/infinite-loader/List.js
index 527290b245..12314fa42c 100644
--- a/packages/components/infinite-loader/List.js
+++ b/packages/components/infinite-loader/List.js
@@ -1,54 +1,42 @@
-import React, { memo, useCallback, useEffect, useRef } from "react";
-import AutoSizer from "react-virtualized-auto-sizer";
-import InfiniteLoader from "react-window-infinite-loader";
-import { FixedSizeList as List, areEqual } from "react-window";
-//import Scroll from "./Scroll";
+import React, { useCallback } from "react";
+import { InfiniteLoader, WindowScroller, AutoSizer } from "react-virtualized";
import Loaders from "@docspace/common/components/Loaders";
-import { StyledTableLoader, StyledRowLoader } from "./StyledInfiniteLoader";
+import { StyledList } from "./StyledInfiniteLoader";
const ListComponent = ({
viewAs,
hasMoreFiles,
filesLength,
itemCount,
+ onScroll,
loadMoreItems,
itemSize,
- onScroll,
columnStorageName,
- selectedFolderId,
children,
className,
- listRef,
+ scroll,
}) => {
- const listComponentRef = useRef(null);
-
- useEffect(() => {
- //TODO: inf-scroll it is slow
-
- listComponentRef?.current?.resetAfterIndex(0);
- }, [selectedFolderId]);
-
- const renderRow = memo(({ index, style }) => {
- const isLoaded = isItemLoaded(index + 1);
- if (!isLoaded) return getLoader(style);
+ const renderRow = ({ key, index, style }) => {
+ const isLoaded = isItemLoaded({ index: index + 2 });
+ if (!isLoaded) return getLoader(style, key);
return (
-
+
{children[index]}
);
- }, areEqual);
+ };
const isItemLoaded = useCallback(
- (index) => !hasMoreFiles || index < filesLength,
+ ({ index }) => !hasMoreFiles || index < filesLength,
[filesLength, hasMoreFiles]
);
- const renderTable = memo(({ index, style }) => {
+ const renderTable = ({ index, style, key }) => {
const storageSize = localStorage.getItem(columnStorageName);
- const isLoaded = isItemLoaded(index + 1);
- if (!isLoaded) return getLoader(style);
+ const isLoaded = isItemLoaded({ index: index + 2 });
+ if (!isLoaded) return getLoader(style, key);
return (
{children[index]}
);
- }, areEqual);
+ };
- const getLoader = (style) => {
+ const getLoader = (style, key) => {
switch (viewAs) {
case "table":
return (
-
-
-
+ count={1}
+ />
);
case "row":
return (
-
-
-
+
);
default:
return <>>;
}
};
- const renderList = ({ height, width }) => {
- return (
-
- {({ onItemsRendered, ref }) => (
- {
- ref(listRef);
- listComponentRef.current = refList;
- listRef.current = refList;
- }}
- style={{ height: "100% !important", overflow: "hidden" }}
- //outerElementType={Scroll}
- >
- {viewAs === "table" ? renderTable : renderRow}
-
- )}
-
- );
- };
+ return (
+
+ {({ onRowsRendered, registerChild }) => (
+
+ {({ height, isScrolling, onChildScroll, scrollTop }) => {
+ if (height === undefined) {
+ height = scroll.getBoundingClientRect().height;
+ }
- return {renderList};
+ return (
+
+ {({ width }) => (
+
+ )}
+
+ );
+ }}
+
+ )}
+
+ );
};
export default ListComponent;
diff --git a/packages/components/infinite-loader/StyledInfiniteLoader.js b/packages/components/infinite-loader/StyledInfiniteLoader.js
index 8ed1d2b8d3..5f961dd865 100644
--- a/packages/components/infinite-loader/StyledInfiniteLoader.js
+++ b/packages/components/infinite-loader/StyledInfiniteLoader.js
@@ -1,17 +1,7 @@
+import { List } from "react-virtualized";
import styled from "styled-components";
import Base from "../themes/base";
-const StyledTableLoader = styled.div`
- grid-column-start: 1;
- grid-column-end: -1;
- display: grid;
- padding-top: 16px;
-`;
-
-const StyledRowLoader = styled.div`
- padding-top: 16px;
-`;
-
const StyledScroll = styled.div`
overflow: scroll;
@@ -38,8 +28,12 @@ const StyledScroll = styled.div`
scrollbar-color: ${({ theme }) => theme.scrollbar.backgroundColorVertical};
`;
+const StyledList = styled(List)`
+ outline: none;
+`;
+
StyledScroll.defaultProps = {
theme: Base,
};
-export { StyledTableLoader, StyledRowLoader, StyledScroll };
+export { StyledScroll, StyledList };