mui-component
Version:
some custom mui components
128 lines • 7.27 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { useCreation, useDebounceFn } from "ahooks";
import { Box, IconButton, Tooltip } from "@mui/material";
import { CloudDownloadOutlined, PreviewOutlined } from "@mui/icons-material";
import { IconError404 } from "@tabler/icons-react";
import { generateFileDownload } from "@iimm/shared";
import { Space } from "@iimm/react-shared";
import clsx from "classnames";
import { getFileInfo } from "../util";
import { FileViewRender } from "./FileViewRender";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var ItemBar = function ItemBar(props) {
var file = props.file,
_props$fileTypeIconSi = props.fileTypeIconSize,
fileTypeIconSize = _props$fileTypeIconSi === void 0 ? 24 : _props$fileTypeIconSi,
_props$showFileTypeIc = props.showFileTypeIcon,
showFileTypeIcon = _props$showFileTypeIc === void 0 ? true : _props$showFileTypeIc,
itemBarBoxProps = props.itemBarBoxProps,
_props$fileInfoParser = props.fileInfoParser,
fileInfoParser = _props$fileInfoParser === void 0 ? getFileInfo : _props$fileInfoParser,
itemBarClassName = props.itemBarClassName,
fileNameWrap = props.fileNameWrap,
onFileDownload = props.onFileDownload,
onFileDownloadStart = props.onFileDownloadStart,
_props$previewIcon = props.previewIcon,
previewIcon = _props$previewIcon === void 0 ? /*#__PURE__*/_jsx(PreviewOutlined, {}) : _props$previewIcon,
previewTooltip = props.previewTooltip,
_props$showPreview = props.showPreview,
showPreview = _props$showPreview === void 0 ? true : _props$showPreview,
_props$downloadIcon = props.downloadIcon,
downloadIcon = _props$downloadIcon === void 0 ? /*#__PURE__*/_jsx(CloudDownloadOutlined, {}) : _props$downloadIcon,
downloadTooltip = props.downloadTooltip,
showDownload = props.showDownload,
_props$FilePreviewRen = props.FilePreviewRender,
FilePreviewRender = _props$FilePreviewRen === void 0 ? FileViewRender : _props$FilePreviewRen,
previewModalProps = props.previewModalProps,
pdfViewerProps = props.pdfViewerProps,
extraAction = props.extraAction,
actionSpace = props.actionSpace;
var fileInfo = useCreation(function () {
return fileInfoParser(file, fileTypeIconSize);
}, [file]);
var _useDebounceFn = useDebounceFn(function (file) {
if (!fileInfo) return;
var start = onFileDownloadStart === null || onFileDownloadStart === void 0 ? void 0 : onFileDownloadStart(file, fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.fileName);
if (start !== false) {
generateFileDownload(fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.url, fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.fileName);
onFileDownload === null || onFileDownload === void 0 || onFileDownload(file, fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.fileName);
}
}, {
leading: true,
trailing: false
}),
download = _useDebounceFn.run;
return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: 0.5
}, itemBarBoxProps), {}, {
className: clsx("attachmentViewer-itemBar", itemBarClassName),
children: [showFileTypeIcon && /*#__PURE__*/_jsx(Box, {
className: "attachmentViewer-itemBar-fileIcon",
children: (fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo.icon) || /*#__PURE__*/_jsx(IconError404, {
color: "red",
size: 24
})
}), /*#__PURE__*/_jsx(Box, {
flex: 1,
className: clsx({
"attachmentViewer-itemBar-fileName": true,
"text-ellipsis": !fileNameWrap
}),
children: !!(fileInfo !== null && fileInfo !== void 0 && fileInfo.fileName) ? /*#__PURE__*/_jsx(Tooltip, {
title: fileInfo.fileName,
arrow: true,
placement: "top",
children: /*#__PURE__*/_jsx("span", {
children: fileInfo.fileName
})
}) : /*#__PURE__*/_jsx("span", {
style: {
color: "red",
fontWeight: "bold"
},
children: "\u83B7\u53D6\u6587\u4EF6\u4FE1\u606F\u51FA\u9519\u4E86"
})
}), !!(fileInfo !== null && fileInfo !== void 0 && fileInfo.url) && /*#__PURE__*/_jsxs(Space, _objectSpread(_objectSpread({
className: "attachmentViewer-itemBar-action"
}, actionSpace || {}), {}, {
children: [!!(fileInfo !== null && fileInfo !== void 0 && fileInfo.view) && showPreview && /*#__PURE__*/_jsx(FilePreviewRender, {
fileSrc: fileInfo.url,
modalProps: previewModalProps,
pdfViewerProps: pdfViewerProps,
type: fileInfo.type,
fileName: fileInfo.fileName,
view: fileInfo.view,
trigger: /*#__PURE__*/_jsx(Tooltip, {
arrow: true,
placement: "top",
title: typeof previewTooltip === "function" ? previewTooltip(fileInfo.url) : previewTooltip,
children: /*#__PURE__*/_jsx(IconButton, {
color: "info",
children: previewIcon
})
}),
showDownload: showDownload
}), showDownload && /*#__PURE__*/_jsx(Tooltip, {
arrow: true,
placement: "top",
title: typeof downloadTooltip === "function" ? downloadTooltip(fileInfo.url) : downloadTooltip,
children: /*#__PURE__*/_jsx(IconButton, {
color: "secondary",
onClick: function onClick() {
return download(file);
},
children: downloadIcon
})
}), extraAction || null]
}))]
}));
};