@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
52 lines • 3.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LabelField = exports.LabelValue = void 0;
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 react_tagsinput_1 = tslib_1.__importDefault(require("react-tagsinput"));
const utils_1 = require("./utils");
require("./LabelField.css");
const use_translation_wrapper_1 = require("../../../hooks/use-translation-wrapper");
const exclamation_circle_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon"));
const LabelValue = ({ value, onClose }) => (React.createElement(react_core_1.Label, { className: "label-field__value", variant: "outline", onClose: onClose }, value));
exports.LabelValue = LabelValue;
const LabelField = (_a) => {
var _b;
var { label, labelIcon, helperText, isRequired, onChange, validate, idPostfix } = _a, props = tslib_1.__rest(_a, ["label", "labelIcon", "helperText", "isRequired", "onChange", "validate", "idPostfix"]);
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const [input, setInput] = React.useState('');
const [field, { touched, error }, { setValue, setTouched }] = (0, formik_1.useField)({
name: props.name,
validate,
});
const fieldId = (0, utils_1.getFieldId)(props.name, 'input', idPostfix);
const isValid = !(touched && error);
const errorMessage = !isValid ? error : '';
return (React.createElement(react_core_1.FormGroup, { fieldId: fieldId, label: label, isRequired: isRequired, labelIcon: labelIcon },
t("ai:Enter key=value and then press 'enter' or 'space' or use a ',' to input the label."),
React.createElement("div", { className: "co-search-input pf-v5-c-form-control" },
React.createElement(react_tagsinput_1.default, Object.assign({}, field, { onChange: (tags) => {
setValue(tags);
setInput('');
onChange && onChange(tags);
!touched && setTouched(true);
}, addKeys: [13, 32, 188], renderTag: ({ tag, key, onRemove, getTagDisplayValue }) => (React.createElement(exports.LabelValue, { key: key, onClose: () => onRemove(key), value: getTagDisplayValue(tag) })), addOnBlur: true, inputProps: {
autoFocus: false,
className: 'label-field__input',
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
placeholder: ((_b = field.value) === null || _b === void 0 ? void 0 : _b.length) ? '' : 'app=frontend',
spellCheck: 'false',
id: 'tags-input',
value: input,
// eslint-disable-next-line
onChange: (e) => setInput(e.target.value),
['data-test']: 'tags-input',
} }))),
(errorMessage || helperText) && (React.createElement(react_core_1.FormHelperText, null,
React.createElement(react_core_1.HelperText, null,
React.createElement(react_core_1.HelperTextItem, { icon: errorMessage && React.createElement(exclamation_circle_icon_1.default, null), variant: errorMessage ? 'error' : 'default', id: errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper` }, errorMessage ? errorMessage : helperText))))));
};
exports.LabelField = LabelField;
//# sourceMappingURL=LabelField.js.map