@openshift-assisted/ui-lib
Version:
React component library for the Assisted Installer UI
75 lines • 4.39 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 utils_1 = require("./utils");
const use_translation_wrapper_1 = require("../../../hooks/use-translation-wrapper");
const formik_1 = require("formik");
const exclamation_circle_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/js/icons/exclamation-circle-icon"));
const CertificatesUploadField = ({ label, labelIcon, helperText, isRequired, children, idPostfix, isDisabled, name, }) => {
const { t } = (0, use_translation_wrapper_1.useTranslation)();
const maxFileSize = 100000; //100 kb
const maxFileSizeKb = 100;
const acceptedFiles = {
'application/x-pem-file': ['.pem', '.crt', '.ca', '.cert'],
'application/x-x509-ca-cert': ['.pem', '.crt', '.ca', '.cert'],
'text/plain': ['.pem', '.crt', '.ca', '.cert'],
};
const fieldId = (0, utils_1.getFieldId)(name, 'input', idPostfix);
const [field, , { setValue }] = (0, formik_1.useField)(name);
const [filename, setFilename] = React.useState('');
const [isLoading, setIsLoading] = React.useState(false);
const [isRejected, setIsRejected] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState('');
const handleFileInputChange = (_event, file) => {
setFilename(file.name);
};
const handleTextOrDataChange = (value) => {
const contentFile = new Blob([value], { type: 'text/plain;charset=utf-8' });
if (contentFile.size > maxFileSize) {
setIsRejected(true);
setErrorMessage(t('ai:File size is too big. Upload a new {{maxFileSizeKb}} Kb or less.', { maxFileSizeKb }));
setValue(value);
}
else {
setIsRejected(false);
setErrorMessage('');
setValue(value);
}
};
const handleClear = () => {
setFilename('');
setValue('');
setIsRejected(false);
setErrorMessage('');
};
const handleFileRejected = (_rejectedFiles) => {
if (_rejectedFiles[0].file.size > maxFileSize) {
setIsRejected(true);
setErrorMessage(t('ai:File size is too big. Upload a new {{maxFileSizeKb}} Kb or less.', { maxFileSizeKb }));
}
else {
setIsRejected(true);
setErrorMessage(t('ai:File type is not supported. File type must be {{acceptedFiles}}.', { acceptedFiles }));
}
};
const handleFileReadStarted = () => {
setIsLoading(true);
};
const handleFileReadFinished = () => {
setIsLoading(false);
};
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' }, isRequired: isRequired, "aria-describedby": `${fieldId}-helper`, type: "text", value: field.value, filename: filename, onFileInputChange: handleFileInputChange, onDataChange: (_event, value) => handleTextOrDataChange(value), onTextChange: (_event, value) => handleTextOrDataChange(value), onReadStarted: handleFileReadStarted, onReadFinished: handleFileReadFinished, onClearClick: handleClear, isLoading: isLoading, dropzoneProps: {
accept: acceptedFiles,
maxSize: maxFileSize,
onDropRejected: handleFileRejected,
}, validated: isRejected ? 'error' : 'default', disabled: isDisabled, allowEditingUploadedText: true }),
(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 = CertificatesUploadField;
//# sourceMappingURL=CertificatesUploadField.js.map