import React from 'react'; import { Select, SelectOption, SelectList, MenuToggle, Spinner } from '@patternfly/react-core'; export const SelectViewMore: React.FunctionComponent = () => { const [isOpen, setIsOpen] = React.useState(false); const [selected, setSelected] = React.useState('Select a value'); const [activeItem, setActiveItem] = React.useState(0); const [isLoading, setIsLoading] = React.useState(false); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [selectOptions, setSelectOptions] = React.useState([ Option 1 , Option 2 , Option 3 , Option 4 , Option 5 , Option 6 , Option 7 , Option 8 , Option 9 , Final Option 10 ]); const [numOptions, setNumOptions] = React.useState(3); const [visibleOptions, setVisibleOptions] = React.useState(selectOptions.slice(0, numOptions)); const activeItemRef = React.useRef(null); const viewMoreRef = React.useRef(null); const toggleRef = React.useRef(null); React.useEffect(() => { activeItemRef.current?.focus(); }, [visibleOptions]); const simulateNetworkCall = (networkCallback: () => void) => { setTimeout(networkCallback, 2000); }; const getNextValidItem = (startingIndex: number, maxLength: number) => { let validItem; for (let i = startingIndex; i < maxLength; i++) { if (selectOptions[i].props.isDisabled) { continue; } else { validItem = selectOptions[i]; break; } } return validItem; }; const loadMoreOptions = () => { const newLength = numOptions + 3 <= selectOptions.length ? numOptions + 3 : selectOptions.length; const prevPosition = numOptions; const nextValidItem = getNextValidItem(prevPosition, newLength); setNumOptions(newLength); setIsLoading(false); setActiveItem(nextValidItem.props.value); setVisibleOptions(selectOptions.slice(0, newLength)); }; const onViewMoreClick = () => { setIsLoading(true); simulateNetworkCall(() => { loadMoreOptions(); }); }; const onToggleClick = () => { setIsOpen(!isOpen); }; const onSelect = (_event: React.MouseEvent | undefined, value: string | number | undefined) => { // eslint-disable-next-line no-console console.log('selected', value); if (value !== 'loader') { setSelected(value as string); setIsOpen(false); toggleRef?.current?.focus(); // Only focus the toggle when a non-loader option is selected } }; const toggle = ( {selected} ); return (
); };