IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #306 from ONLYOFFICE/bugfix/sdk-presets

Browse Source 
Bugfix/sdk presets
This commit is contained in:
Alexey Safronov 2024-03-12 12:37:16 +04:00 committed by GitHub
commit 021aa08d25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 231 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/client/src/components/RoomsSelectorInput/StyledComponents.js Normal file
View File

@ -0,0 +1,8 @@
import styled from "styled-components";
const StyledBodyWrapper = styled.div`
margin: 16px 0;
max-width: ${(props) => (props.maxWidth ? props.maxWidth : "350px")};
`;
export { StyledBodyWrapper };

120
packages/client/src/components/RoomsSelectorInput/index.js Normal file
View File

@ -0,0 +1,120 @@
import { useState } from "react";
import { observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import { FileInput } from "@docspace/shared/components/file-input";
import RoomSelector from "@docspace/shared/selectors/Room";
import { StyledBodyWrapper } from "./StyledComponents";
import { Aside } from "@docspace/shared/components/aside";
import { Backdrop } from "@docspace/shared/components/backdrop";
const RoomsSelectorInput = (props) => {
const {
t,
isDisabled,
isError,
maxWidth,
id,
className,
style,
isDocumentIcon,
isLoading,
roomType,
onCancel,
withCancelButton,
cancelButtonLabel,
excludeItems,
withSearch,
isMultiSelect,
submitButtonLabel,
onSubmit,
withHeader,
headerProps,
setIsDataReady,
} = props;
const [isPanelVisible, setIsPanelVisible] = useState(false);
const BasePath = `DocSpace / ${t("Common:Rooms")} `;
const [path, setPath] = useState(BasePath);
const handleOnSubmit = (rooms) => {
setPath(BasePath + "/ " + rooms[0].label);
onSubmit(rooms);
setIsPanelVisible(false);
};
const handleOnCancel = (e) => {
onCancel(e);
setIsPanelVisible(false);
};
const onClick = () => {
setIsPanelVisible(true);
};
const onClose = () => {
setIsPanelVisible(false);
};
const SelectorBody = (
<RoomSelector
id={id}
style={style}
onCancel={handleOnCancel}
withCancelButton={withCancelButton}
cancelButtonLabel={cancelButtonLabel}
excludeItems={excludeItems}
withSearch={withSearch}
isMultiSelect={isMultiSelect}
submitButtonLabel={submitButtonLabel}
onSubmit={handleOnSubmit}
withHeader={withHeader}
headerProps={headerProps}
setIsDataReady={setIsDataReady}
roomType={roomType}
/>
);
return (
<StyledBodyWrapper maxWidth={maxWidth} className={className}>
<FileInput
onClick={onClick}
fromStorage
path={path}
isLoading={isLoading}
isDisabled={isDisabled || isLoading}
hasError={isError}
scale
isDocumentIcon={isDocumentIcon}
/>
<Backdrop
visible={isPanelVisible}
isAside
withBackground
zIndex={309}
onClick={onClose}
/>
<Aside
visible={isPanelVisible}
withoutBodyScroll
zIndex={310}
onClose={onClose}
>
{SelectorBody}
</Aside>
</StyledBodyWrapper>
);
};
export default withTranslation(["Common"])(observer(RoomsSelectorInput));

36
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect, useRef, useState } from "react";
import { withTranslation } from "react-i18next";
import styled, { css } from "styled-components";
import { useNavigate } from "react-router-dom";
@ -40,6 +40,11 @@ const SDKContainer = styled(Box)`
css`
width: 100%;
`}
.presets-flex {
display: flex;
flex-direction: column;
}
`;
const CategoryHeader = styled.div`
@ -88,6 +93,16 @@ const PresetsContainer = styled.div`
const PortalIntegration = (props) => {
const { t, setDocumentTitle, currentColorScheme, sdkLink, theme } = props;
const isSmall = useRef(
(() => {
const content = document.querySelector(".section-wrapper-content");
const rect = content.getBoundingClientRect();
return rect.width <= 600;
})(),
);
const [isFlex, setIsFlex] = useState(isSmall.current);
setDocumentTitle(t("JavascriptSdk"));
const navigate = useNavigate();
@ -145,6 +160,23 @@ const PortalIntegration = (props) => {
},
];
const onResize = (entries) => {
const belowThreshold = entries[0].contentRect.width <= 600;
if (belowThreshold !== isSmall.current) {
isSmall.current = belowThreshold;
setIsFlex(belowThreshold);
}
};
useEffect(() => {
const observer = new ResizeObserver(onResize);
const content = document.querySelector(".section-wrapper-content");
observer.observe(content);
return () => {
observer.unobserve(content);
};
}, []);
return (
<SDKContainer>
<CategoryDescription>
@ -164,7 +196,7 @@ const PortalIntegration = (props) => {
<Text lineHeight="20px" color={theme.sdkPresets.secondaryColor}>
{t("InitializeSDK")}
</Text>
<PresetsContainer>
<PresetsContainer className={`${isFlex ? "presets-flex" : ""}`}>
{presetsData.map((data) => (
<PresetTile
t={t}

4
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/DocSpace.js
View File

@ -101,7 +101,9 @@ const DocSpace = (props) => {
useEffect(() => {
const scroll = document.getElementsByClassName("section-scroll")[0];
scroll.scrollTop = 0;
if (scroll) {
scroll.scrollTop = 0;
}
loadFrame();
return () => destroyFrame();
});

4
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js
View File

@ -90,7 +90,9 @@ const Editor = (props) => {
useEffect(() => {
const scroll = document.getElementsByClassName("section-scroll")[0];
scroll.scrollTop = 0;
if (scroll) {
scroll.scrollTop = 0;
}
loadFrame();
return () => destroyFrame();
});

4
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js
View File

@ -181,7 +181,9 @@ const FileSelector = (props) => {
useEffect(() => {
const scroll = document.getElementsByClassName("section-scroll")[0];
scroll.scrollTop = 0;
if (scroll) {
scroll.scrollTop = 0;
}
loadFrame();
return () => destroyFrame();
});

4
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
View File

@ -313,7 +313,9 @@ const Manager = (props) => {
useEffect(() => {
const scroll = document.getElementsByClassName("section-scroll")[0];
scroll.scrollTop = 0;
if (scroll) {
scroll.scrollTop = 0;
}
loadFrame();
return () => destroyFrame();
});

4
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js
View File

@ -155,7 +155,9 @@ const RoomSelector = (props) => {
useEffect(() => {
const scroll = document.getElementsByClassName("section-scroll")[0];
scroll.scrollTop = 0;
if (scroll) {
scroll.scrollTop = 0;
}
loadFrame();
return destroyFrame;
});

85
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js
View File

@ -8,7 +8,7 @@ import { Label } from "@docspace/shared/components/label";
import { Text } from "@docspace/shared/components/text";
import { ComboBox } from "@docspace/shared/components/combobox";
import { TabsContainer } from "@docspace/shared/components/tabs-container";
import FilesSelectorInput from "SRC_DIR/components/FilesSelectorInput";
import RoomsSelectorInput from "SRC_DIR/components/RoomsSelectorInput";
import { objectToGetParams, loadScript } from "@docspace/shared/utils/common";
import { inject, observer } from "mobx-react";
@ -27,6 +27,8 @@ import { useNavigate } from "react-router-dom";
import { Link } from "@docspace/shared/components/link";
import FilesFilter from "@docspace/shared/api/files/filter";
import { RoomsType } from "@docspace/shared/enums";
import TitleUrl from "PUBLIC_DIR/images/sdk-presets_title.react.svg?url";
import SearchUrl from "PUBLIC_DIR/images/sdk-presets_search.react.svg?url";
@ -131,7 +133,9 @@ const SimpleRoom = (props) => {
useEffect(() => {
const scroll = document.getElementsByClassName("section-scroll")[0];
scroll.scrollTop = 0;
if (scroll) {
scroll.scrollTop = 0;
}
loadFrame();
return () => destroyFrame();
});
@ -156,46 +160,48 @@ const SimpleRoom = (props) => {
setHeight(e.target.value);
};
const onChangeFolderId = async (id, publicInPath) => {
let newConfig = { id, requestToken: null, rootPath: "/rooms/shared/" };
const onChangeFolderId = async (rooms) => {
if (!!publicInPath) {
const links = await fetchExternalLinks(publicInPath.id);
const publicRoom = rooms[0];
if (links.length > 1) {
const linksOptions = links.map((link) => {
const { id, title, requestToken } = link.sharedTo;
const linkSettings = [];
let newConfig = {
id: publicRoom.id,
requestToken: null,
rootPath: "/rooms/shared/",
};
if ("password" in link.sharedTo) {
linkSettings.push("password");
}
if ("expirationDate" in link.sharedTo) {
linkSettings.push("expirationDate");
}
if (link.sharedTo.denyDownload) {
linkSettings.push("denyDownload");
}
const links = await fetchExternalLinks(publicRoom.id);
return {
key: id,
label: title,
requestToken: requestToken,
settings: linkSettings,
};
});
if (links.length > 1) {
const linksOptions = links.map((link) => {
const { id, title, requestToken } = link.sharedTo;
const linkSettings = [];
setSelectedLink(linksOptions[0]);
setSharedLinks(linksOptions);
}
if ("password" in link.sharedTo) {
linkSettings.push("password");
}
if ("expirationDate" in link.sharedTo) {
linkSettings.push("expirationDate");
}
if (link.sharedTo.denyDownload) {
linkSettings.push("denyDownload");
}
newConfig.requestToken = links[0].sharedTo?.requestToken;
newConfig.rootPath = "/rooms/share";
} else {
setSelectedLink(null);
setSharedLinks(null);
return {
key: id,
label: title,
requestToken: requestToken,
settings: linkSettings,
};
});
setSelectedLink(linksOptions[0]);
setSharedLinks(linksOptions);
}
newConfig.requestToken = links[0].sharedTo?.requestToken;
newConfig.rootPath = "/rooms/share";
setConfig((config) => {
return { ...config, ...newConfig, init: true };
});
@ -348,10 +354,13 @@ const SimpleRoom = (props) => {
/>
</LabelGroup>
<FilesSelectorInputWrapper>
<FilesSelectorInput
onSelectFolder={onChangeFolderId}
isSelect
isRoomsOnly
<RoomsSelectorInput
roomType={RoomsType.PublicRoom}
withSearch
withCancelButton
onSubmit={onChangeFolderId}
withHeader
headerProps={{ headerLabel: t("Common:SelectAction") }}
/>
</FilesSelectorInputWrapper>
</ControlsGroup>

6
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/StyledPresets.js
View File

@ -198,12 +198,14 @@ export const Container = styled(Box)`
gap: 48px;
@media ${tablet} {
flex-direction: column;
flex-direction: column-reverse;
gap: 48px;
}
${isMobile() &&
css`
flex-direction: column;
flex-direction: column-reverse;
gap: 48px;
`}
`;

4
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js
View File

@ -97,7 +97,9 @@ const Viewer = (props) => {
useEffect(() => {
const scroll = document.getElementsByClassName("section-scroll")[0];
scroll.scrollTop = 0;
if (scroll) {
scroll.scrollTop = 0;
}
loadFrame();
return () => destroyFrame();
});