@novin-dev/formalite
Version:
Generate MUI form with few line of code
182 lines (179 loc) • 10.5 kB
JavaScript
import { __assign, __spreadArray } from 'tslib';
import React from 'react';
import ReplayIcon from '@mui/icons-material/Replay';
import { List, Collapse, ListItem, Fade, CircularProgress, Grid, IconButton, Skeleton, ListItemText, Stack } from '@mui/material';
import { TransitionGroup } from 'react-transition-group';
import { Image } from '../../../../Image/Image.js';
import CloseIcon from '@mui/icons-material/Close';
import { fData } from '../../../config/utils.js';
import BrokenImageIcon from '@mui/icons-material/BrokenImage';
import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
import DownloadIcon from '@mui/icons-material/Download';
import { downloadBase64 } from '../utils.js';
import { getExtensionFromUrl } from '../../../../../config/utils.js';
import { FileIcon } from './BlockContent.js';
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 __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 = __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 __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.createElement(React.Fragment, null,
React.createElement(List, { disablePadding: true, sx: __assign({}, (hasFile && { my: 1 })) },
React.createElement(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.createElement(Collapse, { key: lastModified || uid, component: 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.createElement(Fade, { in: ["uploading", "deleting"].includes(status) }, status === "deleting" ? (React.createElement(CircularProgress, { variant: "indeterminate", color: "error", sx: {
position: "absolute",
zIndex: 1,
top: "50%",
left: "50%",
marginLeft: "-20px",
marginTop: "-20px",
} })) : (React.createElement(CircularProgress, { variant: "determinate", value: progress || 0, sx: {
position: "absolute",
zIndex: 1,
top: "50%",
left: "50%",
marginLeft: "-20px",
marginTop: "-20px",
} }))),
React.createElement(FileIcon, { type: getExtensionFromUrl(file), preview: React.createElement(Image, { alt: "file preview", src: preview }) }),
React.createElement(Grid, null,
React.createElement(IconButton, { size: "small", onClick: function (e) {
DeleteFunc(e, file);
}, sx: {
zIndex: 2,
top: 3,
p: "2px",
right: 3,
position: "absolute",
color: "common.white",
} },
React.createElement(CloseIcon, null)),
status === "error" && (React.createElement(IconButton, { size: "small", onClick: function () { return handleRetry(file); }, sx: {
zIndex: 2,
top: 3,
p: "2px",
left: 3,
position: "absolute",
color: "common.white",
} },
React.createElement(ReplayIcon, null))))));
}
return (React.createElement(Collapse, { key: lastModified || uid }, status === "downloading" ? (React.createElement(Skeleton, { variant: "rectangular", height: 54, sx: { borderRadius: 0.75, my: 1, px: 2, py: 0.75 } })) : (React.createElement(ListItem, { sx: {
my: 1,
px: 2,
py: 0.75,
borderRadius: 0.75,
border: function (theme) { return "solid 1px ".concat(theme.palette.divider); },
} },
React.createElement(Grid, { sx: {
position: "relative",
width: 28,
height: 28,
mr: 2,
} },
React.createElement(Fade, { in: ["uploading", "deleting"].includes(status) }, status === "deleting" ? (React.createElement(CircularProgress, { variant: "indeterminate", color: "error", sx: {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
marginTop: "-6px",
marginLeft: "-7px",
} })) : (React.createElement(CircularProgress, { variant: "determinate", value: progress || 0, sx: {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
marginTop: "-6px",
marginLeft: "-7px",
} }))),
status === "error" ? (React.createElement(BrokenImageIcon, { sx: {
position: "absolute",
color: "text.secondary",
width: 28,
height: 28,
left: 0,
right: 0,
top: 0,
bottom: 0,
} })) : (React.createElement(InsertDriveFileOutlinedIcon, { sx: {
position: "absolute",
color: "text.secondary",
width: 28,
height: 28,
left: 0,
right: 0,
top: 0,
bottom: 0,
} }))),
React.createElement(ListItemText, { primary: file.original === "selected"
? file.name
: file.originalName, secondary: size ? fData(size) : "", primaryTypographyProps: { variant: "subtitle2" }, secondaryTypographyProps: { variant: "caption" } }),
React.createElement(Stack, { spacing: 1, direction: "row-reverse" },
status === "error" && file.original === "selected" && (React.createElement(IconButton, { edge: "end", size: "small", onClick: function () { return handleRetry(file); } },
React.createElement(ReplayIcon, null))),
React.createElement(IconButton, { edge: "end", size: "small", onClick: function (e) {
DeleteFunc(e, file);
} },
React.createElement(CloseIcon, null)),
status !== "error" && file.original === "default" && (React.createElement(IconButton, { edge: "end", size: "small", onClick: function () {
downloadBase64(file.preview, file.originalName);
} },
React.createElement(DownloadIcon, null))))))));
})))));
}
export { MultiFilePreview as default };
//# sourceMappingURL=MultiFilePreview.js.map