@zat-design/sisyphus-react 4.0.0-beta.4 → 4.0.0-beta.6

package/lib/ProUpload/components/ImageRender.js

@@ -1,203 +1,278 @@
-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/ImageRender.tsx
-var ImageRender_exports = {};
-__export(ImageRender_exports, {
-  default: () => ImageRender_default
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(ImageRender_exports);
-var import_antd = require("antd");
-var import_react = require("react");
-var import_core = require("@dnd-kit/core");
-var import_sortable = require("@dnd-kit/sortable");
-var import_lodash = require("lodash");
-var import_react_svg = require("react-svg");
-var import_icons = require("@ant-design/icons");
-var import_Example = require("./Example");
-var import_FileItem = require("./FileItem");
-var import_DraggableUploadListItem = require("./DraggableUploadListItem");
-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 import_locale = __toESM(require("../../locale"));
-var isImgage = (_fileExt) => {
-  return [".PNG", ".JPG", ".JPEG", ".GIF", ".BMP", ".JPE"].includes(_fileExt.toLocaleUpperCase());
+exports.default = void 0;
+require("antd/es/space/style");
+var _space = _interopRequireDefault(require("antd/es/space"));
+require("antd/es/modal/style");
+var _modal = _interopRequireDefault(require("antd/es/modal"));
+require("antd/es/upload/style");
+var _upload = _interopRequireDefault(require("antd/es/upload"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+require("antd/es/button/style");
+var _button = _interopRequireDefault(require("antd/es/button"));
+require("antd/es/progress/style");
+var _progress = _interopRequireDefault(require("antd/es/progress"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _lodash = require("lodash");
+var _reactSvg = require("react-svg");
+var _icons = require("@ant-design/icons");
+var _Example = require("./Example");
+var _FileItem = require("./FileItem");
+var _DraggableUploadListItem = require("./DraggableUploadListItem");
+var _look = _interopRequireDefault(require("../../assets/look.svg"));
+var _delete = _interopRequireDefault(require("../../assets/delete.svg"));
+var _download = _interopRequireDefault(require("../../assets/download.svg"));
+var _locale = _interopRequireDefault(require("../../locale"));
+var _jsxRuntime = require("react/jsx-runtime");
+var isImgage = _fileExt => {
+  return ['.PNG', '.JPG', '.JPEG', '.GIF', '.BMP', '.JPE'].includes(_fileExt.toLocaleUpperCase());
 };
-var ImageRender = (props) => {
-  var _a, _b;
-  const [previewImg, setPreviewImg] = (0, import_react.useState)({});
-  const proViewerRef = (0, import_react.useRef)(null);
-  const {
-    isView,
-    disabled,
-    headerRender,
-    footerRender,
-    centerRender,
-    sensor,
-    onDragEnd,
-    fileList,
-    baseUploadProps,
-    onPreview,
-    onDownload,
-    onRemove,
-    maxCount,
-    extraTipText,
-    showExampleContent,
-    exampleTitle,
-    exampleContent,
-    exampleModalProps
-  } = props;
-  const handlePreviewImg = (file) => {
-    var _a2;
+/* 按钮类型 */
+var ImageRender = props => {
+  var _locale$ProUpload4;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    previewImg = _useState2[0],
+    setPreviewImg = _useState2[1];
+  var proViewerRef = (0, _react.useRef)(null);
+  var isView = props.isView,
+    disabled = props.disabled,
+    headerRender = props.headerRender,
+    footerRender = props.footerRender,
+    centerRender = props.centerRender,
+    sensor = props.sensor,
+    onDragEnd = props.onDragEnd,
+    fileList = props.fileList,
+    baseUploadProps = props.baseUploadProps,
+    onPreview = props.onPreview,
+    onDownload = props.onDownload,
+    onRemove = props.onRemove,
+    maxCount = props.maxCount,
+    extraTipText = props.extraTipText,
+    showExampleContent = props.showExampleContent,
+    exampleTitle = props.exampleTitle,
+    exampleContent = props.exampleContent,
+    exampleModalProps = props.exampleModalProps;
+
+  /**
+   * @description: 处理预览图片按钮
+   * @param {UploadFile} file
+   * @return {*}
+   */
+  var handlePreviewImg = file => {
     if (onPreview) {
       onPreview(file);
     } else {
-      const _fileExt = (0, import_FileItem.getFileExt)(file.name || ((_a2 = file == null ? void 0 : file.url) == null ? void 0 : _a2.split("?")[0]));
+      var _file$url;
+      var _fileExt = (0, _FileItem.getFileExt)(file.name || (file === null || file === void 0 || (_file$url = file.url) === null || _file$url === void 0 ? void 0 : _file$url.split('?')[0]));
       if (isImgage(_fileExt)) {
         setPreviewImg(file);
       } else {
-        window.open(file.url, "_blank");
+        window.open(file.url, '_blank');
       }
     }
   };
-  const handlePreviewCancel = () => {
+
+  /**
+   * @description: 取消预览
+   * @return {*}
+   */
+  var handlePreviewCancel = () => {
     setPreviewImg({});
   };
-  const handleDownload = (file) => {
+
+  /**
+   * @description: 点击下载按钮
+   * @return {*}
+   */
+  var handleDownload = file => {
     if (onDownload) {
       onDownload(file);
     } else {
       window.open(file.url || file.thumbUrl);
     }
   };
-  const showDraggerSingleRender = maxCount === 1 && fileList[0];
-  const imageUploadProps = {
-    ...baseUploadProps,
+  var showDraggerSingleRender = maxCount === 1 && fileList[0];
+
+  // 图片类上传Props
+  var imageUploadProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseUploadProps), {}, {
     fileList,
-    listType: "picture-card",
+    listType: 'picture-card',
     openFileDialogOnClick: !showDraggerSingleRender,
     disabled: disabled || isView,
-    itemRender: (originNode, file, fileList2, actions) => {
-      var _a2, _b2, _c, _d, _e, _f, _g;
-      const _isShowDownload = !!onDownload && file.status === "done";
-      const _fileExt = (0, import_FileItem.getFileExt)(file.name || ((_a2 = file == null ? void 0 : file.url) == null ? void 0 : _a2.split("?")[0]));
-      const _fileIcon = (0, import_FileItem.getFileIcon)(_fileExt);
-      const isImg = isImgage(_fileExt);
-      const _showPreview = isImg || file.status === "done";
-      return /* @__PURE__ */ React.createElement(import_DraggableUploadListItem.DraggableUploadListItem, { file }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: file.uid,
-          className: `file-item-image ${file.status === "error" ? "actions-wrap-error" : ""}`
-        },
-        file.status === "uploading" && /* @__PURE__ */ React.createElement("div", { className: "image-uploading" }, /* @__PURE__ */ React.createElement(import_antd.Progress, { size: "small", percent: Math.ceil(file.percent) })),
-        file.status !== "uploading" && /* @__PURE__ */ React.createElement(React.Fragment, null, !isImg ? /* @__PURE__ */ React.createElement("img", { className: "file-type-icon-img", src: _fileIcon }) : /* @__PURE__ */ React.createElement("img", { className: "image-con", src: file.url || file.thumbUrl }), /* @__PURE__ */ React.createElement("div", { className: "actions-wrap " }, /* @__PURE__ */ React.createElement("div", { className: "action-top" }, _showPreview && /* @__PURE__ */ React.createElement(
-          import_antd.Button,
-          {
-            type: "link",
-            className: "action-item",
-            onClick: () => {
-              handlePreviewImg(file);
-            },
-            icon: /* @__PURE__ */ React.createElement(import_react_svg.ReactSVG, { className: "action-icon", wrapper: "span", src: import_look.default })
-          },
-          (_c = (_b2 = import_locale.default) == null ? void 0 : _b2.ProUpload) == null ? void 0 : _c.view
-        ), _isShowDownload && /* @__PURE__ */ React.createElement(
-          import_antd.Button,
-          {
-            type: "link",
-            disabled: isView || disabled,
-            className: "action-item",
-            onClick: () => {
-              handleDownload(file);
-            },
-            icon: /* @__PURE__ */ React.createElement(import_react_svg.ReactSVG, { className: "action-icon", wrapper: "span", src: import_download.default })
-          },
-          (_e = (_d = import_locale.default) == null ? void 0 : _d.ProUpload) == null ? void 0 : _e.download
-        )), /* @__PURE__ */ React.createElement("div", { className: "action-button" }, /* @__PURE__ */ React.createElement(
-          import_antd.Button,
-          {
-            type: "link",
-            disabled: isView || disabled,
-            className: "action-item",
-            onClick: async () => {
-              try {
-                const res = onRemove && await onRemove(file);
-                if (res === false) {
-                  return Promise.reject();
-                }
-                actions.remove(file);
-              } catch (error) {
-                return Promise.reject();
-              }
-            },
-            icon: /* @__PURE__ */ React.createElement(
-              import_react_svg.ReactSVG,
-              {
-                className: "action-delete action-icon",
-                wrapper: "span",
-                src: import_delete.default
-              }
-            )
-          },
-          (_g = (_f = import_locale.default) == null ? void 0 : _f.ProUpload) == null ? void 0 : _g.delete
-        ))))
-      ));
+    itemRender: (originNode, file, fileList, actions) => {
+      var _file$url2, _locale$ProUpload, _locale$ProUpload2, _locale$ProUpload3;
+      var _isShowDownload = !!onDownload && file.status === 'done';
+      var _fileExt = (0, _FileItem.getFileExt)(file.name || (file === null || file === void 0 || (_file$url2 = file.url) === null || _file$url2 === void 0 ? void 0 : _file$url2.split('?')[0]));
+      var _fileIcon = (0, _FileItem.getFileIcon)(_fileExt);
+      var isImg = isImgage(_fileExt);
+      var _showPreview = isImg || file.status === 'done';
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DraggableUploadListItem.DraggableUploadListItem, {
+        file: file,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: `file-item-image ${file.status === 'error' ? 'actions-wrap-error' : ''}`,
+          children: [file.status === 'uploading' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "image-uploading",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress.default, {
+              size: "small",
+              percent: Math.ceil(file.percent)
+            })
+          }), file.status !== 'uploading' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [!isImg ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              className: "file-type-icon-img",
+              src: _fileIcon
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              className: "image-con",
+              src: file.url || file.thumbUrl
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "actions-wrap ",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "action-top",
+                children: [_showPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+                  type: "link",
+                  className: "action-item",
+                  onClick: () => {
+                    handlePreviewImg(file);
+                  },
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+                    className: "action-icon",
+                    wrapper: "span",
+                    src: _look.default
+                  }),
+                  children: _locale.default === null || _locale.default === void 0 || (_locale$ProUpload = _locale.default.ProUpload) === null || _locale$ProUpload === void 0 ? void 0 : _locale$ProUpload.view
+                }), _isShowDownload && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+                  type: "link",
+                  disabled: isView || disabled,
+                  className: "action-item",
+                  onClick: () => {
+                    handleDownload(file);
+                  },
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+                    className: "action-icon",
+                    wrapper: "span",
+                    src: _download.default
+                  }),
+                  children: _locale.default === null || _locale.default === void 0 || (_locale$ProUpload2 = _locale.default.ProUpload) === null || _locale$ProUpload2 === void 0 ? void 0 : _locale$ProUpload2.download
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "action-button",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+                  type: "link",
+                  disabled: isView || disabled,
+                  className: "action-item",
+                  onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+                    var res;
+                    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+                      while (1) switch (_context.prev = _context.next) {
+                        case 0:
+                          _context.prev = 0;
+                          _context.t0 = onRemove;
+                          if (!_context.t0) {
+                            _context.next = 6;
+                            break;
+                          }
+                          _context.next = 5;
+                          return onRemove(file);
+                        case 5:
+                          _context.t0 = _context.sent;
+                        case 6:
+                          res = _context.t0;
+                          if (!(res === false)) {
+                            _context.next = 9;
+                            break;
+                          }
+                          return _context.abrupt("return", Promise.reject());
+                        case 9:
+                          actions.remove(file);
+                          _context.next = 15;
+                          break;
+                        case 12:
+                          _context.prev = 12;
+                          _context.t1 = _context["catch"](0);
+                          return _context.abrupt("return", Promise.reject());
+                        case 15:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }, _callee, null, [[0, 12]]);
+                  })),
+                  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+                    className: "action-delete action-icon",
+                    wrapper: "span",
+                    src: _delete.default
+                  }),
+                  children: _locale.default === null || _locale.default === void 0 || (_locale$ProUpload3 = _locale.default.ProUpload) === null || _locale$ProUpload3 === void 0 ? void 0 : _locale$ProUpload3.delete
+                })
+              })]
+            })]
+          })]
+        }, file.uid)
+      });
     }
