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

Web: Client: JavascriptSDK: viewer and editor were fixed

Browse Source
This commit is contained in:
Vladimir Khvan 2023-12-26 17:51:52 +05:00
parent 4a09b3c1cd
commit 2c9c2728d2
4 changed files with 59 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/public/locales/en/JavascriptSdk.json
View File

@ -64,6 +64,7 @@
"SettingUpColumns": "Setting up Columns",
"SetItUp": "Set it up",
"SelectButtonText": "Select Button text",
"SelectFile": "Select a file",
"SortOrder": "Sort order",
"StartSettingUp": "Start setting up",
"Subtitle": "Subtitle",

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

@ -14,6 +14,7 @@ import { objectToGetParams, loadScript } from "@docspace/common/utils";
import { inject, observer } from "mobx-react";
import { FilesSelectorFilterTypes } from "@docspace/common/constants";
import EmptyIframeContainer from "../sub-components/EmptyIframeContainer";
import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
import GetCodeDialog from "../sub-components/GetCodeDialog";
@ -62,13 +63,7 @@ const Editor = (props) => {
width: `${width}${widthDimension.label}`,
height: `${height}${heightDimension.label}`,
frameId: "ds-frame",
init: true,
editorType: "desktop",
// id: {
// id: 4,
// title: "ONLYOFFICE Sample Presentation.pptx",
// fileExst: ".pptx",
// },
init: false,
});
const params = objectToGetParams(config);
@ -116,9 +111,9 @@ const Editor = (props) => {
setHeight(e.target.value);
};
const onChangeFileId = (id) => {
const onChangeFileId = (file) => {
setConfig((config) => {
return { ...config, id };
return { ...config, id: file.id };
});
};
@ -164,8 +159,14 @@ const Editor = (props) => {
const preview = (
<Frame width={width} height={width} targetId={frameId}>
<Box id={frameId}></Box>
<RectangleSkeleton height={height} borderRadius="6px" />
{config.id !== undefined ? (
<>
<Box id={frameId}></Box>
<RectangleSkeleton height={height} borderRadius="6px" />
</>
) : (
<EmptyIframeContainer text={t("SelectFile")} width={width} height={height} />
)}
</Frame>
);

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

@ -15,6 +15,7 @@ import { inject, observer } from "mobx-react";
import ImageEditor from "@docspace/components/ImageEditor";
import { FilesSelectorFilterTypes } from "@docspace/common/constants";
import EmptyIframeContainer from "../sub-components/EmptyIframeContainer";
import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
import GetCodeDialog from "../sub-components/GetCodeDialog";
@ -64,7 +65,7 @@ const Viewer = (props) => {
width: `${width}${widthDimension.label}`,
height: `${height}${heightDimension.label}`,
frameId: "ds-frame",
init: true,
init: false,
});
const params = objectToGetParams(config);
@ -112,9 +113,9 @@ const Viewer = (props) => {
setHeight(e.target.value);
};
const onChangeFileId = (id) => {
const onChangeFileId = (file) => {
setConfig((config) => {
return { ...config, id };
return { ...config, id: file.id };
});
};
@ -160,8 +161,14 @@ const Viewer = (props) => {
const preview = (
<Frame width={width} height={width} targetId={frameId}>
<Box id={frameId}></Box>
<RectangleSkeleton height={height} borderRadius="6px" />
{config.id !== undefined ? (
<>
<Box id={frameId}></Box>
<RectangleSkeleton height={height} borderRadius="6px" />
</>
) : (
<EmptyIframeContainer text={t("SelectFile")} width={width} height={height} />
)}
</Frame>
);

34
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/EmptyIframeContainer.js Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import styled from "styled-components";
import RectangleSkeleton from "@docspace/components/skeletons/rectangle";
import { Base } from "@docspace/components/themes";
const StyledContainer = styled.div`
width: ${(props) => props.width + "%"};
height: ${(props) => props.height + "px"};
display: flex;
justify-content: center;
align-items: center;
.emptyIframeText {
position: absolute;
font-size: 44px;
font-weight: 700;
line-height: 59.92px;
color: ${(props) => props.theme.text.emailColor};
}
`;
StyledContainer.defaultProps = { theme: Base };
const EmptyIframeContainer = ({ text, width, height }) => {
return (
<StyledContainer width={width} height={height}>
<RectangleSkeleton height={height} borderRadius="6px" />
<span className="emptyIframeText">{text}</span>
</StyledContainer>
);
};
export default EmptyIframeContainer;