Web: Files: SelectFileDialog: Added infinity scroll for files list.
This commit is contained in:
parent
3fe118fc3d
commit
688de9106b
@ -1,30 +1,119 @@
|
|||||||
import React from "react";
|
import React, { useCallback } from "react";
|
||||||
import Loader from "@appserver/components/loader";
|
import Loader from "@appserver/components/loader";
|
||||||
import Text from "@appserver/components/text";
|
import Text from "@appserver/components/text";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
const FileListBody = ({ isLoadingData, filesList, onFileClick }) => {
|
import { ReactSVG } from "react-svg";
|
||||||
const { t } = useTranslation(["SelectFile", "Common"]);
|
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";
|
||||||
|
|
||||||
|
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 (
|
return (
|
||||||
<>
|
<div style={style}>
|
||||||
{!isLoadingData ? (
|
{!isItemLoaded(index) ? (
|
||||||
filesList.length > 0 ? (
|
<div key="loader">
|
||||||
filesList.map((data, index) => (
|
<Loader
|
||||||
<div className="file-name">
|
type="oval"
|
||||||
|
size="16px"
|
||||||
|
style={{
|
||||||
|
display: "inline",
|
||||||
|
marginRight: "10px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Text as="span">{`${t("Common:LoadingProcessing")} ${t(
|
||||||
|
"Common:LoadingDescription"
|
||||||
|
)}`}</Text>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
<div
|
<div
|
||||||
id={`${index}`}
|
id={index}
|
||||||
key={`${index}`}
|
className="modal-dialog_file-name"
|
||||||
className="entry-title"
|
onClick={onSelectFile}
|
||||||
onClick={onFileClick}
|
|
||||||
>
|
>
|
||||||
{data.title.substring(0, data.title.indexOf(".gz"))}
|
<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>
|
||||||
<div className="file-exst">{".gz"}</div>
|
<div className="file-exst">{".gz"}</div>
|
||||||
</div>
|
</div>
|
||||||
))
|
)}
|
||||||
) : (
|
</div>
|
||||||
<Text>{`${t("Home:EmptyFolderHeader")}`} </Text>
|
);
|
||||||
)
|
},
|
||||||
|
[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">
|
<div key="loader" className="panel-loader-wrapper">
|
||||||
<Loader type="oval" size="16px" className="panel-loader" />
|
<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;
|
export default FileListBody;
|
||||||
|
Loading…
Reference in New Issue
Block a user