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 && ( - +