SDK: Added events callback from config

packages/client/src/pages/Selector/index.js

@@ -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));

packages/common/utils/index.ts

@@ -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({

public/scripts/api.js

@@ -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;