@novin-dev/formalite
Version:
Generate MUI form with few line of code
206 lines (203 loc) • 9.76 kB
JavaScript
import { __spreadArray } from 'tslib';
import React from 'react';
import { Stack, Box, Fade, LinearProgress, Typography } from '@mui/material';
import { Image } from '../../../../Image/Image.js';
import CloseIcon from '@mui/icons-material/Close';
import { fData } from '../../../config/utils.js';
import ReplayIcon from '@mui/icons-material/Replay';
import DownloadIcon from '@mui/icons-material/Download';
import BrokenImageIcon from '@mui/icons-material/BrokenImage';
import { useI18nContext } from '../../../../base/I18nProvider.js';
import { downloadBase64 } from '../utils.js';
import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
import { getExtensionFromUrl } from '../../../../../config/utils.js';
import DOC from './svg/files/doc.svg.js';
import MP4 from './svg/files/mp4.svg.js';
import PDF from './svg/files/pdf.svg.js';
import ZIP from './svg/files/zip.svg.js';
import FILE from './svg/files/file.svg.js';
// ----------------------------------------------------------------------
var FileIcon = function (props) {
switch (props.type.toLowerCase()) {
case "mp4":
return React.createElement("img", { src: MP4, alt: "aa" });
case "doc":
case "docs":
return React.createElement("img", { src: DOC, alt: "aa" });
case "pdf":
return React.createElement("img", { src: PDF, alt: "aa" });
case "zip":
case "rar":
return React.createElement("img", { src: ZIP, alt: "aa" });
case "png":
case "jpg":
case "jpeg":
case "gif":
case "bmp":
case "ico":
case "tif":
case "tiff":
case "svg":
return props.preview;
default:
return React.createElement("img", { src: FILE, alt: "aa" });
}
};
var HelperSection = function (_a) {
var required = _a.required, file = _a.file;
var t = useI18nContext().t;
return (React.createElement(Box, { sx: { p: 3 } },
React.createElement(Typography, { gutterBottom: true, variant: "h5" }, file
? "".concat(file.original === "selected" ? file.name : file.originalName, " ").concat(file.size ? " - ".concat(fData(file.size)) : "")
: "".concat(t("dropzone_drop_or_select_file"), " ").concat(required ? "*" : "")),
React.createElement(Typography, { variant: "body2", sx: { color: "text.secondary" } },
t("dropzone_drop_files_here_or_click"),
"\u00A0",
React.createElement(Typography, { variant: "body2", component: "span", sx: { color: "primary.main", textDecoration: "underline" } }, t("dropzone_browse")),
"\u00A0",
t("dropzone_select_thorough_your_machine"))));
};
// eslint-disable-next-line sonarjs/cognitive-complexity
function BlockContent(props) {
// eslint-disable-next-line sonarjs/cognitive-complexity
var boxClick = function (e) {
e.stopPropagation();
props.uploadController.abort();
if (props.setFile) {
props.setFile(function (pre) {
var tempArray = __spreadArray([], pre, true);
if (tempArray.length) {
tempArray[0].status = "deleting";
}
return tempArray;
});
}
try {
if (props.file) {
props.file.controller.abort();
}
}
catch (e1) {
// Do nothing
}
if (props.file && props.onDelete) {
props
.onDelete(props.file.uid, props.file.original === "default", !props.file.errorText)
.then(function () {
if (props.setFile && props.resetDropZone) {
props.setFile([]);
props.resetDropZone();
}
})
.catch(function (e1) {
if (props.setFile) {
props.setFile(function (pre) {
var tempArray = __spreadArray([], pre, true);
if (tempArray.length && tempArray[0].status) {
tempArray[0].status = "error";
tempArray[0].errorText = e1.message;
}
return tempArray;
});
}
});
}
};
return (React.createElement(Stack, { spacing: 2, alignItems: "center", justifyContent: "center", direction: { xs: "column", md: props.isLessMd ? "column" : "row" }, sx: {
width: 1,
textAlign: { xs: "center", md: props.isLessMd ? "center" : "left" },
} },
props.file ? (React.createElement(Box, { width: 220, sx: { position: "relative" } },
React.createElement(Box, { sx: function (theme) { return ({
position: "absolute",
top: "-5px",
right: "-5px",
borderRadius: "6px",
background: theme.palette.error.main,
width: "24px",
color: "white",
height: "24px",
zIndex: 5,
"&:hover": {
background: theme.palette.error.dark,
cursor: "pointer",
},
}); }, onClick: boxClick },
React.createElement(CloseIcon, { sx: { padding: "4px", boxSizing: "border-box" } })),
props.file.status === "error" && (React.createElement(Box, { sx: function (theme) { return ({
position: "absolute",
top: "-5px",
right: "25px",
borderRadius: "6px",
background: theme.palette.info.main,
width: "24px",
color: "white",
height: "24px",
zIndex: 5,
"&:hover": {
background: theme.palette.info.dark,
cursor: "pointer",
},
}); }, onClick: function (e) {
e.stopPropagation();
props.uploadFunction(props.file);
} },
React.createElement(ReplayIcon, { sx: { padding: "4px", boxSizing: "border-box" } }))),
props.file &&
props.file.status !== "error" &&
props.file.original === "default" && (React.createElement(Box, { sx: function (theme) { return ({
position: "absolute",
top: "-5px",
right: "25px",
borderRadius: "6px",
background: theme.palette.primary.main,
width: "24px",
color: "white",
height: "24px",
zIndex: 5,
"&:hover": {
background: theme.palette.primary.dark,
cursor: "pointer",
},
}); }, onClick: function (e) {
e.stopPropagation();
downloadBase64(props.file.preview, props.file.originalName);
} },
React.createElement(DownloadIcon, { sx: { padding: "4px", boxSizing: "border-box" } }))),
props.file.status === "error" && (React.createElement(Box, { sx: function (theme) { return ({
position: "absolute",
width: "100%",
height: "100%",
background: "rgba(0,0,0,0.5)",
borderRadius: "8px",
color: theme.palette.grey["300"],
display: "flex",
alignItems: "center",
justifyContent: "center",
}); } },
React.createElement(BrokenImageIcon, { fontSize: "large" }))),
React.createElement(FileIcon, { type: getExtensionFromUrl(props.file), preview: React.createElement(Image, { alt: "file preview", src: props.file.original === "selected"
? "".concat(props.file.preview.toString())
: "".concat((props.file.base64 || "").toString()), sx: {
top: 8,
left: 8,
borderRadius: 1,
width: 220,
"&:hover": {
// filter: "brightness(0.72)",
// cursor: "pointer",
},
} }) }),
props.file.status && (React.createElement(Fade, { in: ["uploading", "deleting"].includes(props.file.status) },
React.createElement(Box, { sx: {
position: "absolute",
bottom: "0",
width: "100%",
padding: 2,
} }, props.file.status === "deleting" ? (React.createElement(LinearProgress, { color: "error", variant: "indeterminate" })) : (React.createElement(LinearProgress, { variant: "determinate", value: props.file.original === "selected"
? props.file.progress
: 0 }))))))) : (React.createElement(CloudUploadOutlinedIcon, { color: "primary", style: { width: "80px", height: "150px" } })),
React.createElement(HelperSection, { required: props.required, file: props.file })));
}
export { FileIcon, BlockContent as default };
//# sourceMappingURL=BlockContent.js.map