@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
66 lines • 3.95 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 use_translation_wrapper_1 = require("../../../hooks/use-translation-wrapper");
const exclamation_circle_icon_1 = require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon");
const UploadField = ({ label, labelIcon, helperText, getErrorText, isRequired, children, idPostfix, isDisabled, name, onBlur, allowEdittingUploadedText = true, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const [filename, setFilename] = React.useState();
const [isFileUploading, setIsFileUploading] = React.useState(false);
const [field, { touched, error }, { setValue, setTouched }] = (0, formik_1.useField)(name);
const fieldId = (0, utils_1.getFieldId)(name, 'input', idPostfix);
const isValid = !((touched || filename) && error);
const getErrorMessage = () => {
if (!isValid && error) {
return getErrorText ? getErrorText(error) : error;
}
return '';
};
const errorMessage = getErrorMessage();
const acceptedFiles = { 'application/x-ssh-key': ['.pub'] };
const maxFileSize = 2048;
return (React.createElement(react_core_1.FormGroup, { fieldId: fieldId, label: label, isRequired: isRequired, labelIcon: labelIcon },
children,
React.createElement(react_core_1.FileUpload, { filenamePlaceholder: t('ai:Drag a file here or browse to upload'), browseButtonText: t('ai:Browse...'), clearButtonText: t('ai:Clear'), id: field.name, style: { resize: 'vertical' }, validated: isValid ? 'default' : 'error', isRequired: isRequired, "aria-describedby": `${fieldId}-helper`, type: "text", value: field.value, filename: filename, onDataChange: (_event, file) => {
setValue(file);
setTouched(true);
}, onTextChange: (_event, file) => {
setValue(file);
setTouched(true);
}, onFileInputChange: (_event, file) => {
setFilename(file.name);
setTouched(true);
setValue(file);
}, onBlur: (e) => {
const file = field.value;
if (file instanceof File) {
const reader = new FileReader();
reader.onload = (event) => {
if (event.target) {
const contentAsString = event.target.result;
onBlur && onBlur(e, contentAsString);
}
};
// Read the file content as text
reader.readAsText(file);
}
else {
onBlur && onBlur(e, file);
}
}, onReadStarted: () => setIsFileUploading(true), onReadFinished: () => setIsFileUploading(false), isLoading: isFileUploading, disabled: isDisabled, allowEditingUploadedText: allowEdittingUploadedText, dropzoneProps: {
accept: acceptedFiles,
maxSize: maxFileSize,
}, onClearClick: () => {
setFilename('');
setValue('');
} }),
(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.ExclamationCircleIcon, null), variant: errorMessage ? 'error' : 'default', id: errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper` }, errorMessage ? errorMessage : helperText))))));
};
exports.default = UploadField;
//# sourceMappingURL=UploadField.js.map