Client: Fixed re-render tile
This commit is contained in:
parent
2fb779993a
commit
5ef2307079
@ -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",
|
||||
|
@ -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) => {
|
||||
|
@ -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,
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
@ -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,
|
||||
});
|
@ -32,43 +32,16 @@ import React, {
|
||||
useMemo,
|
||||
} from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import elementResizeDetectorMaker from "element-resize-detector";
|
||||
import TileContainer from "./sub-components/TileContainer";
|
||||
|
||||
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,
|
||||
}) => {
|
||||
@ -139,10 +112,7 @@ const FilesTileContainer = ({
|
||||
}
|
||||
item={item}
|
||||
itemIndex={index}
|
||||
sectionWidth={sectionWidth}
|
||||
selectableRef={onSetTileRef}
|
||||
thumbSize={thumbSize}
|
||||
columnCount={columnCount}
|
||||
withRef={true}
|
||||
/>
|
||||
) : (
|
||||
@ -153,24 +123,23 @@ const FilesTileContainer = ({
|
||||
}
|
||||
item={item}
|
||||
itemIndex={index}
|
||||
sectionWidth={sectionWidth}
|
||||
thumbSize={thumbSize}
|
||||
columnCount={columnCount}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}, [filesList, sectionWidth, onSetTileRef, thumbSize, columnCount]);
|
||||
}, [filesList, onSetTileRef]);
|
||||
|
||||
return (
|
||||
<TileContainer
|
||||
className="tile-container"
|
||||
draggable
|
||||
useReactWindow={!withPaging}
|
||||
headingFolders={t("Translations:Folders")}
|
||||
headingFiles={t("Translations:Files")}
|
||||
>
|
||||
{filesListNode}
|
||||
</TileContainer>
|
||||
<FileTileProvider columnCount={columnCount} thumbSize={thumbSize}>
|
||||
<TileContainer
|
||||
className="tile-container"
|
||||
draggable
|
||||
useReactWindow={!withPaging}
|
||||
headingFolders={t("Translations:Folders")}
|
||||
headingFiles={t("Translations:Files")}
|
||||
>
|
||||
{filesListNode}
|
||||
</TileContainer>
|
||||
</FileTileProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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
|
||||
sectionWidth={context.sectionWidth}
|
||||
isEmptyPage={isEmptyPage}
|
||||
/>
|
||||
</>
|
||||
) : viewAs === "tile" ? (
|
||||
<>
|
||||
<FilesTileContainer sectionWidth={context.sectionWidth} t={t} />
|
||||
</>
|
||||
) : viewAs === "table" ? (
|
||||
<>
|
||||
<TableView sectionWidth={context.sectionWidth} tReady={tReady} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FilesRowContainer
|
||||
sectionWidth={context.sectionWidth}
|
||||
tReady={tReady}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Consumer>
|
||||
<>
|
||||
{viewAs === "tile" ? (
|
||||
<FilesTileContainer t={t} />
|
||||
) : viewAs === "table" ? (
|
||||
<TableView tReady={tReady} />
|
||||
) : (
|
||||
<FilesRowContainer tReady={tReady} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user