@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
74 lines • 5.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const formik_1 = require("formik");
const react_core_1 = require("@patternfly/react-core");
const utils_1 = require("./utils");
const exclamation_circle_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon"));
const times_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/times-icon"));
const use_translation_wrapper_1 = require("../../../hooks/use-translation-wrapper");
// Field value is a string[]
const MultiSelectField = (_a) => {
var _b;
var { label, options, helperText, placeholderText, isRequired, onChange, getHelperText, idPostfix, labelIcon } = _a, props = tslib_1.__rest(_a, ["label", "options", "helperText", "placeholderText", "isRequired", "onChange", "getHelperText", "idPostfix", "labelIcon"]);
const [isOpen, setOpen] = react_1.default.useState(false);
const [textValue, setTextValue] = react_1.default.useState('');
const [field, { touched, error }, { setValue }] = (0, formik_1.useField)(props.name);
const fieldId = (0, utils_1.getFieldId)(props.name, 'multiinput', idPostfix);
const isValid = !(touched && error);
const errorMessage = !isValid ? error : '';
const hText = getHelperText ? getHelperText(((_b = field.value) === null || _b === void 0 ? void 0 : _b.join(',')) || '') : helperText;
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const onToggle = (isOpen) => setOpen(isOpen);
const onClearSelection = () => {
// onChange && onChange(event);
setValue([]);
setTextValue('');
onChange && onChange([]);
setOpen(false);
};
const onSelect = (selection) => {
// already selected
const selected = field.value;
// selected just now
const selectionValue = selection.value || selection;
let newValue;
if (selected.includes(selectionValue)) {
newValue = selected.filter((sel) => sel !== selectionValue);
}
else {
newValue = [...field.value, selectionValue];
}
setValue(newValue);
onChange && onChange(newValue);
};
const deleteChip = (chip) => {
const newValue = field.value.filter((val) => val !== chip);
setValue(newValue);
setTextValue('');
onChange && onChange(newValue);
};
const filteredOptions = options.filter((option) => {
const value = option.value;
return (option.displayName.toLowerCase().includes(textValue.toLowerCase()) &&
!(field.value || []).includes(value.toString()));
});
const children = filteredOptions.map((option) => {
const value = option.value;
return (react_1.default.createElement(react_core_1.DropdownItem, { key: option.id, id: option.id, value: value }, option.displayName));
});
return (react_1.default.createElement(react_core_1.FormGroup, { fieldId: fieldId, label: label, isRequired: isRequired, labelIcon: labelIcon },
react_1.default.createElement(react_core_1.Dropdown, { id: fieldId, isOpen: isOpen, onSelect: (event, value) => onSelect(value), onOpenChange: onToggle, toggle: (toggleRef) => (react_1.default.createElement(react_core_1.MenuToggle, { ref: toggleRef, isFullWidth: true, onClick: () => onToggle(!isOpen), isExpanded: isOpen, variant: "typeahead" },
react_1.default.createElement(react_core_1.TextInputGroup, null,
react_1.default.createElement(react_core_1.LabelGroup, null, field.value.map((currentChip) => (react_1.default.createElement(react_core_1.Label, { key: currentChip, variant: "outline", onClose: () => deleteChip(currentChip) }, currentChip)))),
react_1.default.createElement(react_core_1.TextInputGroupMain, { placeholder: placeholderText, onClick: () => onToggle(!isOpen), value: textValue, onChange: (event, value) => setTextValue(value) }),
react_1.default.createElement(react_core_1.TextInputGroupUtilities, null,
react_1.default.createElement(react_core_1.Button, { variant: "plain", onClick: onClearSelection, "aria-label": "Clear button and input", icon: react_1.default.createElement(times_icon_1.default, null) }))))), shouldFocusToggleOnSelect: true },
react_1.default.createElement(react_core_1.DropdownList, null, children.length ? (children) : (react_1.default.createElement(react_core_1.DropdownItem, { key: "No options available", id: "No options available", value: "No options available" }, t('ai:No options available'))))),
(errorMessage || hText) && (react_1.default.createElement(react_core_1.FormHelperText, null,
react_1.default.createElement(react_core_1.HelperText, null,
react_1.default.createElement(react_core_1.HelperTextItem, { icon: react_1.default.createElement(exclamation_circle_icon_1.default, null), variant: errorMessage ? 'error' : 'default', id: errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper` }, errorMessage ? errorMessage : hText))))));
};
exports.default = MultiSelectField;
//# sourceMappingURL=MultiSelectField.js.map