diff --git a/packages/components/main-button-mobile/index.js b/packages/components/main-button-mobile/index.js
index 74b82c147c..b98f6ae53a 100644
--- a/packages/components/main-button-mobile/index.js
+++ b/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 (
-
-
- {isOpenSubMenu &&
- option.items.map((item) => {
- const subMenuOnClickAction = () => {
- toggle(false);
- setIsOpenSubMenu(false);
- item.onClick && item.onClick({ action: item.action });
- };
-
- return (
-
- );
- })}
-
+
);
return (
diff --git a/packages/components/main-button-mobile/styled-main-button.js b/packages/components/main-button-mobile/styled-main-button.js
index 177adee174..44db287093 100644
--- a/packages/components/main-button-mobile/styled-main-button.js
+++ b/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`
diff --git a/packages/components/main-button-mobile/sub-components/SubmenuItem.js b/packages/components/main-button-mobile/sub-components/SubmenuItem.js
new file mode 100644
index 0000000000..335a2f3aa2
--- /dev/null
+++ b/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 (
+
+
+ {isOpenSubMenu &&
+ option.items.map((item) => {
+ const subMenuOnClickAction = () => {
+ toggle(false);
+ setIsOpenSubMenu(false);
+ item.onClick && item.onClick({ action: item.action });
+ };
+
+ return (
+
+ );
+ })}
+
+ );
+};
+
+export default SubmenuItem;