@zat-design/sisyphus-react 3.13.14-deta.2 → 4.0.0-beta.3

package/lib/ProUpload/components/ImageRender.js

@@ -1,282 +1,203 @@
-"use strict";
+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);
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// src/ProUpload/components/ImageRender.tsx
+var ImageRender_exports = {};
+__export(ImageRender_exports, {
+  default: () => ImageRender_default
 });
-exports.default = void 0;
-require("antd/es/modal/style");
-var _modal = _interopRequireDefault(require("antd/es/modal"));
-require("antd/es/upload/style");
-var _upload = _interopRequireDefault(require("antd/es/upload"));
-require("antd/es/space/style");
-var _space = _interopRequireDefault(require("antd/es/space"));
-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 _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _core = require("@dnd-kit/core");
-var _sortable = require("@dnd-kit/sortable");
-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 isImgage = function isImgage(_fileExt) {
-  return ['.PNG', '.JPG', '.JPEG', '.GIF', '.BMP', '.JPE'].includes(_fileExt.toLocaleUpperCase());
+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());
 };
-/* 按钮类型 */
-var ImageRender = function 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 = function handlePreviewImg(file) {
+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;
     if (onPreview) {
       onPreview(file);
     } else {
-      var _file$url;
-      var _fileExt = (0, _FileItem.getFileExt)(file.name || (file === null || file === void 0 ? void 0 : (_file$url = file.url) === null || _file$url === void 0 ? void 0 : _file$url.split('?')[0]));
+      const _fileExt = (0, import_FileItem.getFileExt)(file.name || ((_a2 = file == null ? void 0 : file.url) == null ? void 0 : _a2.split("?")[0]));
       if (isImgage(_fileExt)) {
         setPreviewImg(file);
       } else {
-        window.open(file.url, '_blank');
+        window.open(file.url, "_blank");
       }
     }
   };
-  /**
-   * @description: 取消预览
-   * @return {*}
-   */
-  var handlePreviewCancel = function handlePreviewCancel() {
+  const handlePreviewCancel = () => {
     setPreviewImg({});
   };
-  /**
-   * @description: 点击下载按钮
-   * @return {*}
-   */
-  var handleDownload = function handleDownload(file) {
+  const handleDownload = (file) => {
     if (onDownload) {
       onDownload(file);
     } else {
       window.open(file.url || file.thumbUrl);
     }
   };
-  var showDraggerSingleRender = maxCount === 1 && fileList[0];
-  // 图片类上传Props
-  var imageUploadProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseUploadProps), {}, {
-    fileList: fileList,
-    listType: 'picture-card',
+  const showDraggerSingleRender = maxCount === 1 && fileList[0];
+  const imageUploadProps = {
+    ...baseUploadProps,
+    fileList,
+    listType: "picture-card",
     openFileDialogOnClick: !showDraggerSingleRender,
     disabled: disabled || isView,
-    itemRender: function 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 ? 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 (0, _jsxRuntime.jsx)(_DraggableUploadListItem.DraggableUploadListItem, {
-        file: file,
-        children: (0, _jsxRuntime.jsxs)("div", {
-          className: "file-item-image ".concat(file.status === 'error' ? 'actions-wrap-error' : ''),
-          children: [file.status === 'uploading' && (0, _jsxRuntime.jsx)("div", {
-            className: "image-uploading",
-            children: (0, _jsxRuntime.jsx)(_progress.default, {
-              size: "small",
-              percent: Math.ceil(file.percent)
-            })
-          }), file.status !== 'uploading' && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [!isImg ? (0, _jsxRuntime.jsx)("img", {
-              className: "file-type-icon-img",
-              src: _fileIcon
-            }) : (0, _jsxRuntime.jsx)("img", {
-              className: "image-con",
-              src: file.url || file.thumbUrl
-            }), (0, _jsxRuntime.jsxs)("div", {
-              className: "actions-wrap ",
-              children: [(0, _jsxRuntime.jsxs)("div", {
-                className: "action-top",
-                children: [_showPreview && (0, _jsxRuntime.jsx)(_button.default, {
-                  type: "link",
-                  className: "action-item",
-                  onClick: function onClick() {
-                    handlePreviewImg(file);
-                  },
-                  icon: (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
-                    className: "action-icon",
-                    wrapper: "span",
-                    src: _look.default
-                  }),
-                  children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProUpload = _locale.default.ProUpload) === null || _locale$ProUpload === void 0 ? void 0 : _locale$ProUpload.view
-                }), _isShowDownload && (0, _jsxRuntime.jsx)(_button.default, {
-                  type: "link",
-                  disabled: isView || disabled,
-                  className: "action-item",
-                  onClick: function onClick() {
-                    handleDownload(file);
-                  },
-                  icon: (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
-                    className: "action-icon",
-                    wrapper: "span",
-                    src: _download.default
-                  }),
-                  children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProUpload2 = _locale.default.ProUpload) === null || _locale$ProUpload2 === void 0 ? void 0 : _locale$ProUpload2.download
-                })]
-              }), (0, _jsxRuntime.jsx)("div", {
-                className: "action-button",
-                children: (0, _jsxRuntime.jsx)(_button.default, {
-                  type: "link",
-                  disabled: isView || disabled,
-                  className: "action-item",
-                  onClick: function () {
-                    var _onClick = (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]]);
-                    }));
-                    function onClick() {
-                      return _onClick.apply(this, arguments);
-                    }
-                    return onClick;
-                  }(),
-                  icon: (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
-                    className: "action-delete action-icon",
-                    wrapper: "span",
-                    src: _delete.default
-                  }),
-                  children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProUpload3 = _locale.default.ProUpload) === null || _locale$ProUpload3 === void 0 ? void 0 : _locale$ProUpload3.delete
-                })
-              })]
-            })]
-          })]
-        }, file.uid)
-      });
+    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
+        ))))
+      ));
     }
