SDK: Added events callback from config
This commit is contained in:
parent
bd7b79c6b5
commit
37f0bf9920
@ -1,17 +1,58 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useCallback } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import Button from "@docspace/components/button";
|
||||
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
||||
import RoomSelector from "../../components/RoomSelector";
|
||||
import SelectFolderDialog from "../../components/panels/SelectFolderDialog";
|
||||
import { frameCallEvent } from "@docspace/common/utils";
|
||||
|
||||
const Selector = ({ theme }) => {
|
||||
return <RoomSelector />;
|
||||
const Selector = (props) => {
|
||||
useEffect(() => {
|
||||
window.addEventListener("message", handleMessage, false);
|
||||
return () => {
|
||||
window.removeEventListener("message", handleMessage, false);
|
||||
};
|
||||
}, [handleMessage]);
|
||||
|
||||
const handleMessage = (e) => {
|
||||
const { setFrameConfig } = props;
|
||||
|
||||
const eventData = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
|
||||
|
||||
if (eventData.data) {
|
||||
const { data, methodName } = eventData.data;
|
||||
|
||||
let res;
|
||||
|
||||
switch (methodName) {
|
||||
case "setConfig":
|
||||
res = setFrameConfig(data);
|
||||
break;
|
||||
default:
|
||||
res = "Wrong method";
|
||||
}
|
||||
|
||||
frameCallbackData(res);
|
||||
}
|
||||
};
|
||||
|
||||
const onAcceptItem = useCallback(
|
||||
(item) => {
|
||||
frameCallEvent({ event: "onSelectCallback", data: item });
|
||||
},
|
||||
[frameCallEvent]
|
||||
);
|
||||
|
||||
return (
|
||||
<RoomSelector withCancelButton withHeader={false} onAccept={onAcceptItem} />
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
const { theme } = auth.settingsStore;
|
||||
const { theme, setFrameConfig, frameConfig } = auth.settingsStore;
|
||||
return {
|
||||
theme,
|
||||
setFrameConfig,
|
||||
frameConfig,
|
||||
};
|
||||
})(observer(Selector));
|
||||
|
@ -430,6 +430,16 @@ export const frameCallbackData = (methodReturnData: any) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const frameCallEvent = (eventReturnData: any) => {
|
||||
window.parent.postMessage(
|
||||
JSON.stringify({
|
||||
type: "onEventReturn",
|
||||
eventReturnData,
|
||||
}),
|
||||
"*"
|
||||
);
|
||||
};
|
||||
|
||||
export const frameCallCommand = (commandName: string, commandData: any) => {
|
||||
window.parent.postMessage(
|
||||
JSON.stringify({
|
||||
|
@ -41,7 +41,7 @@
|
||||
"mode",
|
||||
],
|
||||
events: {
|
||||
onSelectCallback: (e) => console.log("onCloseCallback", e),
|
||||
onSelectCallback: (e) => console.log("onSelectCallback", e),
|
||||
onCloseCallback: null,
|
||||
},
|
||||
};
|
||||
@ -173,7 +173,7 @@
|
||||
case "onMethodReturn": {
|
||||
if (this.#callbacks.length > 0) {
|
||||
const callback = this.#callbacks.shift();
|
||||
callback && callback(frameData.methodReturnData);
|
||||
callback && callback(frameData?.methodReturnData);
|
||||
}
|
||||
|
||||
if (this.#tasks.length > 0) {
|
||||
@ -181,6 +181,14 @@
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "onEventReturn": {
|
||||
if (frameData?.eventReturnData?.event in this.config.events) {
|
||||
this.config.events[frameData?.eventReturnData.event](
|
||||
frameData?.eventReturnData.data
|
||||
);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "onCallCommand": {
|
||||
this[frameData.commandName].call(this, frameData.commandData);
|
||||
break;
|
||||
|
Loading…
Reference in New Issue
Block a user