-  };
-  return /* @__PURE__ */ React.createElement(import_antd.Space, { direction: "vertical", size: 8, className: "pro-upload-image" }, headerRender(), /* @__PURE__ */ React.createElement("div", { className: "pro-upload-image" }, /* @__PURE__ */ React.createElement(import_core.DndContext, { sensors: [sensor], onDragEnd }, /* @__PURE__ */ React.createElement(import_sortable.SortableContext, { items: fileList.map((i) => i.uid), strategy: import_sortable.rectSortingStrategy }, /* @__PURE__ */ React.createElement(import_antd.Upload, { ...imageUploadProps }, fileList.length < maxCount && !isView && (centerRender ? (0, import_lodash.isFunction)(centerRender) ? centerRender() : centerRender : /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `pro-upload-image-inner ${disabled ? "pro-upload-image-disabled" : ""} `
-    },
-    /* @__PURE__ */ React.createElement(import_icons.PlusOutlined, null),
-    /* @__PURE__ */ React.createElement("div", { style: { marginTop: 8 } }, (_b = (_a = import_locale.default) == null ? void 0 : _a.ProUpload) == null ? void 0 : _b.buttonText)
-  ))))), showExampleContent && !isView && /* @__PURE__ */ React.createElement(
-    import_Example.Example,
-    {
-      className: "image-example",
-      exampleTitle,
-      exampleContent,
-      exampleModalProps
-    }
-  ), extraTipText && /* @__PURE__ */ React.createElement("div", { className: "upload-tip-txt" }, extraTipText)), /* @__PURE__ */ React.createElement("div", { className: "pro-upload-image-footer" }, footerRender()), /* @__PURE__ */ React.createElement(
-    import_antd.Modal,
-    {
-      title: previewImg == null ? void 0 : previewImg.name,
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
+    direction: "vertical",
+    size: 8,
+    className: "pro-upload-image",
+    children: [headerRender(), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "pro-upload-image",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_core.DndContext, {
+        sensors: [sensor],
+        onDragEnd: onDragEnd,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sortable.SortableContext, {
+          items: fileList.map(i => i.uid),
+          strategy: _sortable.rectSortingStrategy,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_upload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, imageUploadProps), {}, {
+            children: fileList.length < maxCount && !isView && (centerRender ? (0, _lodash.isFunction)(centerRender) ? centerRender() : centerRender : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: `pro-upload-image-inner ${disabled ? 'pro-upload-image-disabled' : ''} `,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusOutlined, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                style: {
+                  marginTop: 8
+                },
+                children: _locale.default === null || _locale.default === void 0 || (_locale$ProUpload4 = _locale.default.ProUpload) === null || _locale$ProUpload4 === void 0 ? void 0 : _locale$ProUpload4.buttonText
+              })]
+            }))
+          }))
+        })
+      }), showExampleContent && !isView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Example.Example, {
+        className: "image-example",
+        exampleTitle: exampleTitle,
+        exampleContent: exampleContent,
+        exampleModalProps: exampleModalProps
+      }), extraTipText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "upload-tip-txt",
+        children: extraTipText
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "pro-upload-image-footer",
+      children: footerRender()
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.default, {
+      title: previewImg === null || previewImg === void 0 ? void 0 : previewImg.name,
       width: "600",
-      style: { width: "400px" },
-      open: (previewImg == null ? void 0 : previewImg.url) || (previewImg == null ? void 0 : previewImg.thumbUrl),
+      style: {
+        width: '400px'
+      },
+      open: (previewImg === null || previewImg === void 0 ? void 0 : previewImg.url) || (previewImg === null || previewImg === void 0 ? void 0 : previewImg.thumbUrl),
       wrapClassName: "proupload-modal-preview",
       onCancel: handlePreviewCancel,
-      footer: false
-    },
-    /* @__PURE__ */ React.createElement("img", { alt: "example", style: { width: "100%" }, src: (previewImg == null ? void 0 : previewImg.url) || previewImg.thumbUrl })
-  ));
+      footer: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        alt: "example",
+        style: {
+          width: '100%'
+        },
+        src: (previewImg === null || previewImg === void 0 ? void 0 : previewImg.url) || previewImg.thumbUrl
+      })
+    })]
+  });
 };
-var ImageRender_default = ImageRender;
+var _default = exports.default = ImageRender;