Merge pull request #306 from ONLYOFFICE/bugfix/sdk-presets
Bugfix/sdk presets
This commit is contained in:
commit
021aa08d25
@ -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
120
packages/client/src/components/RoomsSelectorInput/index.js
Normal 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));
|
@ -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}
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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;
|
||||
});
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
`}
|
||||
`;
|
||||
|
||||
|
@ -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();
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user