import React from 'react'; import { ApplicationLauncher, ApplicationLauncherItem, ApplicationLauncherGroup, ApplicationLauncherSeparator } from '@patternfly/react-core/deprecated'; import pfLogoSm from '@patternfly/react-core/src/demos/assets/pf-logo-small.svg'; const icon: JSX.Element = ; const appLauncherItems: React.ReactElement[] = [ Item without group title , Group 2 button Group 2 anchor link , Group 3 button Group 3 anchor link ]; export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const [favorites, setFavorites] = React.useState([]); const [filteredItems, setFilteredItems] = React.useState(null); const onToggle = (_event: any, isOpen: boolean) => { setIsOpen(isOpen); setFilteredItems(null); }; const onFavorite = (_event: React.MouseEvent, itemId: string, isFavorite: boolean) => { let updatedFavorites: string[] = [...favorites, itemId]; if (isFavorite) { updatedFavorites = favorites.filter((id) => id !== itemId); } setFavorites(updatedFavorites); }; const onSearch = (_event: React.FormEvent, textInput: string) => { if (textInput === '') { setFilteredItems(null); } else { const filteredGroups = appLauncherItems .map((group: React.ReactElement) => { const filteredGroup = React.cloneElement(group, { children: group.props.children.filter((item: React.ReactElement) => { if (item.type === ApplicationLauncherSeparator) { return item; } return item.props.children.toLowerCase().includes(textInput.toLowerCase()); }) }); if ( filteredGroup.props.children.length > 0 && filteredGroup.props.children[0].type !== ApplicationLauncherSeparator ) { return filteredGroup; } }) .filter((newGroup) => newGroup); if (filteredGroups.length > 0) { let lastGroup = filteredGroups.pop(); lastGroup = React.cloneElement(lastGroup, { children: lastGroup.props.children.filter((item) => item.type !== ApplicationLauncherSeparator) }); filteredGroups.push(lastGroup); } setFilteredItems(filteredGroups); } }; return ( ); };