Merge branch 'hotfix/v2.6.1' of https://github.com/ONLYOFFICE/DocSpace-client into hotfix/v2.6.1
This commit is contained in:
commit
56ad45ed41
@ -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;
|
||||
|
||||
@ -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}
|
||||
|
@ -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,
|
||||
});
|
@ -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 (
|
||||
<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} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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 && (
|
||||
<Provider
|
||||
value={{
|
||||
sectionWidth: sectionSize.width,
|
||||
sectionHeight: sectionSize.height,
|
||||
}}
|
||||
>
|
||||
<Provider value={providerValue}>
|
||||
<SectionContainer
|
||||
viewAs={viewAs}
|
||||
ref={containerRef}
|
||||
|
@ -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