@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
30 lines • 2.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(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"));
// Reimplement this component to use custom Select in case of using it along the MultiSelectField component due to visual differences.
// Idea: use Formik's field.multiple to switch among single and multi-selection.
// See: https://www.patternfly.org/v4/components/form-select/design-guidelines#usage
const SelectField = (_a) => {
var { label, options, helperText, isRequired, onChange, getHelperText, idPostfix, labelIcon, callFormikOnChange = true } = _a, props = tslib_1.__rest(_a, ["label", "options", "helperText", "isRequired", "onChange", "getHelperText", "idPostfix", "labelIcon", "callFormikOnChange"]);
const [field, { touched, error }] = (0, formik_1.useField)(props.name);
const fieldId = (0, utils_1.getFieldId)(props.name, 'input', idPostfix);
const isValid = !(touched && error);
const errorMessage = !isValid ? error : '';
const hText = getHelperText ? getHelperText(field.value) : helperText;
return (React.createElement(react_core_1.FormGroup, { fieldId: fieldId, label: label, isRequired: isRequired, labelIcon: labelIcon, id: `form-control__${fieldId}` },
React.createElement(react_core_1.FormSelect, Object.assign({}, field, props, { id: fieldId, validated: isValid ? 'default' : 'error', isRequired: isRequired, "aria-describedby": `${fieldId}-helper`, onChange: (event, value) => {
//customHandleChange enables calling formik change handler explicitly, useful for example to have the previous value
callFormikOnChange && field.onChange(event);
onChange && onChange(event, value);
} }), options.map((option, index) => (React.createElement(react_core_1.FormSelectOption, Object.assign({ key: option.id || index }, option))))),
(errorMessage || hText) && (React.createElement(react_core_1.FormHelperText, null,
React.createElement(react_core_1.HelperText, null,
React.createElement(react_core_1.HelperTextItem, { icon: React.createElement(exclamation_circle_icon_1.default, null), variant: errorMessage ? 'error' : 'default', id: errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper` }, errorMessage ? errorMessage : hText))))));
};
exports.default = SelectField;
//# sourceMappingURL=SelectField.js.map