@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
42 lines • 3.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_core_1 = require("@patternfly/react-core");
const use_translation_wrapper_1 = require("../../../common/hooks/use-translation-wrapper");
const common_1 = require("../../../common");
const formik_1 = require("formik");
const useFormikHelpers_1 = require("../../../common/hooks/useFormikHelpers");
const cimCpuArchitectures = [
common_1.CpuArchitecture.x86,
common_1.CpuArchitecture.ARM,
common_1.CpuArchitecture.s390x,
];
const CpuArchitectureDropdown = ({ isDisabled = false, cpuArchitectures, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const [{ name, value }, , { setValue }] = (0, formik_1.useField)('cpuArchitecture');
const [cpuArchOpen, setCpuArchOpen] = React.useState(false);
const fieldId = (0, common_1.getFieldId)(name, 'input');
const { setValue: setUserManagedNetworking } = (0, useFormikHelpers_1.useFormikHelpers)('userManagedNetworking');
const onCpuArchSelect = (e) => {
const val = e === null || e === void 0 ? void 0 : e.currentTarget.id;
setValue(val);
setUserManagedNetworking(val === common_1.CpuArchitecture.s390x);
setCpuArchOpen(false);
};
const dropdownItems = React.useMemo(() => cimCpuArchitectures.map((arch) => {
const isItemEnabled = !cpuArchitectures || cpuArchitectures.includes(arch);
const disabledReason = t('ai:This option is not available with the selected OpenShift version');
return (React.createElement(react_core_1.DropdownItem, { key: arch, id: arch, isAriaDisabled: !isItemEnabled, selected: arch === value, description: common_1.architectureData[arch].description, tooltipProps: { content: disabledReason, position: 'top', hidden: isItemEnabled }, onClick: (e) => e.preventDefault() }, common_1.architectureData[arch].label));
}), [cpuArchitectures, t, value]);
React.useEffect(() => {
if (!isDisabled && value !== '' && cpuArchitectures && !(cpuArchitectures === null || cpuArchitectures === void 0 ? void 0 : cpuArchitectures.includes(value))) {
const defaultVal = (cpuArchitectures === null || cpuArchitectures === void 0 ? void 0 : cpuArchitectures[0]) || common_1.CpuArchitecture.x86;
setValue(defaultVal);
}
}, [cpuArchitectures, isDisabled, setValue, value]);
return !isDisabled ? (React.createElement(react_core_1.FormGroup, { isInline: true, id: `form-control__${fieldId}`, label: t('ai:CPU architecture'), isRequired: true, name: 'cpuArchiteture' },
React.createElement(react_core_1.Dropdown, { id: `${fieldId}-dropdown`, toggle: (toggleRef) => (React.createElement(react_core_1.MenuToggle, { id: fieldId, ref: toggleRef, onClick: () => setCpuArchOpen(!cpuArchOpen), className: "pf-v5-u-w-100" }, value ? common_1.architectureData[value].label : t('ai:CPU architecture'))), isOpen: cpuArchOpen, onSelect: onCpuArchSelect, onOpenChange: () => setCpuArchOpen(!cpuArchOpen) }, dropdownItems))) : (React.createElement(common_1.StaticField, { name: 'cpuArchitecture', label: t('ai:CPU architecture'), isRequired: true }, common_1.architectureData[value].label));
};
exports.default = CpuArchitectureDropdown;
//# sourceMappingURL=CpuArchitectureDropdown.js.map