@zat-design/sisyphus-react 4.0.0-beta.3 → 4.0.0-beta.5

package/lib/ProUpload/components/FileItem.js

@@ -1,141 +1,243 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProUpload/components/FileItem.tsx
-var FileItem_exports = {};
-__export(FileItem_exports, {
-  DragSingleFileItem: () => DragSingleFileItem,
-  FileItem: () => FileItem,
-  bToKb: () => bToKb,
-  getFileExt: () => getFileExt,
-  getFileIcon: () => getFileIcon
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(FileItem_exports);
-var import_react = __toESM(require("react"));
-var import_antd = require("antd");
-var import_react_svg = require("react-svg");
-var import_icon_PDF = __toESM(require("../style/icon-PDF.png"));
-var import_icon_TXT = __toESM(require("../style/icon-TXT.png"));
-var import_icon_excel = __toESM(require("../style/icon-excel.png"));
-var import_icon_pic = __toESM(require("../style/icon-pic.png"));
-var import_icon_word = __toESM(require("../style/icon-word.png"));
-var import_look = __toESM(require("../../assets/look.svg"));
-var import_delete = __toESM(require("../../assets/delete.svg"));
-var import_download = __toESM(require("../../assets/download.svg"));
-var bToKb = (num) => {
-  return num ? (num / 1024).toFixed(2) : "";
+exports.getFileIcon = exports.getFileExt = exports.bToKb = exports.FileItem = exports.DragSingleFileItem = void 0;
+require("antd/es/progress/style");
+var _progress = _interopRequireDefault(require("antd/es/progress"));
+require("antd/es/popconfirm/style");
+var _popconfirm = _interopRequireDefault(require("antd/es/popconfirm"));
+require("antd/es/button/style");
+var _button = _interopRequireDefault(require("antd/es/button"));
+var _react = _interopRequireDefault(require("react"));
+var _reactSvg = require("react-svg");
+var _iconPDF = _interopRequireDefault(require("../style/icon-PDF.png"));
+var _iconTXT = _interopRequireDefault(require("../style/icon-TXT.png"));
+var _iconExcel = _interopRequireDefault(require("../style/icon-excel.png"));
+var _iconPic = _interopRequireDefault(require("../style/icon-pic.png"));
+var _iconWord = _interopRequireDefault(require("../style/icon-word.png"));
+var _look = _interopRequireDefault(require("../../assets/look.svg"));
+var _delete = _interopRequireDefault(require("../../assets/delete.svg"));
+var _download = _interopRequireDefault(require("../../assets/download.svg"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @description: b 转成 Kb
+ * @param {*} num
+ * @return {*}
+ */
+var bToKb = num => {
+  return num ? (num / 1024).toFixed(2) : '';
 };
-var getFileExt = (fileName) => {
-  if (!fileName)
-    return "";
-  return fileName.substring(fileName.lastIndexOf("."));
+
+/**
+ * @description: 获取文件后缀名
+ * @param {*} fileName
+ * @return {*}
+ */
+exports.bToKb = bToKb;
+var getFileExt = fileName => {
+  if (!fileName) return '';
+  return fileName.substring(fileName.lastIndexOf('.'));
 };
-var getFileIcon = (fileExt) => {
-  if ([".PDF"].includes(fileExt.toLocaleUpperCase()))
-    return import_icon_PDF.default;
-  if ([".TXT", ".JSON"].includes(fileExt.toLocaleUpperCase()))
-    return import_icon_TXT.default;
-  if ([".PNG", ".JPG", ".JPEG", ".GIF", ".BMP", ".JPE"].includes(fileExt.toLocaleUpperCase())) {
-    return import_icon_pic.default;
+
+/**
+ * @description: 根据文件扩展名获取图标地址
+ * @param {string} fileExt
+ * @return {*}
+ */
+exports.getFileExt = getFileExt;
+var getFileIcon = fileExt => {
+  if (['.PDF'].includes(fileExt.toLocaleUpperCase())) return _iconPDF.default;
+  if (['.TXT', '.JSON'].includes(fileExt.toLocaleUpperCase())) return _iconTXT.default;
+  if (['.PNG', '.JPG', '.JPEG', '.GIF', '.BMP', '.JPE'].includes(fileExt.toLocaleUpperCase())) {
+    return _iconPic.default;
   }
-  if ([".DOC", ".DOCX"].includes(fileExt.toLocaleUpperCase()))
-    return import_icon_word.default;
-  if ([".XLS", ".XLSX"].includes(fileExt.toLocaleUpperCase()))
-    return import_icon_excel.default;
-  return import_icon_TXT.default;
+  if (['.DOC', '.DOCX'].includes(fileExt.toLocaleUpperCase())) return _iconWord.default;
+  if (['.XLS', '.XLSX'].includes(fileExt.toLocaleUpperCase())) return _iconExcel.default;
+  return _iconTXT.default;
 };
-var FileItem = (props) => {
-  const {
-    file,
-    disabled,
-    hideFileIcon = false,
-    onRemove,
-    onDownload,
-    onPreview,
-    showRemoveIcon = true,
-    isConfirmDelete
-  } = props;
-  const _onPreview = () => {
+exports.getFileIcon = getFileIcon;
+var FileItem = props => {
+  var file = props.file,
+    disabled = props.disabled,
+    _props$hideFileIcon = props.hideFileIcon,
+    hideFileIcon = _props$hideFileIcon === void 0 ? false : _props$hideFileIcon,
+    onRemove = props.onRemove,
+    onDownload = props.onDownload,
+    onPreview = props.onPreview,
+    _props$showRemoveIcon = props.showRemoveIcon,
+    showRemoveIcon = _props$showRemoveIcon === void 0 ? true : _props$showRemoveIcon,
+    isConfirmDelete = props.isConfirmDelete;
+  var _onPreview = () => {
     if (onPreview) {
       return onPreview(file);
     }
   };
-  const _onDownload = () => {
+  var _onDownload = () => {
     if (onDownload) {
       return onDownload(file);
     }
   };
-  const _onRemove = () => {
+  var _onRemove = () => {
     if (onRemove) {
       return onRemove(file);
     }
   };
-  const _fileExt = getFileExt(file.name);
-  const _fileSize = bToKb(file.size);
-  const _fileIcon = getFileIcon(_fileExt);
-  const _isShowDownloadIcon = file.status === "done" && onDownload;
-  const _showPreViewIcon = onPreview;
-  const _showRemoveIcon = showRemoveIcon;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "filelist-item-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `file-info-box ${file.status === "error" ? "file-box-error" : ""}` }, !hideFileIcon && /* @__PURE__ */ import_react.default.createElement("div", { className: "file-type-icon" }, /* @__PURE__ */ import_react.default.createElement("img", { src: _fileIcon })), /* @__PURE__ */ import_react.default.createElement("div", { className: `file-name ${hideFileIcon ? "file-name-pf0" : ""}` }, file.name.replace(_fileExt, "")), /* @__PURE__ */ import_react.default.createElement("div", { className: "file-ext" }, _fileExt), _fileSize && /* @__PURE__ */ import_react.default.createElement("div", { className: "file-size" }, `(${_fileSize || 0}kb)`), /* @__PURE__ */ import_react.default.createElement("div", { className: "file-actions-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "file-actions" }, _isShowDownloadIcon && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "link", className: "file-action-item", onClick: _onDownload }, /* @__PURE__ */ import_react.default.createElement(import_react_svg.ReactSVG, { className: "action-icon", wrapper: "span", src: import_download.default })), _showPreViewIcon && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "link", className: "file-action-item", onClick: _onPreview }, /* @__PURE__ */ import_react.default.createElement(import_react_svg.ReactSVG, { className: "action-icon", wrapper: "span", color: "#006aff", src: import_look.default })), _showRemoveIcon && !disabled && (isConfirmDelete ? /* @__PURE__ */ import_react.default.createElement(import_antd.Popconfirm, { title: "确定删除?", onConfirm: _onRemove, okText: "确认", cancelText: "取消" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "link", className: "file-action-item", disabled }, /* @__PURE__ */ import_react.default.createElement(import_react_svg.ReactSVG, { className: "action-icon", wrapper: "span", src: import_delete.default }))) : /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Button,
-    {
-      type: "link",
-      className: "file-action-item",
-      disabled,
-      onClick: _onRemove
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_react_svg.ReactSVG, { className: "action-icon", wrapper: "span", src: import_delete.default })
-  ))))), file.status === "uploading" && /* @__PURE__ */ import_react.default.createElement("div", { className: "file-progress" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Progress, { percent: Math.ceil(file.percent), size: 2 })));
+  var _fileExt = getFileExt(file.name);
+  var _fileSize = bToKb(file.size);
+  var _fileIcon = getFileIcon(_fileExt);
+  var _isShowDownloadIcon = file.status === 'done' && onDownload;
+  var _showPreViewIcon = onPreview;
+  var _showRemoveIcon = showRemoveIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "filelist-item-wrapper",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `file-info-box ${file.status === 'error' ? 'file-box-error' : ''}`,
+      children: [!hideFileIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "file-type-icon",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _fileIcon
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `file-name ${hideFileIcon ? 'file-name-pf0' : ''}`,
+        children: file.name.replace(_fileExt, '')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "file-ext",
+        children: _fileExt
+      }), _fileSize && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "file-size",
+        children: `(${_fileSize || 0}kb)`
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "file-actions-wrap",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "file-actions",
+          children: [_isShowDownloadIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            type: "link",
+            className: "file-action-item",
+            onClick: _onDownload,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              src: _download.default
+            })
+          }), _showPreViewIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            type: "link",
+            className: "file-action-item",
+            onClick: _onPreview,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              color: "#006aff",
+              src: _look.default
+            })
+          }), _showRemoveIcon && !disabled && (isConfirmDelete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_popconfirm.default, {
+            title: "\u786E\u5B9A\u5220\u9664?",
+            onConfirm: _onRemove,
+            okText: "\u786E\u8BA4",
+            cancelText: "\u53D6\u6D88",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+              type: "link",
+              className: "file-action-item",
+              disabled: disabled,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+                className: "action-icon",
+                wrapper: "span",
+                src: _delete.default
+              })
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            type: "link",
+            className: "file-action-item",
+            disabled: disabled,
+            onClick: _onRemove,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              src: _delete.default
+            })
+          }))]
+        })
+      })]
+    }), file.status === 'uploading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "file-progress",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress.default, {
+        percent: Math.ceil(file.percent),
+        size: 2
+      })
+    })]
+  });
 };
