Components:MainButtonMobile: add multiply sub menu item
This commit is contained in:
parent
c075927417
commit
610b743cd7
@ -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 (
|
||||
|
@ -172,6 +172,10 @@ StyledDropDown.defaultProps = { theme: Base };
|
||||
|
||||
const StyledDropDownItem = styled(DropDownItem)`
|
||||
padding: 6px 23px;
|
||||
|
||||
.drop-down-icon {
|
||||
height: 22px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledButtonOptions = styled.div`
|
||||
|
@ -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;
|
Loading…
Reference in New Issue
Block a user