@pagopa/mui-italia
Version:
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
110 lines (109 loc) • 8.13 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SingleFileInput = exports.UploadStatus = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_1 = require("@mui/material");
/* Icons */
const AttachFile_1 = tslib_1.__importDefault(require("@mui/icons-material/AttachFile"));
const Close_1 = tslib_1.__importDefault(require("@mui/icons-material/Close"));
const CloudUpload_1 = tslib_1.__importDefault(require("@mui/icons-material/CloudUpload"));
const Error_1 = tslib_1.__importDefault(require("@mui/icons-material/Error"));
/* Utils */
const utils_1 = require("./utils");
const OrientedBox = ({ vertical, children, }) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ display: "flex", justifyContent: "center", alignItems: "center", flexDirection: vertical ? "column" : "row", margin: "auto", flex: 1, p: 3 }, { children: children })));
var UploadStatus;
(function (UploadStatus) {
UploadStatus["IDLE"] = "IDLE";
UploadStatus["LOADING"] = "LOADING";
UploadStatus["REJECTED"] = "REJECTED";
UploadStatus["ERROR"] = "ERROR";
UploadStatus["SELECTED"] = "SELECTED";
})(UploadStatus = exports.UploadStatus || (exports.UploadStatus = {}));
const SingleFileInput = ({ value, label, error, accept, loading, vertical = false, onFileSelected, onFileRemoved, onFileRejected, dropzoneLabel, dropzoneButton, loadingLabel = "Caricamento in corso...", rejectedLabel, }) => {
const uploadInputRef = (0, react_1.useRef)();
const [id, _] = (0, react_1.useState)(utils_1.generateRandomID);
const [isFileRejected, setIsFileRejected] = (0, react_1.useState)(false);
const status = (0, utils_1.getStatus)(value, !!loading, !!error, isFileRejected && !!rejectedLabel);
const containerStyle = (0, utils_1.getContainerStyle)(status);
const chooseFileHandler = () => {
setIsFileRejected(false);
const target = uploadInputRef.current;
target === null || target === void 0 ? void 0 : target.click();
};
const handleDragEnter = (e) => {
e.preventDefault();
e.stopPropagation();
setIsFileRejected(false);
};
const handleDragLeave = (e) => {
e.preventDefault();
e.stopPropagation();
};
const handleDragOver = (e) => {
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = "copy";
};
const handleDrop = (e) => {
e.preventDefault();
e.stopPropagation();
const droppedFile = e.dataTransfer.files[0];
if ((0, utils_1.verifyAccept)(droppedFile.type, accept)) {
onFileSelected(droppedFile);
}
else {
setIsFileRejected(true);
if (onFileRejected) {
onFileRejected(droppedFile);
}
}
e.dataTransfer.clearData();
};
const handleSelectFile = (e) => {
var _a;
const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a.item(0);
if (file) {
onFileSelected(file);
}
};
const handleRemoveFile = () => {
if (value && onFileRemoved) {
onFileRemoved(value);
}
};
const showDropzone = status === UploadStatus.IDLE ||
status === UploadStatus.REJECTED ||
status === UploadStatus.ERROR;
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ sx: { width: "100%" } }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, Object.assign({ error: error, sx: { fontWeight: 600, mb: 1 }, htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: Object.assign({ position: "relative", minHeight: 80, borderRadius: "10px", display: "flex", justifyContent: "center", alignItems: "center" }, containerStyle) }, { children: [showDropzone && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
cursor: "pointer",
backgroundColor: "transparent",
border: "none",
flex: 1,
}, onDragOver: handleDragOver, onDrop: handleDrop, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, component: "button", type: "button", onClick: chooseFileHandler, "data-testid": "loadFromPc" }, { children: (0, jsx_runtime_1.jsxs)(OrientedBox, Object.assign({ vertical: vertical }, { children: [status === UploadStatus.REJECTED && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Error_1.default, { color: "error", sx: {
mb: vertical ? "10px" : 0,
mr: vertical ? 0 : "10px",
} }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "error", display: "inline", variant: "body2" }, { children: rejectedLabel }))] })), (status === UploadStatus.IDLE ||
status === UploadStatus.ERROR) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CloudUpload_1.default, { color: (0, utils_1.getColorStyle)(status) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: status === UploadStatus.ERROR
? (0, utils_1.getColorStyle)(status)
: "text." + (0, utils_1.getColorStyle)(status), display: "inline", variant: "body2", sx: {
my: vertical ? "10px" : 0,
mx: vertical ? 0 : "10px",
} }, { children: dropzoneLabel })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained" }, { children: dropzoneButton }))] })), (0, jsx_runtime_1.jsx)(material_1.Input, { inputProps: { accept }, type: "file", id: id, sx: { display: "none" }, inputRef: uploadInputRef, onChange: handleSelectFile, "data-testid": "fileInput" })] })) }))), status === UploadStatus.LOADING && ((0, jsx_runtime_1.jsxs)(OrientedBox, Object.assign({ vertical: vertical }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ display: "inline-block", variant: "body2", component: "span" }, { children: loadingLabel })), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: "indeterminate", sx: vertical
? {
ml: 0,
mt: 2,
width: "100%",
}
: {
ml: 2,
mt: 0,
display: "flex",
flexDirection: "row",
flex: 1,
} })] }))), status === UploadStatus.SELECTED && value && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", sx: { width: "100%" } }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "center", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(AttachFile_1.default, { sx: { mr: 1 }, color: "primary" }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: "primary" }, { children: (0, utils_1.truncateFileName)(value.name) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600, sx: { marginLeft: "30px" } }, { children: [(value.size / 1024).toFixed(2), "\u00A0KB"] }))] })), onFileRemoved && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleRemoveFile }, { children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })))] })))] }))] })));
};
exports.SingleFileInput = SingleFileInput;
exports.default = exports.SingleFileInput;