@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
58 lines • 3.93 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 react_code_editor_1 = require("@patternfly/react-code-editor");
const useFieldErrorMsg_1 = tslib_1.__importDefault(require("../../../hooks/useFieldErrorMsg"));
const exclamation_circle_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon"));
const paste_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/paste-icon"));
const CodeField = ({ label, labelIcon, helperText, isRequired, validate, idPostfix, language, name, description, isDisabled, downloadFileName, dataTestid, isReadOnly, showCustomControls = false, }) => {
const [field, , { setValue, setTouched }] = (0, formik_1.useField)({ name, validate });
const fieldId = (0, utils_1.getFieldId)(name, 'input', idPostfix);
const errorMessage = (0, useFieldErrorMsg_1.default)({ name, validate });
const isValid = !errorMessage;
const pasteFromClipboardFirefox = () => {
return new Promise((resolve) => {
const handlePaste = (e) => {
var _a;
const text = (_a = e === null || e === void 0 ? void 0 : e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
document.removeEventListener('paste', handlePaste);
resolve(text);
};
document.addEventListener('paste', handlePaste);
alert('Use Ctrl+V to paste the content in this browser');
});
};
const pasteFromClipboard = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
if (navigator.clipboard && navigator.clipboard.readText) {
try {
return yield navigator.clipboard.readText();
}
catch (err) {
return '';
}
}
else {
const text = yield pasteFromClipboardFirefox();
return text;
}
});
const customControl = (React.createElement(react_code_editor_1.CodeEditorControl, { icon: React.createElement(paste_icon_1.default, null), "aria-label": "Paste content", tooltipProps: { content: 'Paste content' }, onClick: () => {
void pasteFromClipboard().then((text) => setValue(text, true));
}, isVisible: true }));
return (React.createElement(react_core_1.FormGroup, { fieldId: fieldId, label: label, isRequired: isRequired, labelIcon: labelIcon, "data-testid": dataTestid ? dataTestid : `${fieldId}-testid` },
description && (React.createElement(react_core_1.HelperText, null,
React.createElement(react_core_1.HelperTextItem, { variant: "indeterminate" }, description))),
React.createElement(react_code_editor_1.CodeEditor, { code: field.value, isUploadEnabled: !isDisabled, isDownloadEnabled: isValid, isCopyEnabled: true, isLanguageLabelVisible: true, height: "400px", language: language, downloadFileName: downloadFileName, onCodeChange: (value) => {
setTouched(true);
setValue(value, true);
}, isReadOnly: isReadOnly, customControls: showCustomControls ? customControl : undefined }),
(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.default = CodeField;
//# sourceMappingURL=CodeField.js.map