@novin-dev/formalite
Version:
Generate MUI form with few line of code
195 lines (188 loc) • 12.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var ReplayIcon = require('@mui/icons-material/Replay');
var material = require('@mui/material');
var reactTransitionGroup = require('react-transition-group');
var Image = require('../../../../Image/Image.js');
var CloseIcon = require('@mui/icons-material/Close');
var utils$1 = require('../../../config/utils.js');
var BrokenImageIcon = require('@mui/icons-material/BrokenImage');
var InsertDriveFileOutlinedIcon = require('@mui/icons-material/InsertDriveFileOutlined');
var DownloadIcon = require('@mui/icons-material/Download');
var utils$2 = require('../utils.js');
var utils = require('../../../../../config/utils.js');
var BlockContent = require('./BlockContent.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var ReplayIcon__default = /*#__PURE__*/_interopDefaultLegacy(ReplayIcon);
var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
var BrokenImageIcon__default = /*#__PURE__*/_interopDefaultLegacy(BrokenImageIcon);
var InsertDriveFileOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertDriveFileOutlinedIcon);
var DownloadIcon__default = /*#__PURE__*/_interopDefaultLegacy(DownloadIcon);
function MultiFilePreview(_a) {
var showPreview = _a.showPreview, files = _a.files, onRemove = _a.onRemove, setFile = _a.setFile, setToFormik = _a.setToFormik, uploadFunction = _a.uploadFunction, uploadController = _a.uploadController;
var hasFile = files.length > 0;
var DeleteFunc = function (e, file) {
e.stopPropagation();
uploadController.abort();
setFile(function (pre) {
return tslib.__spreadArray([], pre, true).map(function (item) {
if (item.uid === file.uid) {
// eslint-disable-next-line no-param-reassign
item.status = "deleting";
return item;
}
return item;
});
});
onRemove(file.uid, file.original === "default", !file.errorText)
.then(function () {
setFile(function (pre) {
var newValue = tslib.__spreadArray([], pre, true).filter(function (item) { return item.uid !== file.uid; });
setToFormik(newValue.filter(function (item) { return item.status !== "error"; }));
return newValue;
});
})
.catch(function (e1) {
setFile(function (pre) {
return tslib.__spreadArray([], pre, true).map(function (item) {
if (item.uid === file.uid) {
// eslint-disable-next-line no-param-reassign
item.status = "error";
// eslint-disable-next-line no-param-reassign
item.errorText = e1.message;
return item;
}
return item;
});
});
});
};
var handleRetry = function (file) {
if (file.original === "selected") {
uploadFunction(file);
}
};
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(material.List, { disablePadding: true, sx: tslib.__assign({}, (hasFile && { my: 1 })) },
React__default["default"].createElement(reactTransitionGroup.TransitionGroup, null, files.map(function (file, index) {
var _a = file; _a.name; var size = _a.size, preview = _a.preview, progress = _a.progress, status = _a.status, lastModified = _a.lastModified, uid = _a.uid;
if (showPreview) {
return (React__default["default"].createElement(material.Collapse, { key: lastModified || uid, component: material.ListItem, sx: {
p: 0,
m: 0.5,
width: 80,
height: 80,
borderRadius: 1.25,
overflow: "hidden",
position: "relative",
display: "inline-flex",
border: function (theme) { return "solid 1px ".concat(theme.palette.divider); },
} },
React__default["default"].createElement(material.Fade, { in: ["uploading", "deleting"].includes(status) }, status === "deleting" ? (React__default["default"].createElement(material.CircularProgress, { variant: "indeterminate", color: "error", sx: {
position: "absolute",
zIndex: 1,
top: "50%",
left: "50%",
marginLeft: "-20px",
marginTop: "-20px",
} })) : (React__default["default"].createElement(material.CircularProgress, { variant: "determinate", value: progress || 0, sx: {
position: "absolute",
zIndex: 1,
top: "50%",
left: "50%",
marginLeft: "-20px",
marginTop: "-20px",
} }))),
React__default["default"].createElement(BlockContent.FileIcon, { type: utils.getExtensionFromUrl(file), preview: React__default["default"].createElement(Image.Image, { alt: "file preview", src: preview }) }),
React__default["default"].createElement(material.Grid, null,
React__default["default"].createElement(material.IconButton, { size: "small", onClick: function (e) {
DeleteFunc(e, file);
}, sx: {
zIndex: 2,
top: 3,
p: "2px",
right: 3,
position: "absolute",
color: "common.white",
} },
React__default["default"].createElement(CloseIcon__default["default"], null)),
status === "error" && (React__default["default"].createElement(material.IconButton, { size: "small", onClick: function () { return handleRetry(file); }, sx: {
zIndex: 2,
top: 3,
p: "2px",
left: 3,
position: "absolute",
color: "common.white",
} },
React__default["default"].createElement(ReplayIcon__default["default"], null))))));
}
return (React__default["default"].createElement(material.Collapse, { key: lastModified || uid }, status === "downloading" ? (React__default["default"].createElement(material.Skeleton, { variant: "rectangular", height: 54, sx: { borderRadius: 0.75, my: 1, px: 2, py: 0.75 } })) : (React__default["default"].createElement(material.ListItem, { sx: {
my: 1,
px: 2,
py: 0.75,
borderRadius: 0.75,
border: function (theme) { return "solid 1px ".concat(theme.palette.divider); },
} },
React__default["default"].createElement(material.Grid, { sx: {
position: "relative",
width: 28,
height: 28,
mr: 2,
} },
React__default["default"].createElement(material.Fade, { in: ["uploading", "deleting"].includes(status) }, status === "deleting" ? (React__default["default"].createElement(material.CircularProgress, { variant: "indeterminate", color: "error", sx: {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
marginTop: "-6px",
marginLeft: "-7px",
} })) : (React__default["default"].createElement(material.CircularProgress, { variant: "determinate", value: progress || 0, sx: {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
marginTop: "-6px",
marginLeft: "-7px",
} }))),
status === "error" ? (React__default["default"].createElement(BrokenImageIcon__default["default"], { sx: {
position: "absolute",
color: "text.secondary",
width: 28,
height: 28,
left: 0,
right: 0,
top: 0,
bottom: 0,
} })) : (React__default["default"].createElement(InsertDriveFileOutlinedIcon__default["default"], { sx: {
position: "absolute",
color: "text.secondary",
width: 28,
height: 28,
left: 0,
right: 0,
top: 0,
bottom: 0,
} }))),
React__default["default"].createElement(material.ListItemText, { primary: file.original === "selected"
? file.name
: file.originalName, secondary: size ? utils$1.fData(size) : "", primaryTypographyProps: { variant: "subtitle2" }, secondaryTypographyProps: { variant: "caption" } }),
React__default["default"].createElement(material.Stack, { spacing: 1, direction: "row-reverse" },
status === "error" && file.original === "selected" && (React__default["default"].createElement(material.IconButton, { edge: "end", size: "small", onClick: function () { return handleRetry(file); } },
React__default["default"].createElement(ReplayIcon__default["default"], null))),
React__default["default"].createElement(material.IconButton, { edge: "end", size: "small", onClick: function (e) {
DeleteFunc(e, file);
} },
React__default["default"].createElement(CloseIcon__default["default"], null)),
status !== "error" && file.original === "default" && (React__default["default"].createElement(material.IconButton, { edge: "end", size: "small", onClick: function () {
utils$2.downloadBase64(file.preview, file.originalName);
} },
React__default["default"].createElement(DownloadIcon__default["default"], null))))))));
})))));
}
exports["default"] = MultiFilePreview;
//# sourceMappingURL=MultiFilePreview.js.map