diff --git a/packages/client/package.json b/packages/client/package.json
index e68d87aa19..a158bf611b 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -73,6 +73,7 @@
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0",
"@svgr/webpack": "^5.5.0",
+ "@types/element-resize-detector": "^1.1.6",
"@types/eslint": "^8.44.7",
"@types/he": "^1.2.3",
"@typescript-eslint/eslint-plugin": "^6.12.0",
diff --git a/packages/client/src/components/EmptyContainer/index.js b/packages/client/src/components/EmptyContainer/index.js
index 3abb285a6b..bbddb8e054 100644
--- a/packages/client/src/components/EmptyContainer/index.js
+++ b/packages/client/src/components/EmptyContainer/index.js
@@ -23,10 +23,12 @@
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+import { useContext } from "react";
import { observer, inject } from "mobx-react";
//import { useLocation } from "react-router-dom";
+import { Context } from "@docspace/shared/utils";
import { Events, FileExtensions } from "@docspace/shared/enums";
import RootFolderContainer from "./RootFolderContainer";
@@ -49,7 +51,6 @@ const EmptyContainer = ({
theme,
type,
- sectionWidth,
isRoomNotFoundOrMoved,
isGracePeriod,
setQuotaWarningDialogVisible,
@@ -60,6 +61,8 @@ const EmptyContainer = ({
}) => {
//const location = useLocation();
+ const { sectionWidth } = useContext(Context);
+
linkStyles.color = theme.filesEmptyContainer.linkColor;
const onCreate = (e) => {
diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
index b5f91a25fc..c67ef43229 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js
@@ -25,12 +25,13 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled from "styled-components";
-import { useMemo } from "react";
+import { useMemo, useContext } from "react";
import { inject, observer } from "mobx-react";
import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
import { Base } from "@docspace/shared/themes";
+import { Context } from "@docspace/shared/utils";
import { RowContainer } from "@docspace/shared/components/row-container";
import SimpleFilesRow from "./SimpleFilesRow";
@@ -62,7 +63,6 @@ StyledRowContainer.defaultProps = { theme: Base };
const FilesRowContainer = ({
filesList,
- sectionWidth,
viewAs,
setViewAs,
infoPanelVisible,
@@ -75,6 +75,8 @@ const FilesRowContainer = ({
highlightFile,
currentDeviceType,
}) => {
+ const { sectionWidth } = useContext(Context);
+
useViewEffect({
view: viewAs,
setView: setViewAs,
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
index 9a16198ff7..e93e9feb23 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
@@ -28,13 +28,20 @@ import { inject, observer } from "mobx-react";
import styled, { css } from "styled-components";
import { useNavigate, useLocation } from "react-router-dom";
import elementResizeDetectorMaker from "element-resize-detector";
-import React, { useEffect, useRef, useCallback, useMemo } from "react";
+import React, {
+ useEffect,
+ useRef,
+ useCallback,
+ useMemo,
+ useContext,
+} from "react";
import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
import { Base } from "@docspace/shared/themes";
import { TableContainer } from "@docspace/shared/components/table";
import { TableBody } from "@docspace/shared/components/table";
+import { Context } from "@docspace/shared/utils";
import TableRow from "./TableRow";
import TableHeader from "./TableHeader";
@@ -121,7 +128,6 @@ const elementResizeDetector = elementResizeDetectorMaker({
const Table = ({
filesList,
- sectionWidth,
viewAs,
setViewAs,
setFirsElemChecked,
@@ -142,6 +148,8 @@ const Table = ({
const [tagCount, setTagCount] = React.useState(null);
const [hideColumns, setHideColumns] = React.useState(false);
+ const { sectionWidth } = useContext(Context);
+
const ref = useRef(null);
const tagRef = useRef(null);
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js
index 266a0883f7..dd5bed3a46 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js
@@ -24,14 +24,17 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-import React, { useEffect } from "react";
+import React, { useEffect, useContext } from "react";
import styled from "styled-components";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
+
import DragAndDrop from "@docspace/shared/components/drag-and-drop/DragAndDrop";
+// import { Context } from "@docspace/shared/utils";
import Tile from "./sub-components/Tile";
import FilesTileContent from "./FilesTileContent";
+import { FileTileContext } from "./FileTile.provider";
import withFileActions from "../../../../../HOCs/withFileActions";
import withQuickButtons from "../../../../../HOCs/withQuickButtons";
@@ -45,7 +48,6 @@ const StyledDragAndDrop = styled(DragAndDrop)`
const FileTile = (props) => {
const {
item,
- sectionWidth,
dragging,
onContentFileSelect,
fileContextClick,
@@ -70,12 +72,12 @@ const FileTile = (props) => {
t,
getContextModel,
onHideContextMenu,
- thumbSize,
+ // thumbSize,
setSelection,
id,
onSelectTag,
onSelectOption,
- columnCount,
+ // columnCount,
isRooms,
withCtrlSelect,
withShiftSelect,
@@ -86,6 +88,10 @@ const FileTile = (props) => {
badgeUrl,
} = props;
+ // const { sectionWidth } = useContext(Context);
+
+ const { columnCount, thumbSize } = useContext(FileTileContext);
+
const temporaryExtension =
item.id === -1 ? `.${item.fileExst}` : item.fileExst;
@@ -145,7 +151,7 @@ const FileTile = (props) => {
: thumbnailUrl
}
element={element}
- sectionWidth={sectionWidth}
+ // sectionWidth={sectionWidth}
contentElement={quickButtonsComponent}
onSelect={onContentFileSelect}
tileContextClick={fileContextClick}
@@ -177,7 +183,7 @@ const FileTile = (props) => {
>
{badgesComponent}
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.provider.tsx b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.provider.tsx
new file mode 100644
index 0000000000..385d23f3c5
--- /dev/null
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.provider.tsx
@@ -0,0 +1,28 @@
+import { createContext, PropsWithChildren, useMemo } from "react";
+
+type FileTileContextType = {
+ thumbSize: string;
+ columnCount: null | number;
+};
+
+export const FileTileContext = createContext({
+ columnCount: null,
+ thumbSize: "",
+});
+
+export const FileTileProvider = ({
+ children,
+ columnCount,
+ thumbSize,
+}: PropsWithChildren) => {
+ const value = useMemo(
+ () => ({ columnCount, thumbSize }),
+ [thumbSize, columnCount],
+ );
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.utils.ts b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.utils.ts
new file mode 100644
index 0000000000..41d1d789da
--- /dev/null
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.utils.ts
@@ -0,0 +1,30 @@
+import elementResizeDetectorMaker from "element-resize-detector";
+
+export const getThumbSize = (width: number): string => {
+ let imgWidth = 216;
+
+ if (width >= 240 && width < 264) {
+ imgWidth = 240;
+ } else if (width >= 264 && width < 288) {
+ imgWidth = 264;
+ } else if (width >= 288 && width < 312) {
+ imgWidth = 288;
+ } else if (width >= 312 && width < 336) {
+ imgWidth = 312;
+ } else if (width >= 336 && width < 360) {
+ imgWidth = 336;
+ } else if (width >= 360 && width < 400) {
+ imgWidth = 360;
+ } else if (width >= 400 && width < 440) {
+ imgWidth = 400;
+ } else if (width >= 440) {
+ imgWidth = 440;
+ }
+
+ return `${imgWidth}x156`;
+};
+
+export const elementResizeDetector = elementResizeDetectorMaker({
+ strategy: "scroll",
+ callOnAdd: false,
+});
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js
index 06687e5737..1fd9ef374c 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContainer.js
@@ -30,45 +30,21 @@ import React, {
useCallback,
useState,
useMemo,
+ useContext,
} from "react";
import { inject, observer } from "mobx-react";
-import elementResizeDetectorMaker from "element-resize-detector";
-import TileContainer from "./sub-components/TileContainer";
+
+import { Context } from "@docspace/shared/utils";
+
import FileTile from "./FileTile";
+import { FileTileProvider } from "./FileTile.provider";
+import { elementResizeDetector, getThumbSize } from "./FileTile.utils";
-const getThumbSize = (width) => {
- let imgWidth = 216;
-
- if (width >= 240 && width < 264) {
- imgWidth = 240;
- } else if (width >= 264 && width < 288) {
- imgWidth = 264;
- } else if (width >= 288 && width < 312) {
- imgWidth = 288;
- } else if (width >= 312 && width < 336) {
- imgWidth = 312;
- } else if (width >= 336 && width < 360) {
- imgWidth = 336;
- } else if (width >= 360 && width < 400) {
- imgWidth = 360;
- } else if (width >= 400 && width < 440) {
- imgWidth = 400;
- } else if (width >= 440) {
- imgWidth = 440;
- }
-
- return `${imgWidth}x156`;
-};
-
-const elementResizeDetector = elementResizeDetectorMaker({
- strategy: "scroll",
- callOnAdd: false,
-});
+import TileContainer from "./sub-components/TileContainer";
const FilesTileContainer = ({
filesList,
t,
- sectionWidth,
withPaging,
thumbnails1280x720,
}) => {
@@ -78,6 +54,8 @@ const FilesTileContainer = ({
const [thumbSize, setThumbSize] = useState("");
const [columnCount, setColumnCount] = useState(null);
+ const { sectionWidth } = useContext(Context);
+
useEffect(() => {
return () => {
isMountedRef.current = false;
@@ -139,10 +117,7 @@ const FilesTileContainer = ({
}
item={item}
itemIndex={index}
- sectionWidth={sectionWidth}
selectableRef={onSetTileRef}
- thumbSize={thumbSize}
- columnCount={columnCount}
withRef={true}
/>
) : (
@@ -153,24 +128,23 @@ const FilesTileContainer = ({
}
item={item}
itemIndex={index}
- sectionWidth={sectionWidth}
- thumbSize={thumbSize}
- columnCount={columnCount}
/>
);
});
- }, [filesList, sectionWidth, onSetTileRef, thumbSize, columnCount]);
+ }, [filesList, onSetTileRef, sectionWidth]);
return (
-
- {filesListNode}
-
+
+
+ {filesListNode}
+
+
);
};
diff --git a/packages/client/src/pages/Home/Section/Body/index.js b/packages/client/src/pages/Home/Section/Body/index.js
index 0b1bb063ae..0501b6d0fe 100644
--- a/packages/client/src/pages/Home/Section/Body/index.js
+++ b/packages/client/src/pages/Home/Section/Body/index.js
@@ -26,9 +26,8 @@
import React, { useEffect } from "react";
import { withTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-
import { observer, inject } from "mobx-react";
+
import FilesRowContainer from "./RowsView/FilesRowContainer";
import FilesTileContainer from "./TilesView/FilesTileContainer";
import EmptyContainer from "../../../../components/EmptyContainer";
@@ -37,7 +36,6 @@ import TableView from "./TableView/TableContainer";
import withHotkeys from "../../../../HOCs/withHotkeys";
import {
clearEdgeScrollingTimer,
- Consumer,
isMobile,
isTablet,
onEdgeScrolling,
@@ -307,36 +305,18 @@ const SectionBodyContent = (props) => {
if (isEmptyFilesList && movingInProgress) return <>>;
- const showEmptyPage = isEmptyFilesList;
+ if (isEmptyFilesList) return ;
return (
-
- {(context) =>
- showEmptyPage ? (
- <>
-
- >
- ) : viewAs === "tile" ? (
- <>
-
- >
- ) : viewAs === "table" ? (
- <>
-
- >
- ) : (
- <>
-
- >
- )
- }
-
+ <>
+ {viewAs === "tile" ? (
+
+ ) : viewAs === "table" ? (
+
+ ) : (
+
+ )}
+ >
);
};
diff --git a/packages/shared/components/section/index.tsx b/packages/shared/components/section/index.tsx
index 3bd59c294d..49a6b55a25 100644
--- a/packages/shared/components/section/index.tsx
+++ b/packages/shared/components/section/index.tsx
@@ -25,7 +25,7 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
/* eslint-disable @typescript-eslint/no-unused-vars */
-import React from "react";
+import React, { useEffect, useMemo } from "react";
import { Provider } from "../../utils";
import { DeviceType } from "../../enums";
@@ -153,6 +153,16 @@ const Section = (props: SectionProps) => {
isSectionBodyAvailable ||
isSectionPagingAvailable;
+ useEffect(() => {
+ if (!containerRef.current) return;
+
+ const computedStyles = window.getComputedStyle(containerRef.current, null);
+ const width = +computedStyles.getPropertyValue("width").replace("px", "");
+ const height = +computedStyles.getPropertyValue("height").replace("px", "");
+
+ setSectionSize(() => ({ width, height }));
+ }, [isInfoPanelVisible]);
+
const onResize = React.useCallback(() => {
if (timerRef.current) clearTimeout(timerRef.current);
@@ -188,14 +198,17 @@ const Section = (props: SectionProps) => {
const showTwoProgress = showPrimaryProgressBar && showSecondaryProgressBar;
+ const providerValue = useMemo(
+ () => ({
+ sectionWidth: sectionSize.width,
+ sectionHeight: sectionSize.height,
+ }),
+ [sectionSize.width, sectionSize.height],
+ );
+
return (
isSectionAvailable && (
-
+