@zat-design/sisyphus-react 4.5.9 → 4.5.10-beta.2

package/es/ProUpload/components/ImageRender.js

@@ -1,10 +1,11 @@
-import _isFunction from "lodash/isFunction";
-import { Button, Upload, Progress, Space, Modal } from 'antd';
-import { useRef, useState } from 'react';
-import { DndContext } from '@dnd-kit/core';
-import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
-import { ReactSVG } from 'react-svg';
-import { PlusOutlined } from '@ant-design/icons';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Upload, Progress, Space, Modal } from "antd";
+import { useRef, useState } from "react";
+import { DndContext } from "@dnd-kit/core";
+import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
+import isFunction from "lodash/isFunction";
+import { ReactSVG } from "react-svg";
+import { PlusOutlined } from "@ant-design/icons";
 import { Example } from "./Example";
 import { getFileExt, getFileIcon } from "./FileItem";
 import { DraggableUploadListItem } from "./DraggableUploadListItem";
@@ -12,12 +13,11 @@ import lookSvg from "../../assets/look.svg";
 import deleteSvg from "../../assets/delete.svg";
 import downloadSvg from "../../assets/download.svg";
 import locale from "../../locale";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const isImgage = _fileExt => {
-  return ['.PNG', '.JPG', '.JPEG', '.GIF', '.BMP', '.JPE'].includes(_fileExt.toLocaleUpperCase());
+const isImgage = (_fileExt) => {
+  return [".PNG", ".JPG", ".JPEG", ".GIF", ".BMP", ".JPE"].includes(_fileExt.toLocaleUpperCase());
 };
-/* 按钮类型 */
-const ImageRender = props => {
+const ImageRender = (props) => {
+  var _a, _b;
   const [previewImg, setPreviewImg] = useState({});
   const proViewerRef = useRef(null);
   const {
@@ -40,38 +40,23 @@ const ImageRender = props => {
     exampleContent,
     exampleModalProps
   } = props;
-
-  /**
-   * @description: 处理预览图片按钮
-   * @param {UploadFile} file
-   * @return {*}
-   */
-  const handlePreviewImg = file => {
+  const handlePreviewImg = (file) => {
+    var _a2;
     if (onPreview) {
       onPreview(file);
     } else {
-      const _fileExt = getFileExt(file.name || file?.url?.split('?')[0]);
+      const _fileExt = 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 {*}
-   */
   const handlePreviewCancel = () => {
     setPreviewImg({});
   };
-
-  /**
-   * @description: 点击下载按钮
-   * @return {*}
-   */
-  const handleDownload = file => {
+  const handleDownload = (file) => {
     if (onDownload) {
       onDownload(file);
     } else {
@@ -79,153 +64,132 @@ const ImageRender = props => {
     }
   };
   const showDraggerSingleRender = maxCount === 1 && fileList[0];
-
-  // 图片类上传Props
   const imageUploadProps = {
     ...baseUploadProps,
     fileList,
-    listType: 'picture-card',
+    listType: "picture-card",
     openFileDialogOnClick: !showDraggerSingleRender,
     disabled: disabled || isView,
-    itemRender: (originNode, file, fileList, actions) => {
-      const _isShowDownload = !!onDownload && file.status === 'done';
-      const _fileExt = getFileExt(file.name || file?.url?.split('?')[0]);
+    itemRender: (originNode, file, fileList2, actions) => {
+      var _a2, _b2, _c, _d, _e, _f, _g;
+      const _isShowDownload = !!onDownload && file.status === "done";
+      const _fileExt = getFileExt(file.name || ((_a2 = file == null ? void 0 : file.url) == null ? void 0 : _a2.split("?")[0]));
       const _fileIcon = getFileIcon(_fileExt);
       const isImg = isImgage(_fileExt);
-      const _showPreview = isImg || file.status === 'done';
-      return /*#__PURE__*/_jsx(DraggableUploadListItem, {
-        file: file,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: `file-item-image ${file.status === 'error' ? 'actions-wrap-error' : ''}`,
-          children: [file.status === 'uploading' && /*#__PURE__*/_jsx("div", {
-            className: "image-uploading",
-            children: /*#__PURE__*/_jsx(Progress, {
-              size: "small",
-              percent: Math.ceil(file.percent)
-            })
-          }), file.status !== 'uploading' && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [!isImg ? /*#__PURE__*/_jsx("img", {
-              className: "file-type-icon-img",
-              src: _fileIcon
-            }) : /*#__PURE__*/_jsx("img", {
-              className: "image-con",
-              src: file.url || file.thumbUrl
-            }), /*#__PURE__*/_jsxs("div", {
-              className: "actions-wrap ",
-              children: [/*#__PURE__*/_jsxs("div", {
-                className: "action-top",
-                children: [_showPreview && /*#__PURE__*/_jsx(Button, {
-                  type: "link",
-                  className: "action-item",
-                  onClick: () => {
-                    handlePreviewImg(file);
-                  },
-                  icon: /*#__PURE__*/_jsx(ReactSVG, {
-                    className: "action-icon",
-                    wrapper: "span",
-                    src: lookSvg
-                  }),
-                  children: locale?.ProUpload?.view
-                }), _isShowDownload && /*#__PURE__*/_jsx(Button, {
-                  type: "link",
-                  disabled: isView || disabled,
-                  className: "action-item",
-                  onClick: () => {
-                    handleDownload(file);
-                  },
-                  icon: /*#__PURE__*/_jsx(ReactSVG, {
-                    className: "action-icon",
-                    wrapper: "span",
-                    src: downloadSvg
-                  }),
-                  children: locale?.ProUpload?.download
-                })]
-              }), /*#__PURE__*/_jsx("div", {
-                className: "action-button",
-                children: /*#__PURE__*/_jsx(Button, {
-                  type: "link",
-                  disabled: isView || disabled,
-                  className: "action-item",
-                  onClick: async () => {
-                    try {
-                      const res = onRemove && (await onRemove(file));
-                      if (res === false) {
+      const _showPreview = isImg || file.status === "done";
+      return /* @__PURE__ */ jsx(DraggableUploadListItem, { file, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `file-item-image ${file.status === "error" ? "actions-wrap-error" : ""}`,
+          children: [
+            file.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "image-uploading", children: /* @__PURE__ */ jsx(Progress, { size: "small", percent: Math.ceil(file.percent) }) }),
+            file.status !== "uploading" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              !isImg ? /* @__PURE__ */ jsx("img", { className: "file-type-icon-img", src: _fileIcon }) : /* @__PURE__ */ jsx("img", { className: "image-con", src: file.url || file.thumbUrl }),
+              /* @__PURE__ */ jsxs("div", { className: "actions-wrap ", children: [
+                /* @__PURE__ */ jsxs("div", { className: "action-top", children: [
+                  _showPreview && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "link",
+                      className: "action-item",
+                      onClick: () => {
+                        handlePreviewImg(file);
+                      },
+                      icon: /* @__PURE__ */ jsx(ReactSVG, { className: "action-icon", wrapper: "span", src: lookSvg }),
+                      children: (_c = (_b2 = locale) == null ? void 0 : _b2.ProUpload) == null ? void 0 : _c.view
+                    }
+                  ),
+                  _isShowDownload && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "link",
+                      disabled: isView || disabled,
+                      className: "action-item",
+                      onClick: () => {
+                        handleDownload(file);
+                      },
+                      icon: /* @__PURE__ */ jsx(ReactSVG, { className: "action-icon", wrapper: "span", src: downloadSvg }),
+                      children: (_e = (_d = locale) == null ? void 0 : _d.ProUpload) == null ? void 0 : _e.download
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "action-button", children: /* @__PURE__ */ jsx(
+                  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();
                       }
-                      actions.remove(file);
-                    } catch (error) {
-                      return Promise.reject();
-                    }
-                  },
-                  icon: /*#__PURE__*/_jsx(ReactSVG, {
-                    className: "action-delete action-icon",
-                    wrapper: "span",
-                    src: deleteSvg
-                  }),
-                  children: locale?.ProUpload?.delete
-                })
-              })]
-            })]
-          })]
-        }, file.uid)
-      });
+                    },
+                    icon: /* @__PURE__ */ jsx(
+                      ReactSVG,
+                      {
+                        className: "action-delete action-icon",
+                        wrapper: "span",
+                        src: deleteSvg
+                      }
+                    ),
+                    children: (_g = (_f = locale) == null ? void 0 : _f.ProUpload) == null ? void 0 : _g.delete
+                  }
+                ) })
+              ] })
+            ] })
+          ]
+        },
+        file.uid
+      ) });
     }
   };
