import React from 'react'; import { OverflowMenu, OverflowMenuControl, OverflowMenuContent, OverflowMenuGroup, OverflowMenuItem, OverflowMenuDropdownItem, MenuToggle, Slider, SliderOnChangeEvent, Dropdown, DropdownList } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const [containerWidth, setContainerWidth] = React.useState(100); const containerRef = React.useRef(null); const onToggle = () => { setIsOpen(!isOpen); }; const onSelect = () => { setIsOpen(!isOpen); }; const onChange = (_event: SliderOnChangeEvent, value: number) => { setContainerWidth(value); }; const containerStyles = { width: `${containerWidth}%`, padding: '1rem', borderWidth: '2px', borderStyle: 'dashed' }; const dropdownItems = [ Item 1 , Item 2 , Item 3 , Item 4 , Item 5 ]; return ( <>
Current container width: {containerWidth} %
Item 1 Item 2 Item 3 Item 4 Item 5 ( } /> )} isOpen={isOpen} onOpenChange={(isOpen) => setIsOpen(isOpen)} > {dropdownItems}
); };