IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Client:Add useMemo.

Browse Source
This commit is contained in:
Vlada Gazizova 2023-02-14 10:54:50 +03:00
parent 1d0c9640d3
commit 509a1b9d9e
1 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js
View File

@ -1,4 +1,10 @@
import React, { useEffect, useRef, useCallback, useState } from "react";
import React, {
useEffect,
useRef,
useCallback,
useState,
useMemo,
} from "react";
import { inject, observer } from "mobx-react";
import elementResizeDetectorMaker from "element-resize-detector";
import TileContainer from "./sub-components/TileContainer";
@ -87,6 +93,38 @@ const FilesTileContainer = ({ filesList, t, sectionWidth, withPaging }) => {
}
}, []);
const filesListNode = useMemo(() => {
return filesList.map((item, index) => {
return index % 11 == 0 ? (
<FileTile
id={`${item?.isFolder ? "folder" : "file"}_${item.id}`}
key={
item?.version ? `${item.id}_${item.version}` : `${item.id}_${index}`
}
item={item}
itemIndex={index}
sectionWidth={sectionWidth}
selectableRef={onSetTileRef}
thumbSize={thumbSize}
columnCount={columnCount}
withRef={true}
/>
) : (
<FileTile
id={`${item?.isFolder ? "folder" : "file"}_${item.id}`}
key={
item?.version ? `${item.id}_${item.version}` : `${item.id}_${index}`
}
item={item}
itemIndex={index}
sectionWidth={sectionWidth}
thumbSize={thumbSize}
columnCount={columnCount}
/>
);
});
}, [filesList, sectionWidth, onSetTileRef, thumbSize, columnCount]);
return (
<TileContainer
className="tile-container"
@ -95,39 +133,7 @@ const FilesTileContainer = ({ filesList, t, sectionWidth, withPaging }) => {
headingFolders={t("Translations:Folders")}
headingFiles={t("Translations:Files")}
>
{filesList.map((item, index) => {
return index % 11 == 0 ? (
<FileTile
id={`${item?.isFolder ? "folder" : "file"}_${item.id}`}
key={
item?.version
? `${item.id}_${item.version}`
: `${item.id}_${index}`
}
item={item}
itemIndex={index}
sectionWidth={sectionWidth}
selectableRef={onSetTileRef}
thumbSize={thumbSize}
columnCount={columnCount}
withRef={true}
/>
) : (
<FileTile
id={`${item?.isFolder ? "folder" : "file"}_${item.id}`}
key={
item?.version
? `${item.id}_${item.version}`
: `${item.id}_${index}`
}
item={item}
itemIndex={index}
sectionWidth={sectionWidth}
thumbSize={thumbSize}
columnCount={columnCount}
/>
);
})}
{filesListNode}
</TileContainer>
);
};