@octopusdeploy/design-system-components
Version:
The design systems component library.
44 lines (43 loc) • 2.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiSelect = MultiSelect;
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const CategoryTag_1 = require("../../Tag/CategoryTag");
const Tag_1 = require("../../Tag/Tag");
const TagGroup_1 = require("../../Tag/TagGroup");
const MultiSelectOption_1 = require("./MultiSelectOption");
const SelectBase_1 = require("./SelectBase");
/**
* MultiSelect component
*
* @remarks Only use in pre-approved areas, as in #project-form-uplift if unsure before using.
*/
function MultiSelect(props) {
const handleOptionsSelected = (options) => {
const currentValues = new Set(props.value);
const toggledValues = new Set(options.map((o) => o.value));
props.onChange(Array.from(currentValues.symmetricDifference(toggledValues)));
};
const canChange = !props.disabled && !props.readOnly;
const getTagProps = (option) => {
const label = (0, SelectBase_1.getSelectedOptionLabel)(option);
const onDismiss = canChange ? () => handleOptionsSelected([option]) : undefined;
if ((0, SelectBase_1.isMissingSelectedOption)(option)) {
return { label, onDismiss, prefix: (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationIcon, { size: 16 }) };
}
return option.color !== undefined ? { label, color: option.color, onDismiss } : { label, onDismiss };
};
const renderOption = (option, selected) => (0, jsx_runtime_1.jsx)(MultiSelectOption_1.MultiSelectOption, { option: option, selected: selected });
const renderSelection = (selectedOptions) => {
if (selectedOptions.length === 1) {
const tag = getTagProps(selectedOptions[0]);
return (0, TagGroup_1.isCategoryTag)(tag) ? (0, jsx_runtime_1.jsx)(CategoryTag_1.CategoryTag, { ...tag }) : (0, jsx_runtime_1.jsx)(Tag_1.Tag, { ...tag });
}
return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { label: `${selectedOptions.length} selected` });
};
const renderSelectionSummary = (selectedOptions) => (0, jsx_runtime_1.jsx)(TagGroup_1.TagGroup, { tags: selectedOptions.map(getTagProps) });
return ((0, jsx_runtime_1.jsx)(SelectBase_1.SelectBase, { ...props, isMultiSelectable: true, renderOption: renderOption, onOptionsSelected: handleOptionsSelected, renderSelection: renderSelection, renderSelectionSummary: renderSelectionSummary, clearSelection: () => {
props.onChange([]);
} }));
}