From 688de9106b3e1b127f76da6307b607ad8665fe6a Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <tatiana.lopaeva@onlyoffice.com>
Date: Fri, 18 Jun 2021 10:58:01 +0300
Subject: [PATCH] Web: Files: SelectFileDialog: Added infinity scroll for files
 list.

---
 .../panels/SelectFileDialog/fileListBody.js   | 133 +++++++++++++++---
 1 file changed, 113 insertions(+), 20 deletions(-)

diff --git a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/fileListBody.js b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/fileListBody.js
index 3e3d2cfe8c..cdf1e258cf 100644
--- a/products/ASC.Files/Client/src/components/panels/SelectFileDialog/fileListBody.js
+++ b/products/ASC.Files/Client/src/components/panels/SelectFileDialog/fileListBody.js
@@ -1,30 +1,119 @@
-import React from "react";
+import React, { useCallback } from "react";
 import Loader from "@appserver/components/loader";
 import Text from "@appserver/components/text";
 import { useTranslation } from "react-i18next";
-const FileListBody = ({ isLoadingData, filesList, onFileClick }) => {
-  const { t } = useTranslation(["SelectFile", "Common"]);
+import { ReactSVG } from "react-svg";
+import config from "../../../../package.json";
+import Checkbox from "@appserver/components/checkbox";
+import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
+import InfiniteLoader from "react-window-infinite-loader";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { FixedSizeList as List } from "react-window";
 
-  return (
-    <>
-      {!isLoadingData ? (
-        filesList.length > 0 ? (
-          filesList.map((data, index) => (
-            <div className="file-name">
-              <div
-                id={`${index}`}
-                key={`${index}`}
-                className="entry-title"
-                onClick={onFileClick}
-              >
-                {data.title.substring(0, data.title.indexOf(".gz"))}
+const FileListBody = ({
+  isLoadingData,
+  filesList,
+  onSelectFile,
+  isModalView,
+  loadNextPage,
+  hasNextPage,
+  isNextPageLoading,
+}) => {
+  const { t } = useTranslation(["SelectFile", "Common"]);
+  // Every row is loaded except for our loading indicator row.
+  const isItemLoaded = useCallback(
+    (index) => {
+      return !hasNextPage || index < filesList.length;
+    },
+    [hasNextPage, filesList]
+  );
+  // If there are more items to be loaded then add an extra row to hold a loading indicator.
+  const itemCount = hasNextPage ? filesList.length + 1 : filesList.length;
+
+  const loadMoreItems = useCallback(
+    (startIndex) => {
+      if (isNextPageLoading) return;
+      console.log("startIndex", startIndex);
+      const options = {
+        startIndex: startIndex || 0,
+      };
+
+      loadNextPage && loadNextPage(options);
+    },
+    [isNextPageLoading, filesList]
+  );
+
+  const Item = useCallback(
+    ({ index, style }) => {
+      return (
+        <div style={style}>
+          {!isItemLoaded(index) ? (
+            <div key="loader">
+              <Loader
+                type="oval"
+                size="16px"
+                style={{
+                  display: "inline",
+                  marginRight: "10px",
+                }}
+              />
+              <Text as="span">{`${t("Common:LoadingProcessing")} ${t(
+                "Common:LoadingDescription"
+              )}`}</Text>
+            </div>
+          ) : (
+            <div
+              id={index}
+              className="modal-dialog_file-name"
+              onClick={onSelectFile}
+            >
+              <ReactSVG
+                src={`${config.homepage}/images/icons/24/file_archive.svg`}
+                className="select-file-dialog_icon"
+              />
+              <div className="entry-title">
+                {filesList[index] &&
+                  filesList[index].title.substring(
+                    0,
+                    filesList[index].title.indexOf(".gz")
+                  )}
               </div>
               <div className="file-exst">{".gz"}</div>
             </div>
-          ))
-        ) : (
-          <Text>{`${t("Home:EmptyFolderHeader")}`} </Text>
-        )
+          )}
+        </div>
+      );
+    },
+    [filesList]
+  );
+  return (
+    <>
+      {!isLoadingData ? (
+        <AutoSizer>
+          {({ width }) => (
+            <InfiniteLoader
+              //ref={listOptionsRef}
+              isItemLoaded={isItemLoaded}
+              itemCount={itemCount}
+              loadMoreItems={loadMoreItems}
+            >
+              {({ onItemsRendered, ref }) => (
+                <List
+                  className="options_list"
+                  height={320}
+                  itemCount={itemCount}
+                  itemSize={36}
+                  onItemsRendered={onItemsRendered}
+                  ref={ref}
+                  width={width + 8}
+                  outerElementType={CustomScrollbarsVirtualList}
+                >
+                  {Item}
+                </List>
+              )}
+            </InfiniteLoader>
+          )}
+        </AutoSizer>
       ) : (
         <div key="loader" className="panel-loader-wrapper">
           <Loader type="oval" size="16px" className="panel-loader" />
@@ -36,4 +125,8 @@ const FileListBody = ({ isLoadingData, filesList, onFileClick }) => {
     </>
   );
 };
+FileListBody.defaultProps = {
+  isModalView: false,
+  isLoadingData: false,
+};
 export default FileListBody;