-  });
-  return (0, _jsxRuntime.jsxs)(_space.default, {
-    direction: "vertical",
-    size: 8,
-    className: "pro-upload-image",
-    children: [headerRender(), (0, _jsxRuntime.jsxs)("div", {
-      className: "pro-upload-image",
-      children: [(0, _jsxRuntime.jsx)(_core.DndContext, {
-        sensors: [sensor],
-        onDragEnd: onDragEnd,
-        children: (0, _jsxRuntime.jsx)(_sortable.SortableContext, {
-          items: fileList.map(function (i) {
-            return i.uid;
-          }),
-          strategy: _sortable.rectSortingStrategy,
-          children: (0, _jsxRuntime.jsx)(_upload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, imageUploadProps), {}, {
-            children: fileList.length < maxCount && !isView && (centerRender ? (0, _isFunction2.default)(centerRender) ? centerRender() : centerRender : (0, _jsxRuntime.jsxs)("div", {
-              className: "pro-upload-image-inner ".concat(disabled ? 'pro-upload-image-disabled' : '', " "),
-              children: [(0, _jsxRuntime.jsx)(_icons.PlusOutlined, {}), (0, _jsxRuntime.jsx)("div", {
-                style: {
-                  marginTop: 8
-                },
-                children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProUpload4 = _locale.default.ProUpload) === null || _locale$ProUpload4 === void 0 ? void 0 : _locale$ProUpload4.buttonText
-              })]
-            }))
-          }))
-        })
-      }), showExampleContent && !isView && (0, _jsxRuntime.jsx)(_Example.Example, {
-        className: "image-example",
-        exampleTitle: exampleTitle,
-        exampleContent: exampleContent,
-        exampleModalProps: exampleModalProps
-      }), extraTipText && (0, _jsxRuntime.jsx)("div", {
-        className: "upload-tip-txt",
-        children: extraTipText
-      })]
-    }), (0, _jsxRuntime.jsx)("div", {
-      className: "pro-upload-image-footer",
-      children: footerRender()
-    }), (0, _jsxRuntime.jsx)(_modal.default, {
-      title: previewImg === null || previewImg === void 0 ? void 0 : previewImg.name,
+  };
+  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,
       width: "600",
-      style: {
-        width: '400px'
-      },
-      open: (previewImg === null || previewImg === void 0 ? void 0 : previewImg.url) || (previewImg === null || previewImg === void 0 ? void 0 : previewImg.thumbUrl),
+      style: { width: "400px" },
+      open: (previewImg == null ? void 0 : previewImg.url) || (previewImg == null ? void 0 : previewImg.thumbUrl),
       wrapClassName: "proupload-modal-preview",
       onCancel: handlePreviewCancel,
-      footer: false,
-      children: (0, _jsxRuntime.jsx)("img", {
-        alt: "example",
-        style: {
-          width: '100%'
-        },
-        src: (previewImg === null || previewImg === void 0 ? void 0 : previewImg.url) || previewImg.thumbUrl
-      })
-    })]
-  });
+      footer: false
+    },
+    /* @__PURE__ */ React.createElement("img", { alt: "example", style: { width: "100%" }, src: (previewImg == null ? void 0 : previewImg.url) || previewImg.thumbUrl })
+  ));
 };
-var _default = exports.default = ImageRender;
+var ImageRender_default = ImageRender;