-  return /*#__PURE__*/_jsxs(Space, {
-    orientation: "vertical",
-    size: 8,
-    className: "pro-upload-image",
-    children: [headerRender(), /*#__PURE__*/_jsxs("div", {
-      className: "pro-upload-image",
-      children: [/*#__PURE__*/_jsx(DndContext, {
-        sensors: [sensor],
-        onDragEnd: onDragEnd,
-        children: /*#__PURE__*/_jsx(SortableContext, {
-          items: fileList.map(i => i.uid),
-          strategy: rectSortingStrategy,
-          children: /*#__PURE__*/_jsx(Upload, {
-            ...imageUploadProps,
-            children: fileList.length < maxCount && !isView && (centerRender ? _isFunction(centerRender) ? centerRender() : centerRender : /*#__PURE__*/_jsxs("div", {
-              className: `pro-upload-image-inner ${disabled ? 'pro-upload-image-disabled' : ''} `,
-              children: [/*#__PURE__*/_jsx(PlusOutlined, {}), /*#__PURE__*/_jsx("div", {
-                style: {
-                  marginTop: 8
-                },
-                children: locale?.ProUpload?.buttonText
-              })]
-            }))
-          })
-        })
-      }), showExampleContent && !isView && /*#__PURE__*/_jsx(Example, {
-        className: "image-example",
-        exampleTitle: exampleTitle,
-        exampleContent: exampleContent,
-        exampleModalProps: exampleModalProps
-      }), extraTipText && /*#__PURE__*/_jsx("div", {
-        className: "upload-tip-txt",
-        children: extraTipText
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      className: "pro-upload-image-footer",
-      children: footerRender()
-    }), /*#__PURE__*/_jsx(Modal, {
-      title: previewImg?.name,
-      width: "600",
-      style: {
-        width: '400px'
-      },
-      open: previewImg?.url || previewImg?.thumbUrl,
-      wrapClassName: "proupload-modal-preview",
-      onCancel: handlePreviewCancel,
-      footer: false,
-      children: /*#__PURE__*/_jsx("img", {
-        alt: "example",
-        style: {
-          width: '100%'
-        },
-        src: previewImg?.url || previewImg.thumbUrl
-      })
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Space, { orientation: "vertical", size: 8, className: "pro-upload-image", children: [
+    headerRender(),
+    /* @__PURE__ */ jsxs("div", { className: "pro-upload-image", children: [
+      /* @__PURE__ */ jsx(DndContext, { sensors: [sensor], onDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: fileList.map((i) => i.uid), strategy: rectSortingStrategy, children: /* @__PURE__ */ jsx(Upload, { ...imageUploadProps, children: fileList.length < maxCount && !isView && (centerRender ? isFunction(centerRender) ? centerRender() : centerRender : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `pro-upload-image-inner ${disabled ? "pro-upload-image-disabled" : ""} `,
+          children: [
+            /* @__PURE__ */ jsx(PlusOutlined, {}),
+            /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: (_b = (_a = locale) == null ? void 0 : _a.ProUpload) == null ? void 0 : _b.buttonText })
+          ]
+        }
+      )) }) }) }),
+      showExampleContent && !isView && /* @__PURE__ */ jsx(
+        Example,
+        {
+          className: "image-example",
+          exampleTitle,
+          exampleContent,
+          exampleModalProps
+        }
+      ),
+      extraTipText && /* @__PURE__ */ jsx("div", { className: "upload-tip-txt", children: extraTipText })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "pro-upload-image-footer", children: footerRender() }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        title: previewImg == null ? void 0 : previewImg.name,
+        width: "600",
+        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: /* @__PURE__ */ jsx("img", { alt: "example", style: { width: "100%" }, src: (previewImg == null ? void 0 : previewImg.url) || previewImg.thumbUrl })
+      }
+    )
+  ] });
+};
+var ImageRender_default = ImageRender;
+export {
+  ImageRender_default as default
 };
-export default ImageRender;