-var DragSingleFileItem = (props) => {
-  const { file, disabled, onRemove, onDownload, onPreview, showRemoveIcon = true } = props;
-  const _onPreview = () => {
+exports.FileItem = FileItem;
+var DragSingleFileItem = props => {
+  var file = props.file,
+    disabled = props.disabled,
+    onRemove = props.onRemove,
+    onDownload = props.onDownload,
+    onPreview = props.onPreview,
+    _props$showRemoveIcon2 = props.showRemoveIcon,
+    showRemoveIcon = _props$showRemoveIcon2 === void 0 ? true : _props$showRemoveIcon2;
+  var _onPreview = () => {
     if (onPreview) {
       return onPreview(file);
     }
   };
-  const _onDownload = () => {
+  var _onDownload = () => {
     if (onDownload) {
       return onDownload(file);
     }
   };
-  const _fileExt = getFileExt(file.name);
-  const _fileSize = bToKb(file.size);
-  const _isShowDownloadIcon = file.status === "done" && onDownload;
-  const _showPreViewIcon = file.status === "done" && onPreview;
-  const _showRemoveIcon = showRemoveIcon;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "drag-Single-item-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `file-info-box ${file.status === "error" ? "file-box-error" : ""}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "file-name" }, file.name.replace(_fileExt, "")), /* @__PURE__ */ import_react.default.createElement("div", { className: "file-ext" }, _fileExt), _fileSize && /* @__PURE__ */ import_react.default.createElement("div", { className: "file-size" }, `(${_fileSize || 0}kb)`), (_isShowDownloadIcon || _showPreViewIcon || _showRemoveIcon) && /* @__PURE__ */ import_react.default.createElement("div", { className: "file-actions-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "file-actions" }, _showPreViewIcon && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "link", className: "file-action-item", onClick: _onPreview }, /* @__PURE__ */ import_react.default.createElement(import_react_svg.ReactSVG, { className: "action-icon", wrapper: "span", src: import_look.default })), _isShowDownloadIcon && /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "link", className: "file-action-item", onClick: _onDownload }, /* @__PURE__ */ import_react.default.createElement(import_react_svg.ReactSVG, { className: "action-icon", wrapper: "span", src: import_download.default }))))), file.status === "uploading" && /* @__PURE__ */ import_react.default.createElement("div", { className: "file-progress" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Progress, { percent: Math.ceil(file.percent), size: 2 })));
+  var _fileExt = getFileExt(file.name);
+  var _fileSize = bToKb(file.size);
+  var _isShowDownloadIcon = file.status === 'done' && onDownload;
+  var _showPreViewIcon = file.status === 'done' && onPreview;
+  var _showRemoveIcon = showRemoveIcon;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "drag-Single-item-wrapper",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `file-info-box ${file.status === 'error' ? 'file-box-error' : ''}`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "file-name",
+        children: file.name.replace(_fileExt, '')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "file-ext",
+        children: _fileExt
+      }), _fileSize && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "file-size",
+        children: `(${_fileSize || 0}kb)`
+      }), (_isShowDownloadIcon || _showPreViewIcon || _showRemoveIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "file-actions-wrap",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "file-actions",
+          children: [_showPreViewIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            type: "link",
+            className: "file-action-item",
+            onClick: _onPreview,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              src: _look.default
+            })
+          }), _isShowDownloadIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+            type: "link",
+            className: "file-action-item",
+            onClick: _onDownload,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              src: _download.default
+            })
+          })]
+        })
+      })]
+    }), file.status === 'uploading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "file-progress",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress.default, {
+        percent: Math.ceil(file.percent),
+        size: 2
+      })
+    })]
+  });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DragSingleFileItem,
-  FileItem,
-  bToKb,
-  getFileExt,
-  getFileIcon
-});
+exports.DragSingleFileItem = DragSingleFileItem;