mod-arch-shared
Version:
Shared UI components and utilities for modular architecture micro-frontend projects
44 lines • 4.34 kB
JavaScript
import * as React from 'react';
import { Truncate, MenuToggle,
// eslint-disable-next-line no-restricted-imports
Select, SelectList, SelectOption, SelectGroup, Divider, FormHelperText, HelperText, HelperTextItem, Skeleton, } from '@patternfly/react-core';
import TruncatedText from '../components/TruncatedText';
import './SimpleSelect.scss';
const SimpleSelect = ({ isDisabled, onChange, options, groupedOptions, placeholder = 'Select...', value, toggleLabel, isFullWidth, icon, dataTestId, toggleProps, previewDescription = true, popperProps, isSkeleton, ...props }) => {
const [open, setOpen] = React.useState(false);
const groupedOptionsFlat = React.useMemo(() => groupedOptions?.reduce((acc, group) => [...acc, ...group.options], []), [groupedOptions]);
const findOptionForKey = (key) => options?.find((option) => option.key === key) || groupedOptionsFlat?.find((o) => o.key === key);
const selectedOption = value ? findOptionForKey(value) : undefined;
const selectedLabel = selectedOption?.label ?? placeholder;
const totalOptions = React.useMemo(() => [...(options || []), ...(groupedOptionsFlat || [])], [options, groupedOptionsFlat]);
const singleOptionKey = totalOptions.length === 1 ? totalOptions[0].optionKey || totalOptions[0].key : null;
// If there is only one option, call the onChange function
React.useEffect(() => {
if (singleOptionKey && !isSkeleton) {
onChange(totalOptions[0].key, false);
}
// We don't want the callback function to be a dependency
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [singleOptionKey, isSkeleton]);
if (isSkeleton) {
return React.createElement(Skeleton, { style: { minWidth: 100 } });
}
return (React.createElement(React.Fragment, null,
React.createElement(Select, { ...props, isOpen: open, selected: value || toggleLabel, onSelect: (e, selectValue) => {
onChange(String(selectValue), !!selectValue && (findOptionForKey(String(selectValue))?.isPlaceholder ?? false));
setOpen(false);
}, onOpenChange: setOpen, toggle: (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, "data-testid": dataTestId, "aria-label": "Options menu", onClick: () => setOpen(!open), icon: icon, isExpanded: open, isDisabled: totalOptions.length <= 1 || isDisabled, isFullWidth: isFullWidth, ...toggleProps }, toggleLabel || React.createElement(Truncate, { content: selectedLabel, className: "truncate-no-min-width" }))), shouldFocusToggleOnSelect: true, popperProps: { maxWidth: 'trigger', ...popperProps } },
groupedOptions?.map((group, index) => (React.createElement(React.Fragment, { key: group.key },
index > 0 ? React.createElement(Divider, null) : null,
React.createElement(SelectGroup, { label: group.label },
React.createElement(SelectList, null, group.options.map(({ key, label, dropdownLabel, description, isFavorited, isDisabled: optionDisabled, dataTestId: optionDataTestId, }) => (React.createElement(SelectOption, { key: key, value: key, description: React.createElement(TruncatedText, { maxLines: 2, content: description }), isDisabled: optionDisabled, isFavorited: isFavorited, "data-testid": optionDataTestId || key }, dropdownLabel || label)))))))) ?? null,
options?.length ? (React.createElement(SelectList, null,
groupedOptions?.length ? React.createElement(Divider, null) : null,
options.map(({ key, label, dropdownLabel, description, isFavorited, isDisabled: optionDisabled, dataTestId: optionDataTestId, }) => (React.createElement(SelectOption, { key: key, value: key, description: React.createElement(TruncatedText, { maxLines: 2, content: description }), isFavorited: isFavorited, isDisabled: optionDisabled, "data-testid": optionDataTestId || key }, dropdownLabel || label))))) : null),
previewDescription && selectedOption?.description ? (React.createElement(FormHelperText, null,
React.createElement(HelperText, null,
React.createElement(HelperTextItem, null,
React.createElement(TruncatedText, { maxLines: 2, content: selectedOption.description }))))) : null));
};
export default SimpleSelect;
//# sourceMappingURL=SimpleSelect.js.map