import React from 'react'; import { Badge, MenuToggle, Menu, MenuContent, MenuList, MenuItem, MenuGroup, Popper, Divider, ToggleGroup, ToggleGroupItem, Avatar, MenuSearch, MenuSearchInput } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; import avatarImg from 'avatarImg.svg'; export const ComposableDropdwnVariants: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const [toggleSelected, setToggleSelected] = React.useState('basic'); const menuRef = React.useRef(); const toggleRef = React.useRef(); const handleToggleSwitch = (e, _selected: boolean) => { setToggleSelected(e.currentTarget.id); }; const handleMenuKeys = (event: KeyboardEvent) => { if (isOpen && menuRef && menuRef.current && menuRef.current.contains(event.target as Node)) { if (event.key === 'Escape' || event.key === 'Tab') { setIsOpen(!isOpen); toggleRef?.current?.focus(); } } }; const handleClickOutside = (event: MouseEvent) => { if (isOpen && menuRef && menuRef.current && !menuRef.current.contains(event.target as Node)) { setIsOpen(false); } }; React.useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); return () => { window.removeEventListener('keydown', handleMenuKeys); window.removeEventListener('click', handleClickOutside); }; }, [isOpen, menuRef]); const onToggleClick = (ev: React.MouseEvent) => { ev.stopPropagation(); // Stop handleClickOutside from handling setTimeout(() => { if (menuRef.current) { const firstElement = menuRef.current.querySelector( 'li > button:not(:disabled), li > a:not(:disabled), input:not(:disabled)' ); firstElement && (firstElement as HTMLElement).focus(); } }, 0); setIsOpen(!isOpen); }; const onSelect = (ev: React.MouseEvent, itemId: string) => { // eslint-disable-next-line no-console console.log(`Menu item ${itemId} selected`); setIsOpen(false); }; const buildToggle = () => { switch (toggleSelected) { case 'basic': return ( Dropdown ); case 'kebab': return ( ); case 'badge': return ( 4 ); case 'image': return ( } onClick={onToggleClick} isExpanded={isOpen} > Ned Username ); } }; const menu = toggleSelected === 'image' ? ( Unselectable text displayed at the top of the menu event.preventDefault()} > My profile event.preventDefault()} > User management event.preventDefault()} > Logout ) : ( event.preventDefault()} > Link Action event.preventDefault()} > Disabled link Group 1 action Group 1 disabled action Option 1 Option 2 ); return (
); };