import React from 'react'; import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, MenuContainer } from '@patternfly/react-core'; /* eslint-disable no-console */ const onSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => console.log('selected', itemId); /* eslint-enable no-console */ interface FlyoutMenuProps { children?: React.ReactElement; depth: number; } const FlyoutMenu: React.FunctionComponent = ({ depth, children }: FlyoutMenuProps) => ( Next menu {Array.from(new Array(15 - depth), (x, i) => i + 1).map((j) => ( Menu {depth} item {j} ))} Next menu ); export const FlyoutDemo: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const menuRef = React.useRef(null); const toggleRef = React.useRef(null); let curFlyout = ; for (let i = 2; i < 14; i++) { curFlyout = {curFlyout}; } const onToggleClick = () => { setIsOpen(!isOpen); }; const toggle = ( {isOpen ? 'Expanded' : 'Collapsed'} ); const menu = ( Start rollout Pause rollouts Add storage Edit Delete deployment config ); return ( setIsOpen(isOpen)} menu={menu} menuRef={menuRef} toggle={toggle} toggleRef={toggleRef} /> ); };