import React from 'react'; import { Menu, MenuList, MenuItem, MenuContent, Spinner } from '@patternfly/react-core'; export const MenuWithViewMore: React.FunctionComponent = () => { const [activeItem, setActiveItem] = React.useState(0); const [isLoading, setIsLoading] = React.useState(false); const [numOptions, setNumOptions] = React.useState(3); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [menuOptions, setMenuOptions] = React.useState([ Action , event.preventDefault()} > Link , Disabled action , Disabled link , Action 2 , Action 3 , Action 4 , Action 5 , Final option ]); const [visibleOptions, setVisibleOptions] = React.useState(menuOptions.slice(0, numOptions)); const activeItemRef = React.useRef(null); const viewMoreRef = React.useRef(null); React.useEffect(() => { activeItemRef.current?.focus(); }, [visibleOptions]); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { // eslint-disable-next-line no-console console.log(`clicked ${itemId}`); setActiveItem(itemId as string); }; const simulateNetworkCall = (networkCallback: () => void) => { setTimeout(networkCallback, 2000); }; const getNextValidItem = (startingIndex: number, maxLength: number) => { let validItem; for (let i = startingIndex; i < maxLength; i++) { if (menuOptions[i].props.isDisabled) { continue; } else { validItem = menuOptions[i]; break; } } return validItem; }; const loadMoreOptions = () => { const newLength = numOptions + 3 <= menuOptions.length ? numOptions + 3 : menuOptions.length; const prevPosition = numOptions; const nextValidItem = getNextValidItem(prevPosition, newLength); setNumOptions(newLength); setIsLoading(false); setActiveItem(nextValidItem.props.itemId); setVisibleOptions(menuOptions.slice(0, newLength)); }; const onViewMoreClick = () => { setIsLoading(true); simulateNetworkCall(() => { loadMoreOptions(); }); }; return ( {visibleOptions.map((option) => { const props = option.props; return ; })} {numOptions !== menuOptions.length && ( {isLoading ? : 'View more'} )} ); };