import React from 'react'; import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu, MenuSearch, MenuSearchInput, SearchInput } from '@patternfly/react-core'; export const MenuWithDrilldown: React.FunctionComponent = () => { const [menuDrilledIn, setMenuDrilledIn] = React.useState([]); const [drilldownPath, setDrilldownPath] = React.useState([]); const [menuHeights, setMenuHeights] = React.useState({}); const [activeMenu, setActiveMenu] = React.useState('filter_drilldown-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) => { const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1); const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1); setMenuDrilledIn(menuDrilledInSansLast); setDrilldownPath(pathSansLast); setActiveMenu(toMenuId); }; const setHeight = (menuId: string, height: number) => { if ( menuHeights[menuId] === undefined || (menuId !== 'filter_drilldown-rootMenu' && menuHeights[menuId] !== height) ) { setMenuHeights({ ...menuHeights, [menuId]: height }); } }; const searchRef = React.createRef(); const [startInput, setStartInput] = React.useState(''); const handleStartTextInputChange = (value: string) => { setStartInput(value); searchRef?.current?.focus(); }; const startDrillItems = [ { item: 'Application grouping', rest: { description: 'Description text' } }, { item: 'Labels' }, { item: 'Annotations' }, { item: 'Count' }, { item: 'Count 2' }, { item: 'Count 3' }, { item: 'Other' } ]; const mapped = startDrillItems .filter((opt) => !startInput || opt.item.toLowerCase().includes(startInput.toString().toLowerCase())) .map((opt, index) => ( {opt.item} )); if (startInput && mapped.length === 0) { mapped.push( No results found ); } return ( Start rollout handleStartTextInputChange(value)} /> {mapped} } > Start rollout Item B Item C Item D ); };