@novin-dev/formalite
Version:
Generate MUI form with few line of code
220 lines (213 loc) • 11.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var material = require('@mui/material');
var Image = require('../../../../Image/Image.js');
var CloseIcon = require('@mui/icons-material/Close');
var utils$2 = require('../../../config/utils.js');
var ReplayIcon = require('@mui/icons-material/Replay');
var DownloadIcon = require('@mui/icons-material/Download');
var BrokenImageIcon = require('@mui/icons-material/BrokenImage');
var I18nProvider = require('../../../../base/I18nProvider.js');
var utils = require('../utils.js');
var CloudUploadOutlinedIcon = require('@mui/icons-material/CloudUploadOutlined');
var utils$1 = require('../../../../../config/utils.js');
var doc = require('./svg/files/doc.svg.js');
var mp4 = require('./svg/files/mp4.svg.js');
var pdf = require('./svg/files/pdf.svg.js');
var zip = require('./svg/files/zip.svg.js');
var file = require('./svg/files/file.svg.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
var ReplayIcon__default = /*#__PURE__*/_interopDefaultLegacy(ReplayIcon);
var DownloadIcon__default = /*#__PURE__*/_interopDefaultLegacy(DownloadIcon);
var BrokenImageIcon__default = /*#__PURE__*/_interopDefaultLegacy(BrokenImageIcon);
var CloudUploadOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloudUploadOutlinedIcon);
// ----------------------------------------------------------------------
var FileIcon = function (props) {
switch (props.type.toLowerCase()) {
case "mp4":
return React__default["default"].createElement("img", { src: mp4["default"], alt: "aa" });
case "doc":
case "docs":
return React__default["default"].createElement("img", { src: doc["default"], alt: "aa" });
case "pdf":
return React__default["default"].createElement("img", { src: pdf["default"], alt: "aa" });
case "zip":
case "rar":
return React__default["default"].createElement("img", { src: zip["default"], 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__default["default"].createElement("img", { src: file["default"], alt: "aa" });
}
};
var HelperSection = function (_a) {
var required = _a.required, file = _a.file;
var t = I18nProvider.useI18nContext().t;
return (React__default["default"].createElement(material.Box, { sx: { p: 3 } },
React__default["default"].createElement(material.Typography, { gutterBottom: true, variant: "h5" }, file
? "".concat(file.original === "selected" ? file.name : file.originalName, " ").concat(file.size ? " - ".concat(utils$2.fData(file.size)) : "")
: "".concat(t("dropzone_drop_or_select_file"), " ").concat(required ? "*" : "")),
React__default["default"].createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary" } },
t("dropzone_drop_files_here_or_click"),
"\u00A0",
React__default["default"].createElement(material.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 = tslib.__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 = tslib.__spreadArray([], pre, true);
if (tempArray.length && tempArray[0].status) {
tempArray[0].status = "error";
tempArray[0].errorText = e1.message;
}
return tempArray;
});
}
});
}
};
return (React__default["default"].createElement(material.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__default["default"].createElement(material.Box, { width: 220, sx: { position: "relative" } },
React__default["default"].createElement(material.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__default["default"].createElement(CloseIcon__default["default"], { sx: { padding: "4px", boxSizing: "border-box" } })),
props.file.status === "error" && (React__default["default"].createElement(material.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__default["default"].createElement(ReplayIcon__default["default"], { sx: { padding: "4px", boxSizing: "border-box" } }))),
props.file &&
props.file.status !== "error" &&
props.file.original === "default" && (React__default["default"].createElement(material.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();
utils.downloadBase64(props.file.preview, props.file.originalName);
} },
React__default["default"].createElement(DownloadIcon__default["default"], { sx: { padding: "4px", boxSizing: "border-box" } }))),
props.file.status === "error" && (React__default["default"].createElement(material.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__default["default"].createElement(BrokenImageIcon__default["default"], { fontSize: "large" }))),
React__default["default"].createElement(FileIcon, { type: utils$1.getExtensionFromUrl(props.file), preview: React__default["default"].createElement(Image.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__default["default"].createElement(material.Fade, { in: ["uploading", "deleting"].includes(props.file.status) },
React__default["default"].createElement(material.Box, { sx: {
position: "absolute",
bottom: "0",
width: "100%",
padding: 2,
} }, props.file.status === "deleting" ? (React__default["default"].createElement(material.LinearProgress, { color: "error", variant: "indeterminate" })) : (React__default["default"].createElement(material.LinearProgress, { variant: "determinate", value: props.file.original === "selected"
? props.file.progress
: 0 }))))))) : (React__default["default"].createElement(CloudUploadOutlinedIcon__default["default"], { color: "primary", style: { width: "80px", height: "150px" } })),
React__default["default"].createElement(HelperSection, { required: props.required, file: props.file })));
}
exports.FileIcon = FileIcon;
exports["default"] = BlockContent;
//# sourceMappingURL=BlockContent.js.map