@zat-design/sisyphus-react 3.0.16-beta.4 → 3.1.4

package/es/ProUpload/components/ImageRender.js

@@ -0,0 +1,267 @@
+import "antd/es/modal/style";
+import _Modal from "antd/es/modal";
+import "antd/es/upload/style";
+import _Upload from "antd/es/upload";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/progress/style";
+import _Progress from "antd/es/progress";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * @Author: wangshengqiang
+ * @Date: 2023-07-27 20:13:07
+ * @LastEditors: wangshengqiang
+ * @LastEditTime: 2023-09-17 14:56:31
+ * @Description: 图片类型
+ *
+ */
+
+import { 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 { Example } from './Example';
+import { getFileExt, getFileIcon } from './FileItem';
+import { DraggableUploadListItem } from './DraggableUploadListItem';
+import lookSvg from '../../assets/look.svg';
+import deleteSvg from '../../assets/delete.svg';
+import downloadSvg from '../../assets/download.svg';
+/* 按钮类型 */
+var ImageRender = function ImageRender(props) {
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    previewImg = _useState2[0],
+    setPreviewImg = _useState2[1];
+  var isView = props.isView,
+    disabled = props.disabled,
+    headerRender = props.headerRender,
+    footerRender = props.footerRender,
+    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) {
+    if (onPreview) {
+      onPreview(file);
+    } else {
+      setPreviewImg(file);
+    }
+  };
+  /**
+   * @description: 取消预览
+   * @return {*}
+   */
+  var handlePreviewCancel = function handlePreviewCancel() {
+    setPreviewImg({});
+  };
+  /**
+   * @description: 点击下载按钮
+   * @return {*}
+   */
+  var handleDownload = function handleDownload(file) {
+    if (onDownload) {
+      onDownload(file);
+    } else {
+      window.open(file.url || file.thumbUrl);
+    }
+  };
+  var showDraggerSingleRender = maxCount === 1 && fileList[0];
+  // 图片类上传Props
+  var imageUploadProps = _objectSpread(_objectSpread({}, baseUploadProps), {}, {
+    fileList: fileList,
+    listType: 'picture-card',
+    openFileDialogOnClick: !showDraggerSingleRender,
+    disabled: disabled || isView,
+    itemRender: function itemRender(originNode, file, fileList, actions) {
+      var _file$url;
+      var _showPreview = file.status === 'done';
+      var _isShowDownload = !!onDownload && file.status === 'done';
+      var _fileExt = 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]));
+      var _fileIcon = getFileIcon(_fileExt);
+      var isImg = ['.PNG', '.JPG', '.JPEG', '.GIF', '.BMP', '.JPE'].includes(_fileExt.toLocaleUpperCase());
+      return _jsx(DraggableUploadListItem, {
+        file: file,
+        children: _jsxs("div", {
+          className: "file-item-image ".concat(file.status === 'error' ? 'actions-wrap-error' : ''),
+          children: [file.status === 'uploading' && _jsx("div", {
+            className: "image-uploading",
+            children: _jsx(_Progress, {
+              size: "small",
+              percent: Math.ceil(file.percent)
+            })
+          }), file.status !== 'uploading' && _jsxs(_Fragment, {
+            children: [!isImg ? _jsx("img", {
+              className: "file-type-icon-img",
+              src: _fileIcon
+            }) : _jsx("img", {
+              className: "image-con",
+              src: file.url || file.thumbUrl
+            }), _jsxs("div", {
+              className: "actions-wrap ",
+              children: [_jsxs("div", {
+                className: "action-top",
+                children: [_showPreview && _jsx(_Button, {
+                  type: "link",
+                  className: "action-item",
+                  onClick: function onClick() {
+                    handlePreviewImg(file);
+                  },
+                  icon: _jsx(ReactSVG, {
+                    className: "action-icon",
+                    wrapper: "span",
+                    src: lookSvg
+                  }),
+                  children: "\u67E5\u770B"
+                }), _isShowDownload && _jsx(_Button, {
+                  type: "link",
+                  disabled: isView || disabled,
+                  className: "action-item",
+                  onClick: function onClick() {
+                    handleDownload(file);
+                  },
+                  icon: _jsx(ReactSVG, {
+                    className: "action-icon",
+                    wrapper: "span",
+                    src: downloadSvg
+                  }),
+                  children: "\u4E0B\u8F7D"
+                })]
+              }), _jsx("div", {
+                className: "action-button",
+                children: _jsx(_Button, {
+                  type: "link",
+                  disabled: isView || disabled,
+                  className: "action-item",
+                  onClick: function () {
+                    var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                      var res;
+                      return _regeneratorRuntime().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: _jsx(ReactSVG, {
+                    className: "action-delete action-icon",
+                    wrapper: "span",
+                    src: deleteSvg
+                  }),
+                  children: "\u5220\u9664"
+                })
+              })]
+            })]
+          })]
+        }, file.uid)
+      });
+    }
+  });
+  return _jsxs(_Space, {
+    direction: "vertical",
+    size: 8,
+    className: "pro-upload-image",
+    children: [headerRender(), _jsxs("div", {
+      className: "pro-upload-image",
+      children: [_jsx(DndContext, {
+        sensors: [sensor],
+        onDragEnd: onDragEnd,
+        children: _jsx(SortableContext, {
+          items: fileList.map(function (i) {
+            return i.uid;
+          }),
+          strategy: rectSortingStrategy,
+          children: _jsx(_Upload, _objectSpread(_objectSpread({}, imageUploadProps), {}, {
+            children: fileList.length < maxCount && !isView && _jsxs("div", {
+              className: "pro-upload-image-inner ".concat(disabled ? 'pro-upload-image-disabled' : '', " "),
+              children: [_jsx(PlusOutlined, {}), _jsx("div", {
+                style: {
+                  marginTop: 8
+                },
+                children: "\u70B9\u51FB\u4E0A\u4F20"
+              })]
+            })
+          }))
+        })
+      }), showExampleContent && !isView && _jsx(Example, {
+        className: "image-example",
+        exampleTitle: exampleTitle,
+        exampleContent: exampleContent,
+        exampleModalProps: exampleModalProps
+      }), extraTipText && _jsx("div", {
+        className: "upload-tip-txt",
+        children: extraTipText
+      })]
+    }), _jsx("div", {
+      className: "pro-upload-image-footer",
+      children: footerRender()
+    }), _jsx(_Modal, {
+      title: previewImg === null || previewImg === void 0 ? void 0 : previewImg.name,
+      width: "600",
+      open: !!(previewImg === null || previewImg === void 0 ? void 0 : previewImg.url),
+      // showType="Modal"
+      onCancel: handlePreviewCancel,
+      footer: false,
+      children: _jsx("img", {
+        alt: "example",
+        style: {
+          width: '100%'
+        },
+        src: previewImg === null || previewImg === void 0 ? void 0 : previewImg.url
+      })
+    })]
+  });
+};
+export default ImageRender;