Merge pull request #600 from ONLYOFFICE/bugfix/tile-rerender

Client: Fixed re-render tile

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",

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) => {

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,

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);
 

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) => {
         >
           <FilesTileContent
             item={item}
-            sectionWidth={sectionWidth}
+            // sectionWidth={sectionWidth}
             onFilesClick={onFilesClick}
           />
           {badgesComponent}

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<FileTileContextType>({
+  columnCount: null,
+  thumbSize: "",
+});
+
+export const FileTileProvider = ({
+  children,
+  columnCount,
+  thumbSize,
+}: PropsWithChildren<FileTileContextType>) => {
+  const value = useMemo(
+    () => ({ columnCount, thumbSize }),
+    [thumbSize, columnCount],
+  );
+
+  return (
+    <FileTileContext.Provider value={value}>
+      {children}
+    </FileTileContext.Provider>
+  );
+};

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,
+});

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) => {
+import TileContainer from "./sub-components/TileContainer";
-  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,
-});
 
 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,15 +128,13 @@ const FilesTileContainer = ({
           }
           item={item}
           itemIndex={index}
-          sectionWidth={sectionWidth}
-          thumbSize={thumbSize}
-          columnCount={columnCount}
         />
       );
     });
-  }, [filesList, sectionWidth, onSetTileRef, thumbSize, columnCount]);
+  }, [filesList, onSetTileRef, sectionWidth]);
 
   return (
+    <FileTileProvider columnCount={columnCount} thumbSize={thumbSize}>
       <TileContainer
         className="tile-container"
         draggable
@@ -171,6 +144,7 @@ const FilesTileContainer = ({
       >
         {filesListNode}
       </TileContainer>
+    </FileTileProvider>
   );
 };
 

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 <EmptyContainer isEmptyPage={isEmptyPage} />;
 
   return (
-    <Consumer>
-      {(context) =>
-        showEmptyPage ? (
     <>
-            <EmptyContainer
+      {viewAs === "tile" ? (
-              sectionWidth={context.sectionWidth}
+        <FilesTileContainer t={t} />
-              isEmptyPage={isEmptyPage}
-            />
-          </>
-        ) : viewAs === "tile" ? (
-          <>
-            <FilesTileContainer sectionWidth={context.sectionWidth} t={t} />
-          </>
       ) : viewAs === "table" ? (
-          <>
+        <TableView tReady={tReady} />
-            <TableView sectionWidth={context.sectionWidth} tReady={tReady} />
-          </>
       ) : (
-          <>
+        <FilesRowContainer tReady={tReady} />
-            <FilesRowContainer
+      )}
-              sectionWidth={context.sectionWidth}
-              tReady={tReady}
-            />
     </>
-        )
-      }
-    </Consumer>
   );
 };
 

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;
 
-  return (
+  const providerValue = useMemo(
-    isSectionAvailable && (
+    () => ({
-      <Provider
-        value={{
       sectionWidth: sectionSize.width,
       sectionHeight: sectionSize.height,
-        }}
+    }),
-      >
+    [sectionSize.width, sectionSize.height],
+  );
+
+  return (
+    isSectionAvailable && (
+      <Provider value={providerValue}>
         <SectionContainer
           viewAs={viewAs}
           ref={containerRef}

yarn.lock

@@ -2580,6 +2580,7 @@ __metadata:
     "@babel/preset-typescript": "npm:^7.21.0"
     "@codemirror/lang-javascript": "npm:^6.2.2"
     "@svgr/webpack": "npm:^5.5.0"
+    "@types/element-resize-detector": "npm:^1.1.6"
     "@types/eslint": "npm:^8.44.7"
     "@types/he": "npm:^1.2.3"
     "@typescript-eslint/eslint-plugin": "npm:^6.12.0"
@@ -7627,6 +7628,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/element-resize-detector@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "@types/element-resize-detector@npm:1.1.6"
+  checksum: 10/62967c4933ce6dc717608aa498bfbbf2567c3778958203621b1981f5804eb519cf16b8f677d3c92c9b2a9d791191b514dd60298e276fcbf6b1660542209dd299
+  languageName: node
+  linkType: hard
+
 "@types/emscripten@npm:^1.39.6":
   version: 1.39.10
   resolution: "@types/emscripten@npm:1.39.10"