Components:MainButtonMobile: add multiply sub menu item

packages/components/main-button-mobile/index.js

@@ -26,6 +26,7 @@ import ButtonAlertReactSvg from "PUBLIC_DIR/images/button.alert.react.svg";
 import commonIconsStyles from "../utils/common-icons-style";
 
 import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
+import SubmenuItem from "./sub-components/SubmenuItem";
 
 const StyledButtonAlertIcon = styled(ButtonAlertReactSvg)`
   cursor: pointer;
@@ -130,7 +131,7 @@ const MainButtonMobile = (props) => {
   const [isOpen, setIsOpen] = useState(opened);
   const [isUploading, setIsUploading] = useState(false);
   const [height, setHeight] = useState(window.innerHeight - 48 + "px");
-  const [isOpenSubMenu, setIsOpenSubMenu] = useState(false);
+  const [openedSubmenuKey, setOpenedSubmenuKey] = useState("");
 
   const divRef = useRef();
   const ref = useRef();
@@ -208,7 +209,7 @@ const MainButtonMobile = (props) => {
 
   useLayoutEffect(() => {
     recalculateHeight();
-  }, [isOpen, isOpenButton, window.innerHeight, isUploading, isOpenSubMenu]);
+  }, [isOpen, isOpenButton, window.innerHeight, isUploading]);
 
   useEffect(() => {
     window.addEventListener("resize", recalculateHeight);
@@ -261,50 +262,17 @@ const MainButtonMobile = (props) => {
               option.onClick && option.onClick({ action: option.action });
             };
 
-            const onClickSub = () => {
-              setIsOpenSubMenu(!isOpenSubMenu);
-            };
-
             if (option.items)
               return (
-                <div key="mobile-submenu">
-                  <StyledDropDownItem
-                    id={option.id}
-                    key={option.key}
-                    label={option.label}
-                    className={`${option.className} ${
-                      option.isSeparator && "is-separator"
-                    }`}
-                    onClick={onClickSub}
-                    icon={option.icon ? option.icon : ""}
-                    action={option.action}
-                    isActive={isOpenSubMenu}
-                    isSubMenu={true}
-                    noHover={noHover}
-                  />
-                  {isOpenSubMenu &&
-                    option.items.map((item) => {
-                      const subMenuOnClickAction = () => {
-                        toggle(false);
-                        setIsOpenSubMenu(false);
-                        item.onClick && item.onClick({ action: item.action });
-                      };
-
-                      return (
-                        <StyledDropDownItem
-                          id={item.id}
-                          key={item.key}
-                          label={item.label}
-                          className={`${item.className} sublevel`}
-                          onClick={subMenuOnClickAction}
-                          icon={item.icon ? item.icon : ""}
-                          action={item.action}
-                          withoutIcon={item.withoutIcon}
-                          noHover={noHover}
-                        />
-                      );
-                    })}
-                </div>
+                <SubmenuItem
+                  key={option.key}
+                  option={option}
+                  toggle={toggle}
+                  noHover={noHover}
+                  recalculateHeight={recalculateHeight}
+                  openedSubmenuKey={openedSubmenuKey}
+                  setOpenedSubmenuKey={setOpenedSubmenuKey}
+                />
               );
 
             return (

packages/components/main-button-mobile/styled-main-button.js

@@ -172,6 +172,10 @@ StyledDropDown.defaultProps = { theme: Base };
 
 const StyledDropDownItem = styled(DropDownItem)`
   padding: 6px 23px;
+
+  .drop-down-icon {
+    height: 22px;
+  }
 `;
 
 const StyledButtonOptions = styled.div`

packages/components/main-button-mobile/sub-components/SubmenuItem.js

@@ -0,0 +1,74 @@
+import React, { useLayoutEffect, useEffect, useState } from "react";
+
+import { StyledDropDownItem } from "../styled-main-button";
+
+const SubmenuItem = ({
+  option,
+  toggle,
+
+  noHover,
+  recalculateHeight,
+
+  openedSubmenuKey,
+  setOpenedSubmenuKey,
+}) => {
+  const [isOpenSubMenu, setIsOpenSubMenu] = useState(false);
+
+  useLayoutEffect(() => {
+    recalculateHeight();
+  }, [isOpenSubMenu]);
+
+  useEffect(() => {
+    if (openedSubmenuKey === option.key) return;
+
+    setIsOpenSubMenu(false);
+  }, [openedSubmenuKey, option.key]);
+
+  const onClick = () => {
+    setOpenedSubmenuKey(option.key);
+    setIsOpenSubMenu((isOpenSubMenu) => !isOpenSubMenu);
+  };
+
+  return (
+    <div key={`mobile-submenu-${option.key}`}>
+      <StyledDropDownItem
+        id={option.id}
+        key={option.key}
+        label={option.label}
+        className={`${option.className} ${
+          option.isSeparator && "is-separator"
+        }`}
+        onClick={onClick}
+        icon={option.icon ? option.icon : ""}
+        action={option.action}
+        isActive={isOpenSubMenu}
+        isSubMenu={true}
+        noHover={noHover}
+      />
+      {isOpenSubMenu &&
+        option.items.map((item) => {
+          const subMenuOnClickAction = () => {
+            toggle(false);
+            setIsOpenSubMenu(false);
+            item.onClick && item.onClick({ action: item.action });
+          };
+
+          return (
+            <StyledDropDownItem
+              id={item.id}
+              key={item.key}
+              label={item.label}
+              className={`${item.className} sublevel`}
+              onClick={subMenuOnClickAction}
+              icon={item.icon ? item.icon : ""}
+              action={item.action}
+              withoutIcon={item.withoutIcon}
+              noHover={noHover}
+            />
+          );
+        })}
+    </div>
+  );
+};
+
+export default SubmenuItem;