@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
59 lines • 3.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SubnetsDropdown = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const react_core_1 = require("@patternfly/react-core");
const formik_1 = require("formik");
const common_1 = require("../../../../common");
const toFormSelectOptions = (subnets) => {
return subnets.map((hn, index) => ({
label: `${hn.humanized}${hn.isValid ? '' : ' (Invalid network)'}`,
value: hn.subnet,
isDisabled: false,
id: `form-input-hostSubnet-field-option-${index}`,
}));
};
const makeNoSubnetSelectedOption = (availableSubnets) => ({
label: `Please select a subnet. (${availableSubnets} available)`,
value: common_1.NO_SUBNET_SET,
isDisabled: true,
id: 'form-input-hostSubnet-field-option-no-subnet-selected',
});
const noSubnetAvailableOption = {
label: 'No subnets are currently available',
value: common_1.NO_SUBNET_SET,
isDisabled: true,
id: 'form-input-hostSubnet-field-option-no-subnet-available',
};
const SubnetsDropdown = ({ name, machineSubnets, isDisabled }) => {
const [field, , { setValue }] = (0, formik_1.useField)(name);
const [isOpen, setOpen] = react_1.default.useState(false);
const fieldId = (0, common_1.getFieldId)(name, 'input');
const { itemsSubnets, currentDisplayValue } = react_1.default.useMemo(() => {
const itemsSubnets = machineSubnets.length === 0
? [noSubnetAvailableOption]
: [makeNoSubnetSelectedOption(machineSubnets.length)].concat(toFormSelectOptions(machineSubnets));
let currentDisplayValue = itemsSubnets[0].label; // The placeholder is the fallback
if (field.value) {
const subnetItem = itemsSubnets.find((item) => item.value === field.value);
if (subnetItem) {
currentDisplayValue = subnetItem.label;
}
}
else if (machineSubnets.length === 1) {
// When there is only one subnet, it's selected by default. We skip the placeholder at index 0.
currentDisplayValue = itemsSubnets[1].label;
}
return { itemsSubnets, currentDisplayValue: currentDisplayValue };
}, [machineSubnets, field.value]);
const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (react_1.default.createElement(react_core_1.DropdownItem, { key: value, id: value, isDisabled: isDisabled, value: value }, label)));
const onSelect = (event) => {
setValue(event === null || event === void 0 ? void 0 : event.currentTarget.id);
setOpen(false);
};
const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.MenuToggle, { ref: toggleRef, onClick: () => setOpen(!isOpen), isExpanded: isOpen, isDisabled: isDisabled, className: "pf-v5-u-w-100", id: fieldId }, currentDisplayValue));
return (react_1.default.createElement(react_core_1.Dropdown, Object.assign({}, field, { id: `${fieldId}-dropdown`, onOpenChange: () => setOpen(!isOpen), onSelect: onSelect, toggle: toggle, isOpen: isOpen }), dropdownItems));
};
exports.SubnetsDropdown = SubnetsDropdown;
//# sourceMappingURL=SubnetsDropdown.js.map