Web: Client: JavascriptSDK: viewer and editor were fixed
This commit is contained in:
parent
4a09b3c1cd
commit
2c9c2728d2
@ -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",
|
||||
|
@ -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}>
|
||||
{config.id !== undefined ? (
|
||||
<>
|
||||
<Box id={frameId}></Box>
|
||||
<RectangleSkeleton height={height} borderRadius="6px" />
|
||||
</>
|
||||
) : (
|
||||
<EmptyIframeContainer text={t("SelectFile")} width={width} height={height} />
|
||||
)}
|
||||
</Frame>
|
||||
);
|
||||
|
||||
|
@ -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}>
|
||||
{config.id !== undefined ? (
|
||||
<>
|
||||
<Box id={frameId}></Box>
|
||||
<RectangleSkeleton height={height} borderRadius="6px" />
|
||||
</>
|
||||
) : (
|
||||
<EmptyIframeContainer text={t("SelectFile")} width={width} height={height} />
|
||||
)}
|
||||
</Frame>
|
||||
);
|
||||
|
||||
|
@ -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;
|
Loading…
Reference in New Issue
Block a user