@octopusdeploy/design-system-components
Version:
The design systems component library.
35 lines (34 loc) • 1.99 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 Tag_1 = require("../../Tag/Tag");
const MultiSelectOption_1 = require("./MultiSelectOption");
const SelectBase_1 = require("./SelectBase");
/**
* MultiSelect component
*
* @remarks Rollout currently paused — do not use in new code until further notice.
* Use `<DeprecatedMultiSelect>` instead.
* @see <DeprecatedMultiSelect>
*/
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 renderOption = (option, selected) => (0, jsx_runtime_1.jsx)(MultiSelectOption_1.MultiSelectOption, { option: option, selected: selected });
const renderSelection = (selectedOptions) => {
if (selectedOptions.length === 1) {
const selectedOption = selectedOptions[0];
return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { label: (0, SelectBase_1.getSelectedOptionLabel)(selectedOption), onDismiss: canChange ? () => handleOptionsSelected([selectedOption]) : undefined, prefix: (0, SelectBase_1.isMissingSelectedOption)(selectedOption) ? (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationIcon, { size: 16 }) : undefined });
}
return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { label: `${selectedOptions.length} selected` });
};
return ((0, jsx_runtime_1.jsx)(SelectBase_1.SelectBase, { ...props, isMultiSelectable: true, renderOption: renderOption, onOptionsSelected: handleOptionsSelected, renderSelection: renderSelection, clearSelection: () => {
props.onChange([]);
} }));
}