Web: Client: JavascriptSDK: basic button preview was added in Room selector and File selector
This commit is contained in:
parent
6306c7a710
commit
d5eb4e35b2
@ -146,6 +146,11 @@ const FileSelector = (props) => {
|
||||
return () => destroyFrame();
|
||||
});
|
||||
|
||||
const toggleButtonMode = (e) => {
|
||||
setSelectedElementType(e.target.value);
|
||||
setConfig((config) => ({ ...config, isButtonMode: e.target.value === "button" }));
|
||||
};
|
||||
|
||||
const onChangeTab = () => {
|
||||
loadFrame();
|
||||
};
|
||||
@ -344,7 +349,7 @@ const FileSelector = (props) => {
|
||||
options={elementDisplayOptions}
|
||||
name="elementDisplayInput"
|
||||
selected={selectedElementType}
|
||||
onClick={() => {}}
|
||||
onClick={toggleButtonMode}
|
||||
spacing="8px"
|
||||
/>
|
||||
<CategorySubHeader>{t("CustomizingDisplay")}</CategorySubHeader>
|
||||
|
@ -702,6 +702,7 @@ const Manager = (props) => {
|
||||
key={column.key}
|
||||
isDisabled={column.key === "Name"}
|
||||
onClick={() => deleteSelectedColumn(column)}
|
||||
onClose={() => {}}
|
||||
label={column.label}
|
||||
/>
|
||||
))}
|
||||
|
@ -126,12 +126,30 @@ const RoomSelector = (props) => {
|
||||
return () => destroyFrame();
|
||||
});
|
||||
|
||||
// useEffect(() => {
|
||||
// loadFrame();
|
||||
// }, [config])
|
||||
|
||||
const toggleButtonMode = (e) => {
|
||||
setSelectedElementType(e.target.value);
|
||||
setConfig((config) => ({ ...config, isButtonMode: e.target.value === "button" }));
|
||||
};
|
||||
|
||||
const changeRoomType = (option) => {
|
||||
setRoomType(option);
|
||||
setConfig((config) => ({ ...config, roomType: option.roomType }));
|
||||
};
|
||||
|
||||
const onChangeTab = () => {
|
||||
const onChangeTab = (tab) => {
|
||||
// tab.key === "preview" &&
|
||||
// config?.isButtonMode &&
|
||||
// setConfig((config) => ({ ...config, isButtonMode: true }));
|
||||
// tab.key === "selector-preview" &&
|
||||
// config?.isButtonMode &&
|
||||
// setConfig((config) => ({ ...config, isButtonMode: false }));
|
||||
// tab.key === "code" &&
|
||||
// !!config?.isButtonMode !== (selectedElementType === "button") &&
|
||||
// setConfig((config) => ({ ...config, isButtonMode: true }));
|
||||
loadFrame();
|
||||
};
|
||||
|
||||
@ -221,18 +239,44 @@ const RoomSelector = (props) => {
|
||||
</>
|
||||
);
|
||||
|
||||
const dataTabs = [
|
||||
{
|
||||
key: "preview",
|
||||
title: t("Common:Preview"),
|
||||
content: preview,
|
||||
},
|
||||
{
|
||||
key: "code",
|
||||
title: t("Code"),
|
||||
content: code,
|
||||
},
|
||||
];
|
||||
const buttonPreview = (
|
||||
<Frame width={"700px"} height={config.height} targetId={frameId}>
|
||||
<Box id={frameId}></Box>
|
||||
<RectangleSkeleton width={"700px"} height={config.height} borderRadius="6px" />
|
||||
</Frame>
|
||||
);
|
||||
|
||||
const dataTabs =
|
||||
selectedElementType === "element"
|
||||
? [
|
||||
{
|
||||
key: "preview",
|
||||
title: t("Common:Preview"),
|
||||
content: preview,
|
||||
},
|
||||
{
|
||||
key: "code",
|
||||
title: t("Code"),
|
||||
content: code,
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
key: "preview",
|
||||
title: t("Common:Preview"),
|
||||
content: buttonPreview,
|
||||
},
|
||||
{
|
||||
key: "selector-preview",
|
||||
title: "Selector preview",
|
||||
content: preview,
|
||||
},
|
||||
{
|
||||
key: "code",
|
||||
title: t("Code"),
|
||||
content: code,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<SDKContainer>
|
||||
@ -253,7 +297,7 @@ const RoomSelector = (props) => {
|
||||
options={elementDisplayOptions}
|
||||
name="elementDisplayInput"
|
||||
selected={selectedElementType}
|
||||
onClick={() => {}}
|
||||
onClick={toggleButtonMode}
|
||||
spacing="8px"
|
||||
/>
|
||||
<CategorySubHeader>{t("CustomizingDisplay")}</CategorySubHeader>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useCallback } from "react";
|
||||
import React, { useEffect, useCallback, useRef } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Button } from "@docspace/shared/components/button";
|
||||
@ -14,6 +14,18 @@ import {
|
||||
} from "@docspace/common/utils";
|
||||
import { RoomsType } from "@docspace/common/constants";
|
||||
|
||||
import styled from "styled-components";
|
||||
|
||||
import Logo from "PUBLIC_DIR/images/light_small_logo.react.svg";
|
||||
|
||||
const FlexBox = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const Sdk = ({
|
||||
frameConfig,
|
||||
match,
|
||||
@ -29,6 +41,8 @@ const Sdk = ({
|
||||
getRoomsIcon,
|
||||
getPrimaryLink,
|
||||
}) => {
|
||||
const newWindow = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("message", handleMessage, false);
|
||||
return () => {
|
||||
@ -37,6 +51,15 @@ const Sdk = ({
|
||||
};
|
||||
}, [handleMessage]);
|
||||
|
||||
console.log("new window content ", newWindow.current);
|
||||
|
||||
// useEffect(() => {
|
||||
// frameConfig && newWindow.current && newWindow.current.postMessage(frameConfig, window.location.origin);
|
||||
// return () => {
|
||||
// newWindow.current = null;
|
||||
// };
|
||||
// }, [frameConfig]);
|
||||
|
||||
const callCommand = useCallback(
|
||||
() => frameCallCommand("setConfig"),
|
||||
[frameCallCommand]
|
||||
@ -159,9 +182,36 @@ const Sdk = ({
|
||||
|
||||
let component;
|
||||
|
||||
const openRoomSelector = () => {
|
||||
newWindow.current = window.open(
|
||||
`/sdk/room-selector`,
|
||||
"_blank",
|
||||
`width=${frameConfig?.width ?? 600},height=${frameConfig?.height ?? 400}`,
|
||||
);
|
||||
};
|
||||
const openFileSelector = () => {
|
||||
newWindow.current = window.open(
|
||||
`/sdk/file-selector`,
|
||||
"_blank",
|
||||
`width=${frameConfig?.width ?? 600},height=${frameConfig?.height ?? 400}`,
|
||||
);
|
||||
};
|
||||
|
||||
switch (mode) {
|
||||
case "room-selector":
|
||||
component = (
|
||||
component = frameConfig?.isButtonMode ? (
|
||||
<FlexBox>
|
||||
<Button
|
||||
scale={false}
|
||||
size="small"
|
||||
label={`Select to DocSpace`}
|
||||
isHovered
|
||||
primary
|
||||
onClick={openRoomSelector}
|
||||
icon={<Logo />}
|
||||
/>
|
||||
</FlexBox>
|
||||
) : (
|
||||
<RoomSelector
|
||||
withCancelButton={frameConfig?.showSelectorCancel}
|
||||
withHeader={frameConfig?.showSelectorHeader}
|
||||
@ -172,11 +222,24 @@ const Sdk = ({
|
||||
acceptButtonLabel={frameConfig?.acceptButtonLabel}
|
||||
cancelButtonLabel={frameConfig?.cancelButtonLabel}
|
||||
roomType={frameConfig?.roomType}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "file-selector":
|
||||
component = (
|
||||
component = frameConfig?.isButtonMode ? (
|
||||
<FlexBox>
|
||||
<Button
|
||||
scale={false}
|
||||
size="small"
|
||||
label={`Select to DocSpace`}
|
||||
isHovered
|
||||
primary
|
||||
onClick={openFileSelector}
|
||||
icon={<Logo />}
|
||||
/>
|
||||
</FlexBox>
|
||||
) : (
|
||||
<FilesSelector
|
||||
isPanelVisible={true}
|
||||
embedded={true}
|
||||
|
5
public/images/light_small_logo.react.svg
Normal file
5
public/images/light_small_logo.react.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.02215 15.2038L0.421696 12.1631C-0.140565 11.8977 -0.140565 11.4874 0.421696 11.2461L2.71963 10.1843L6.99771 12.1631C7.55997 12.4286 8.46448 12.4286 9.00229 12.1631L13.2804 10.1843L15.5783 11.2461C16.1406 11.5116 16.1406 11.9218 15.5783 12.1631L8.97785 15.2038C8.46448 15.4451 7.55997 15.4451 7.02215 15.2038Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00076 11.441L0.420411 8.39689C-0.140137 8.13114 -0.140137 7.72042 0.420411 7.47882L2.6626 6.43994L7.00076 8.44521C7.56131 8.71097 8.46306 8.71097 8.99924 8.44521L13.3374 6.43994L15.5796 7.47882C16.1401 7.74458 16.1401 8.1553 15.5796 8.39689L8.99924 11.441C8.43869 11.7068 7.53694 11.7068 7.00076 11.441Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00076 7.71748L0.420411 4.71714C-0.140137 4.45521 -0.140137 4.0504 0.420411 3.81227L7.00076 0.81193C7.56131 0.549995 8.46306 0.549995 8.99924 0.81193L15.5796 3.81227C16.1401 4.07421 16.1401 4.47902 15.5796 4.71714L8.99924 7.71748C8.43869 7.95561 7.53694 7.95561 7.00076 7.71748Z" fill="white"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in New Issue
Block a user