Merge pull request #113 from ONLYOFFICE/bugfix/js-sdk

Bugfix/js sdk

packages/client/src/components/FilesSelector/FilesSelector.types.ts

@@ -71,6 +71,7 @@ export type useRootHelperProps = {
   onSetBaseFolderPath?: (
     value: number | string | undefined | BreadCrumb[]
   ) => void;
+  isUserOnly?: boolean;
 };
 
 export type useRoomsHelperProps = {
@@ -129,6 +130,7 @@ export type FilesSelectorProps = {
   isThirdParty: boolean;
   rootThirdPartyId?: string;
   isRoomsOnly: boolean;
+  isUserOnly: boolean;
   isRoomBackup: boolean;
   isEditorDialog: boolean;
   setMoveToPublicRoomVisible: (visible: boolean, operationData: object) => void;
@@ -217,5 +219,6 @@ export type FilesSelectorProps = {
 
   embedded: boolean;
   withHeader: boolean;
+  withCancelButton: boolean;
   settings: any;
 };

packages/client/src/components/FilesSelector/helpers/useRootHelper.ts

@@ -20,6 +20,7 @@ const useRootHelper = ({
   setIsNextPageLoading,
   setTotal,
   setHasNextPage,
+  isUserOnly,
 }: useRootHelperProps) => {
   const [isRoot, setIsRoot] = React.useState<boolean>(false);
 
@@ -41,7 +42,7 @@ const useRootHelper = ({
       const avatar = getCatalogIconUrlByType(folder.rootFolderType);
 
       if (
-        folder.rootFolderType === FolderType.Rooms ||
+        (!isUserOnly && folder.rootFolderType === FolderType.Rooms) ||
         folder.rootFolderType === FolderType.USER
       ) {
         newItems.push({

packages/client/src/components/FilesSelector/index.tsx

@@ -38,6 +38,7 @@ const FilesSelector = ({
   // withoutImmediatelyClose = false,
   isThirdParty = false,
   isRoomsOnly = false,
+  isUserOnly = false,
   isEditorDialog = false,
 
   rootThirdPartyId,
@@ -100,6 +101,7 @@ const FilesSelector = ({
 
   embedded,
   withHeader,
+  withCancelButton = true,
   getIcon,
   isRoomBackup,
 }: FilesSelectorProps) => {
@@ -164,6 +166,7 @@ const FilesSelector = ({
     setHasNextPage,
     setIsNextPageLoading,
     onSetBaseFolderPath,
+    isUserOnly,
   });
 
   const { getRoomList } = useRoomsHelper({
@@ -523,7 +526,7 @@ const FilesSelector = ({
       onSelect={onSelectAction}
       acceptButtonLabel={acceptButtonLabel}
       onAccept={onAcceptAction}
-      withCancelButton
+      withCancelButton={withCancelButton}
       cancelButtonLabel={t("Common:CancelButton")}
       onCancel={onCloseAction}
       emptyScreenImage={
@@ -567,7 +570,9 @@ const FilesSelector = ({
       currentFooterInputValue={currentFooterInputValue}
       footerCheckboxLabel={footerCheckboxLabel}
       descriptionText={
-        !filterParam ? "" : descriptionText ?? t("Common:SelectDOCXFormat")
+        !filterParam || filterParam === "ALL"
+          ? ""
+          : descriptionText ?? t("Common:SelectDOCXFormat")
       }
       acceptButtonId={
         isMove || isCopy || isRestore ? "select-file-modal-submit" : ""

packages/client/src/components/Main/index.js

@@ -33,7 +33,7 @@ const StyledMain = styled.main`
 `;
 
 const Main = (props) => {
-  const { mainBarVisible, isBannerVisible } = props;
+  const { mainBarVisible, isBannerVisible, isFrame } = props;
   //console.log("Main render");
   const [mainHeight, setMainHeight] = React.useState(window.innerHeight);
   const updateSizeRef = React.useRef(null);
@@ -51,7 +51,7 @@ const Main = (props) => {
 
   React.useEffect(() => {
     onResize();
-  }, [mainBarVisible, isBannerVisible]);
+  }, [mainBarVisible, isBannerVisible, isFrame]);
 
   const onResize = React.useCallback(
     (e) => {
@@ -89,13 +89,13 @@ const Main = (props) => {
       }
 
       // 48 - its nav menu with burger, logo and user avatar
-      if (isMobileUtils()) {
+      if (isMobileUtils() && !isFrame) {
         correctHeight -= 48;
       }
 
       setMainHeight(correctHeight);
     },
-    [mainBarVisible, isBannerVisible]
+    [mainBarVisible, isBannerVisible, isFrame]
   );
 
   return <StyledMain className="main" mainHeight={mainHeight} {...props} />;
@@ -106,9 +106,10 @@ Main.displayName = "Main";
 export default inject(({ auth }) => {
   const { isBannerVisible } = auth.bannerStore;
 
-  const { mainBarVisible } = auth.settingsStore;
+  const { mainBarVisible, isFrame } = auth.settingsStore;
   return {
     mainBarVisible,
     isBannerVisible,
+    isFrame,
   };
 })(observer(Main));

packages/client/src/components/RoomSelector/index.js

@@ -43,7 +43,7 @@ const convertToItems = (folders) => {
     const icon = logo.medium ? logo.medium : getRoomLogo(roomType);
     const color = logo.color;
 
-    return { id, label: title, icon, color };
+    return { id, label: title, icon, color, logo, roomType };
   });
 
   return items;

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

@@ -12,6 +12,7 @@ import {
   createPasswordHash,
   frameCallCommand,
 } from "@docspace/common/utils";
+import { RoomsType } from "@docspace/common/constants";
 
 const Sdk = ({
   frameConfig,
@@ -25,6 +26,8 @@ const Sdk = ({
   getSettings,
   user,
   updateProfileCulture,
+  getRoomsIcon,
+  getPrimaryLink,
 }) => {
   useEffect(() => {
     window.addEventListener("message", handleMessage, false);
@@ -118,8 +121,18 @@ const Sdk = ({
   };
 
   const onSelectRoom = useCallback(
-    (data) => {
-      data[0].icon = toRelativeUrl(data[0].icon);
+    async (data) => {
+      if (data[0].logo.large !== "") {
+        data[0].icon = toRelativeUrl(data[0].logo.large);
+      } else {
+        data[0].icon = await getRoomsIcon(data[0].roomType, false, 32);
+      }
+
+      if (data[0].roomType === RoomsType.PublicRoom) {
+        const { sharedTo } = await getPrimaryLink(data[0].id);
+        data[0].requestToken = sharedTo?.requestToken;
+      }
+
       frameCallEvent({ event: "onSelectCallback", data });
     },
     [frameCallEvent]
@@ -150,8 +163,8 @@ const Sdk = ({
     case "room-selector":
       component = (
         <RoomSelector
-          withCancelButton={true}
-          withHeader={false}
+          withCancelButton={frameConfig?.showSelectorCancel}
+          withHeader={frameConfig?.showSelectorHeader}
           onAccept={onSelectRoom}
           onCancel={onClose}
         />
@@ -162,11 +175,14 @@ const Sdk = ({
         <FilesSelector
           isPanelVisible={true}
           embedded={true}
-          withHeader={false}
+          withHeader={frameConfig?.showSelectorHeader}
           isSelect={true}
           onSelectFile={onSelectFile}
           onClose={onClose}
           filterParam={"ALL"}
+          isUserOnly={selectorType === "userFolderOnly"}
+          isRoomsOnly={selectorType === "roomsOnly"}
+          withCancelButton={frameConfig?.showSelectorCancel}
         />
       );
       break;
@@ -177,13 +193,14 @@ const Sdk = ({
   return component;
 };
 
-export default inject(({ auth, settingsStore, peopleStore }) => {
+export default inject(({ auth, settingsStore, peopleStore, filesStore }) => {
   const { login, logout, userStore } = auth;
   const { theme, setFrameConfig, frameConfig, getSettings, isLoaded } =
     auth.settingsStore;
   const { loadCurrentUser, user } = userStore;
   const { updateProfileCulture } = peopleStore.targetUserStore;
-  const { getIcon } = settingsStore;
+  const { getIcon, getRoomsIcon } = settingsStore;
+  const { getPrimaryLink } = filesStore;
 
   return {
     theme,
@@ -194,8 +211,10 @@ export default inject(({ auth, settingsStore, peopleStore }) => {
     getSettings,
     loadCurrentUser,
     getIcon,
+    getRoomsIcon,
     isLoaded,
     updateProfileCulture,
     user,
+    getPrimaryLink,
   };
 })(observer(Sdk));

packages/common/store/SettingsStore.js

@@ -938,6 +938,7 @@ class SettingsStore {
   };
 
   get isFrame() {
+    console.log("get isFrame:", this.frameConfig?.name === window.name);
     return this.frameConfig?.name === window.name;
   }
 

public/scripts/api.js

@@ -15,6 +15,8 @@
     editorType: "embedded", //TODO: ["desktop", "embedded"]
     editorGoBack: true,
     selectorType: "exceptPrivacyTrashArchiveFolders", //TODO: ["roomsOnly", "userFolderOnly", "exceptPrivacyTrashArchiveFolders", "exceptSortedByTagsFolders"]
+    showSelectorCancel: false,
+    showSelectorHeader: false,
     showHeader: false,
     showTitle: true,
     showMenu: false,