@keycloakify/keycloak-admin-ui
Version:
Repackaged Keycloak Admin UI
84 lines • 4.93 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { fromEvent } from "file-selector";
import { useDropzone, } from "react-dropzone";
import { FileUploadField } from "../../../components/json-file-upload/patternfly/FileUploadField";
import { fileReaderType, readFile } from "../../../components/json-file-upload/patternfly/fileUtils";
export const FileUpload = ({ id, type, value = type === fileReaderType.text || type === fileReaderType.dataURL
? ""
: undefined, filename = "", children = null,
// TODO: This should be removed as part of https://github.com/keycloak/keycloak/issues/32420
// eslint-disable-next-line @typescript-eslint/no-deprecated
onChange, onFileInputChange, onReadStarted, onReadFinished, onReadFailed, onClearClick, onClick = (event) => event.preventDefault(), onTextChange, onDataChange, dropzoneProps = {}, ...props }) => {
const onDropAccepted = (acceptedFiles, event) => {
var _a;
if (acceptedFiles.length > 0) {
const fileHandle = acceptedFiles[0];
if ((event === null || event === void 0 ? void 0 : event.type) === "drop") {
onFileInputChange === null || onFileInputChange === void 0 ? void 0 : onFileInputChange(event, fileHandle);
}
if (type === fileReaderType.text || type === fileReaderType.dataURL) {
onChange === null || onChange === void 0 ? void 0 : onChange("", fileHandle.name, event); // Show the filename while reading
onReadStarted === null || onReadStarted === void 0 ? void 0 : onReadStarted(fileHandle);
readFile(fileHandle, type)
.then((data) => {
onReadFinished === null || onReadFinished === void 0 ? void 0 : onReadFinished(fileHandle);
onChange === null || onChange === void 0 ? void 0 : onChange(data, fileHandle.name, event);
onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(data);
})
.catch((error) => {
onReadFailed === null || onReadFailed === void 0 ? void 0 : onReadFailed(error, fileHandle);
onReadFinished === null || onReadFinished === void 0 ? void 0 : onReadFinished(fileHandle);
onChange === null || onChange === void 0 ? void 0 : onChange("", "", event); // Clear the filename field on a failure
onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange("");
});
}
else {
onChange === null || onChange === void 0 ? void 0 : onChange(fileHandle, fileHandle.name, event);
}
}
(_a = dropzoneProps.onDropAccepted) === null || _a === void 0 ? void 0 : _a.call(dropzoneProps, acceptedFiles, event);
};
const onDropRejected = (rejectedFiles, event) => {
var _a;
if (rejectedFiles.length > 0) {
onChange === null || onChange === void 0 ? void 0 : onChange("", rejectedFiles[0].file.name, event);
}
(_a = dropzoneProps.onDropRejected) === null || _a === void 0 ? void 0 : _a.call(dropzoneProps, rejectedFiles, event);
};
const onClearButtonClick = (event) => {
onChange === null || onChange === void 0 ? void 0 : onChange("", "", event);
onClearClick === null || onClearClick === void 0 ? void 0 : onClearClick(event);
setFileValue("");
};
const { getRootProps, getInputProps, isDragActive, open, inputRef } = useDropzone({
multiple: false,
...dropzoneProps,
onDropAccepted,
onDropRejected,
});
const setFileValue = (filename) => {
if (!inputRef.current) {
return;
}
inputRef.current.value = filename;
};
const oldInputProps = getInputProps();
const inputProps = {
...oldInputProps,
onChange: async (e) => {
var _a;
(_a = oldInputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(oldInputProps, e);
const files = await fromEvent(e.nativeEvent);
if (files.length === 1) {
onFileInputChange === null || onFileInputChange === void 0 ? void 0 : onFileInputChange(e, files[0]);
}
},
};
return (_jsxs(FileUploadField, { ...getRootProps({
...props,
refKey: "containerRef",
onClick: (event) => event.preventDefault(),
}), tabIndex: undefined, id: id, type: type, filename: filename, value: value, onChange: onChange, isDragActive: isDragActive, onBrowseButtonClick: open, onClearButtonClick: onClearButtonClick, onTextAreaClick: onClick, onTextChange: onTextChange, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { ...inputProps, ref: inputRef }), children] }));
};
FileUpload.displayName = "FileUpload";
//# sourceMappingURL=FileUpload.js.map