import React from 'react'; import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, DrilldownMenu, Divider, MenuContainer } from '@patternfly/react-core'; import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; interface MenuHeightsType { [id: string]: number; } export const DrilldownMenuDemo: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const [activeMenu, setActiveMenu] = React.useState('rootMenu'); const [menuDrilledIn, setMenuDrilledIn] = React.useState([]); const [drilldownPath, setDrilldownPath] = React.useState([]); const [menuHeights, setMenuHeights] = React.useState({}); const toggleRef = React.useRef(null); const menuRef = React.useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); setMenuDrilledIn([]); setDrilldownPath([]); setActiveMenu('rootMenu'); }; const drillIn = ( _event: React.KeyboardEvent | React.MouseEvent, fromMenuId: string, toMenuId: string, pathId: string ) => { setMenuDrilledIn([...menuDrilledIn, fromMenuId]); setDrilldownPath([...drilldownPath, pathId]); setActiveMenu(toMenuId); }; const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => { setMenuDrilledIn(menuDrilledIn.slice(0, menuDrilledIn.length - 1)); setDrilldownPath(drilldownPath.slice(0, drilldownPath.length - 1)); setActiveMenu(toMenuId); }; const setHeight = (menuId: string, height: number) => { if (!menuHeights[menuId] || (menuId !== 'rootMenu' && menuHeights[menuId] !== height)) { setMenuHeights({ ...menuHeights, [menuId]: height }); } }; const toggle = ( {isOpen ? 'Expanded' : 'Collapsed'} ); const menu = ( Start rollout Application Grouping Group A Group B Group C } > Application Grouping Count Labels Label 1 Label 2 Label 3 } > Labels Annotations } > Start rollout Pause rollouts Application Grouping Group A Group B Group C } > Application Grouping Count Labels Label 1 Label 2 Label 3 } > Labels Annotations } > Pause rollouts } direction="down" drilldownMenu={ } direction="up"> Add storage } itemId="git"> From Git } itemId="container"> Container Image } itemId="docker"> Docker File } > Add storage Edit Delete deployment config ); return ( setIsOpen(isOpen)} menu={menu} menuRef={menuRef} toggle={toggle} toggleRef={toggleRef} />