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

package/es/ProUpload/index.js

@@ -1,38 +1,26 @@
-import "antd/es/button/style";
-import _Button from "antd/es/button";
-import "antd/es/progress/style";
-import _Progress from "antd/es/progress";
 import "antd/es/message/style";
 import _message from "antd/es/message";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import "antd/es/upload/style";
-import _Upload from "antd/es/upload"; // @ts-noCheck
+var _excluded = ["value", "size", "action", "maxCount", "headerRender", "footerRender", "disabled", "uploadType", "buttonProps", "accept", "extraTipText", "beforeUpload", "onChange", "onDownload", "onPreview", "onRemove", "method", "className", "dataParams", "name", "showExampleContent", "showUploadList", "otherProps", "transformResponse", "exampleTitle", "exampleContent", "exampleModalProps", "buttonText", "afterRender", "fieldNames"];
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * @Author: wangshengqiang
  * @Date: 2023-02-03 14:18:59
- * @LastEditTime: 2023-04-25 11:57:13
+ * @LastEditTime: 2023-09-18 10:15:05
  * @LastEditors: wangshengqiang
  * @Description: 上传控件
  */
-var _excluded = ["value", "size", "action", "maxCount", "headerRender", "footerRender", "disabled", "uploadType", "buttonProps", "accept", "extraTipText", "beforeUpload", "onChange", "onDownload", "onPreview", "onRemove", "method", "className", "dataParams", "showExampleContent", "otherProps", "transformResponse"];
-import React, { useEffect, useRef, useState } from 'react';
-import { CloudUploadOutlined, PlusOutlined } from '@ant-design/icons';
-import { ReactSVG } from 'react-svg';
-import { FileItem, getFileExt, getFileIcon, DragSingleFileItem } from './FileItem';
-import { Example } from './Example';
-import lookSvg from './style/look.svg';
-import deleteSvg from './style/delete.svg';
-import downloadSvg from './style/download.svg';
-var validateSize = function validateSize(size, file) {
-  if (size !== undefined) {
-    return file.size <= size * 1024 * 1024;
-  }
-  return true;
-};
-var Dragger = _Upload.Dragger;
-var ProUpload = function ProUpload(props) {
+import React, { useEffect, useState, useImperativeHandle } from 'react';
+import { isFunction } from 'lodash';
+import { PointerSensor, useSensor } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import DragRender from './components/DragRender';
+import ButtonRender from './components/ButtonRender';
+import ImageRender from './components/ImageRender';
+import { validateSize, validateFileExt } from './uitls';
+var ProUpload = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     _fileList = _useState2[0],
@@ -60,21 +48,92 @@ var ProUpload = function ProUpload(props) {
     method = _props$method === void 0 ? 'post' : _props$method,
     className = props.className,
     dataParams = props.dataParams,
+    _props$name = props.name,
+    name = _props$name === void 0 ? 'file' : _props$name,
     _props$showExampleCon = props.showExampleContent,
     showExampleContent = _props$showExampleCon === void 0 ? false : _props$showExampleCon,
+    _props$showUploadList = props.showUploadList,
+    showUploadList = _props$showUploadList === void 0 ? true : _props$showUploadList,
     otherProps = props.otherProps,
     transformResponse = props.transformResponse,
+    _props$exampleTitle = props.exampleTitle,
+    exampleTitle = _props$exampleTitle === void 0 ? '查看示例' : _props$exampleTitle,
+    exampleContent = props.exampleContent,
+    exampleModalProps = props.exampleModalProps,
+    buttonText = props.buttonText,
+    afterRender = props.afterRender,
+    fieldNames = props.fieldNames,
     residueProps = _objectWithoutProperties(props, _excluded);
   var isView = otherProps === null || otherProps === void 0 ? void 0 : otherProps.isView;
-  var refReSelect = useRef();
+  var sensor = useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  });
+  // 文件格式
+  var extExt = accept ? accept.split(',').map(function (i) {
+    return i.toLocaleUpperCase();
+  }) : [];
   var uploadResTransform = function uploadResTransform(fileList) {
-    return fileList.map(function (file) {
-      if (file.response && transformResponse) {
-        var data = transformResponse(file.response) || {};
-        return _objectSpread(_objectSpread({}, file), data);
+    var _list = fileList.map(function (file) {
+      // 组件负责上传 内部处理
+      if (file.status === 'done' && file.response) {
+        var nfile = {
+          name: file.name,
+          size: file.size,
+          status: file.status,
+          type: file.type,
+          uid: file.uid,
+          response: file === null || file === void 0 ? void 0 : file.response
+          // url: file?.response?.data?.url,
+        };
+
+        if (transformResponse) {
+          var data = transformResponse(file.response) || {};
+          return _objectSpread(_objectSpread({}, nfile), data);
+        }
+        return nfile;
       }
       return file;
     });
+    return _list;
+  };
+  var uploadFileItem = function uploadFileItem(file, index) {
+    var fd = new FormData();
+    fd.append(name, file.originFileObj);
+    if (Array.isArray(Object.keys(dataParams))) {
+      Object.keys(dataParams).forEach(function (k) {
+        fd.append(k, dataParams[k]);
+      });
+    }
+    var list = _fileList.slice();
+    var fileItem = list[index];
+    list[index] = _objectSpread(_objectSpread({}, fileItem), {}, {
+      percent: 25,
+      status: 'uploading'
+    });
+    setFileList(list);
+    onChange === null || onChange === void 0 ? void 0 : onChange(list);
+    fetch(action, {
+      method: method,
+      body: fd
+    }).then(function (res) {
+      var list = _fileList.slice();
+      var fileItem = list[index];
+      list[index] = _objectSpread(_objectSpread({}, fileItem), {}, {
+        response: res,
+        percent: 100,
+        status: 'done'
+      });
+      var nlist = uploadResTransform(list);
+      setFileList(nlist);
+      onChange === null || onChange === void 0 ? void 0 : onChange(nlist);
+    });
+  };
+  var uploadFiles = function uploadFiles() {
+    _fileList.forEach(function (Item, index) {
+      uploadFileItem(Item, index);
+    });
   };
   /**
    * @description: 文件列表变化
@@ -83,7 +142,7 @@ var ProUpload = function ProUpload(props) {
   var handleFileChange = function handleFileChange(_ref) {
     var file = _ref.file,
       fileList = _ref.fileList;
-    if (!file.status && action) {
+    if (!file.status && action && !ref) {
       var nFileList = fileList.filter(function (f) {
         return f.uid !== file.uid;
       });
@@ -92,41 +151,22 @@ var ProUpload = function ProUpload(props) {
       onChange && onChange(nFileList);
       return;
     }
-    var _fileList = uploadResTransform(fileList);
+    if (!action) {
+      if (validateFileExt(extExt, file) && validateSize(size, file)) {
+        var _fileList2 = uploadResTransform(fileList);
+        setFileList(_fileList2);
+        onChange && onChange(_fileList2);
+        return;
+      }
+      return;
+    }
+    var list = fileList.filter(function (file) {
+      return validateFileExt(extExt, file) && validateSize(size, file);
+    });
+    var _fileList = uploadResTransform(list);
     setFileList(_fileList);
     onChange && onChange(_fileList);
   };
-  /**
-   * @description: 文件删除
-   * @param {UploadFile} file
-   * @return {*}
-   */
-  var handleDelFile = function handleDelFile(file) {
-    if (disabled) return;
-    var _List = _fileList.filter(function (i) {
-      return i.uid !== file.uid;
-    });
-    setFileList(_List);
-    onChange && onChange(_List);
-  };
-  /**
-   * @description: 重新选择 拖拽模式下单个文件可用
-   * @param {UploadFile} file
-   * @return {*}
-   */
-  var handleReSelect = function handleReSelect(file) {
-    if (disabled) return;
-    handleDelFile(file);
-    setTimeout(function () {
-      refReSelect.current.click();
-    }, 1);
-  };
-  // 拖拽模式下单个文件可用
-  var showDraggerSingleRender = maxCount === 1 && _fileList[0];
-  // 文件格式
-  var extExt = accept ? accept.split(',').map(function (i) {
-    return i.toLocaleUpperCase();
-  }) : [];
   /**
    * @description: 文件上传前处理
    * @param {UploadFile} file
@@ -135,38 +175,18 @@ var ProUpload = function ProUpload(props) {
    */
   var handleBeforeUpload = function handleBeforeUpload(file, fileList) {
     // TODO
-    var ext = getFileExt(file.name);
-    if (!extExt.includes(ext.toLocaleUpperCase()) && extExt.length > 0) {
-      _message.error('文件格式不支持');
+    if (!validateFileExt(extExt, file)) {
+      _message.error("\u6587\u4EF6\u53EA\u652F\u6301\u3010".concat(extExt.join('、'), "\u3011\u683C\u5F0F"));
       return false;
     }
     if (!validateSize(size, file)) {
-      _message.error('您上传的文件过大');
+      _message.error("\u4E0A\u4F20\u7684\u6587\u4EF6\u4E0D\u80FD\u8D85\u8FC7".concat(size, "M"));
       return false;
     }
     if (beforeUpload) {
       return beforeUpload(file, fileList);
     }
   };
-  var handleDownload = function handleDownload(file) {
-    if (onDownload) {
-      onDownload(file);
-    } else {
-      window.open(file.url || file.thumbUrl);
-    }
-  };
-  /**
-   * @description: 处理预览按钮
-   * @param {UploadFile} file
-   * @return {*}
-   */
-  var handlePreview = function handlePreview(file) {
-    if (onPreview) {
-      onPreview(file);
-    } else {
-      window.open(file.url || file.thumbUrl);
-    }
-  };
   var handleRemove = function handleRemove(file) {
     var nextList = _fileList.slice();
     var nFile = nextList.filter(function (_file) {
@@ -174,52 +194,42 @@ var ProUpload = function ProUpload(props) {
     });
     setFileList(nFile);
   };
-  /**
-   * @description: 单个拖拽上传界面
-   * @param {UploadFile} file
-   * @return {*}
-   */
-  var draggerSingleRender = function draggerSingleRender(file) {
-    var _fileExt = getFileExt(file.name);
-    var _fileIcon = getFileIcon(_fileExt);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "dragger-single-file"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "file-type-icon"
-    }, /*#__PURE__*/React.createElement("img", {
-      src: _fileIcon
-    })), /*#__PURE__*/React.createElement(DragSingleFileItem, {
-      file: file,
-      disabled: disabled,
-      onDownload: onDownload
-    }), file.status !== 'uploading' && /*#__PURE__*/React.createElement("div", {
-      className: "file-action-box"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "file-name",
-      onClick: function onClick() {
-        handleReSelect(file);
-      }
-    }, "\u91CD\u65B0\u9009\u62E9"), /*#__PURE__*/React.createElement("div", {
-      className: "file-del",
-      onClick: function onClick() {
-        handleDelFile(file);
-      }
-    }, "\u5220\u9664")));
-  };
   // 自定义顶部
-  var _headerRender = headerRender && headerRender();
+  var _headerRender = function _headerRender() {
+    if (isFunction(headerRender)) {
+      return headerRender();
+    }
+    return headerRender;
+  };
   // 自定义底部
-  var _footerRender = footerRender && footerRender();
-  // 文件列表项显示
-  var itemRender = function itemRender(originNode, file, fileList, actions) {
-    return /*#__PURE__*/React.createElement(FileItem, {
-      disabled: disabled || isView,
-      file: file,
-      onPreview: handlePreview,
-      onRemove: actions.remove,
-      onDownload: onDownload
-    });
+  var _footerRender = function _footerRender() {
+    if (isFunction(footerRender)) {
+      return footerRender();
+    }
+    return footerRender;
+  };
+  var onDragEnd = function onDragEnd(_ref2) {
+    var active = _ref2.active,
+      over = _ref2.over;
+    if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+      setFileList(function (prev) {
+        var activeIndex = prev.findIndex(function (i) {
+          return i.uid === active.id;
+        });
+        var overIndex = prev.findIndex(function (i) {
+          return i.uid === (over === null || over === void 0 ? void 0 : over.id);
+        });
+        var _list = arrayMove(prev, activeIndex, overIndex);
+        onChange && onChange(_list);
+        return _list;
+      });
+    }
   };
+  useImperativeHandle(ref, function () {
+    return {
+      uploadStart: uploadFiles
+    };
+  }, [_fileList]);
   // 通用props
   var baseUploadProps = _objectSpread({
     action: action,
@@ -227,184 +237,56 @@ var ProUpload = function ProUpload(props) {
     onRemove: handleRemove,
     onChange: handleFileChange,
     maxCount: maxCount,
-    showUploadList: true,
-    fileList: _fileList,
-    disabled: disabled || isView,
+    showUploadList: showUploadList,
     method: method,
+    accept: accept,
     data: _objectSpread({}, dataParams)
   }, residueProps);
-  // 按钮类型的props
-  var buttonUploadProps = _objectSpread(_objectSpread({}, baseUploadProps), {}, {
-    itemRender: itemRender
-  });
-  // 拖拽类型的props
-  var dragUploadProps = _objectSpread(_objectSpread({}, baseUploadProps), {}, {
-    showUploadList: false,
-    openFileDialogOnClick: !showDraggerSingleRender,
-    itemRender: itemRender
-  });
-  // 图片类上传Props
-  var imageUploadProps = _objectSpread(_objectSpread({}, baseUploadProps), {}, {
-    listType: 'picture-card',
-    openFileDialogOnClick: !showDraggerSingleRender,
+  var baseProps = {
+    isView: isView,
+    headerRender: _headerRender,
+    footerRender: _footerRender,
+    sensor: sensor,
+    fileList: _fileList,
+    baseUploadProps: baseUploadProps,
+    onDragEnd: onDragEnd,
+    onPreview: onPreview,
+    onDownload: onDownload,
+    onRemove: handleRemove,
+    onChange: onChange,
+    setFileList: setFileList,
+    extExt: extExt,
+    maxCount: maxCount,
     disabled: disabled || isView,
-    itemRender: function itemRender(originNode, file, fileList, actions) {
-      var _showPreview = file.status === 'done';
-      var _isShowDownload = !!onDownload && file.status === 'done';
-      return /*#__PURE__*/React.createElement("div", {
-        key: file.uid,
-        className: "file-item-image ".concat(file.status === 'error' ? 'actions-wrap-error' : '')
-      }, file.status === 'uploading' && /*#__PURE__*/React.createElement("div", {
-        className: "image-uploading"
-      }, /*#__PURE__*/React.createElement(_Progress, {
-        size: "small",
-        percent: Math.ceil(file.percent)
-      })), file.status !== 'uploading' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__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(_Button, {
-        type: "link",
-        className: "action-item",
-        onClick: function onClick() {
-          handlePreview(file);
-        },
-        icon: /*#__PURE__*/React.createElement(ReactSVG, {
-          className: "action-icon",
-          wrapper: "span",
-          src: lookSvg
-        })
-      }, "\u67E5\u770B"), _isShowDownload && /*#__PURE__*/React.createElement(_Button, {
-        type: "link",
-        disabled: isView || disabled,
-        className: "action-item",
-        onClick: function onClick() {
-          handleDownload(file);
-        },
-        icon: /*#__PURE__*/React.createElement(ReactSVG, {
-          className: "action-icon",
-          wrapper: "span",
-          src: downloadSvg
-        })
-      }, "\u4E0B\u8F7D")), /*#__PURE__*/React.createElement("div", {
-        className: "action-button"
-      }, /*#__PURE__*/React.createElement(_Button, {
-        type: "link",
-        disabled: isView || disabled,
-        className: "action-item",
-        onClick: actions.remove,
-        icon: /*#__PURE__*/React.createElement(ReactSVG, {
-          className: "action-icon",
-          wrapper: "span",
-          src: deleteSvg
-        })
-      }, "\u5220\u9664")))));
-    }
-  });
-  /* 拖拽类型 */
-  var DragRender = function DragRender() {
-    if (isView) return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
-    return /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-dragger"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-handle-box"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-dragger-header"
-    }, _headerRender), /*#__PURE__*/React.createElement(Dragger, _objectSpread({}, dragUploadProps), /*#__PURE__*/React.createElement("div", {
-      className: "drag-upload-inner",
-      ref: refReSelect
-    }, !showDraggerSingleRender && /*#__PURE__*/React.createElement("div", {
-      className: "upload-dragger-control"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "dragger-txt-line1"
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "icon-upload"
-    }, /*#__PURE__*/React.createElement(CloudUploadOutlined, null)), /*#__PURE__*/React.createElement("p", {
-      className: "dragger-txt"
-    }, "\u5C06\u6587\u4EF6\u62D6\u62FD\u5230\u6B64\u5904\uFF0C\u6216", /*#__PURE__*/React.createElement("span", {
-      className: "click-txt"
-    }, "\u70B9\u51FB\u4E0A\u4F20 "))), /*#__PURE__*/React.createElement("p", {
-      className: "file-ext"
-    }, "\u652F\u6301\u6269\u5C55\u540D\uFF1A", extExt.length > 0 ? extExt.join('、') : '无限制')), /*#__PURE__*/React.createElement("div", {
-      className: "dragger-file-show"
-    }, showDraggerSingleRender && draggerSingleRender(_fileList[0])))), /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-dragger-footer"
-    }, _footerRender)), /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-file-list"
-    }, maxCount > 1 && _fileList.map(function (file) {
-      return /*#__PURE__*/React.createElement(FileItem, {
-        file: file,
-        key: file.uid,
-        disabled: disabled || isView,
-        onPreview: handlePreview,
-        onRemove: handleRemove,
-        onDownload: onDownload
-      });
-    })));
+    buttonText: buttonText,
+    extraTipText: extraTipText,
+    afterRender: afterRender
   };
-  /* 按钮类型 */
-  var ButtonRender = function ButtonRender() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-button"
-    }, /*#__PURE__*/React.createElement(_Upload, _objectSpread({}, buttonUploadProps), !isView && /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-button-inner"
-    }, /*#__PURE__*/React.createElement(_Button, _objectSpread(_objectSpread({}, buttonProps), {}, {
-      disabled: disabled || isView
-    }), /*#__PURE__*/React.createElement(CloudUploadOutlined, null), "\u4E0A\u4F20\u6587\u4EF6"))), extraTipText && /*#__PURE__*/React.createElement("div", {
-      className: "upload-tip-txt"
-    }, extraTipText));
-  };
-  /* 图片类型 */
-  var ImageRender = function ImageRender() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-image"
-    }, /*#__PURE__*/React.createElement(_Upload, _objectSpread({}, imageUploadProps), _fileList.length < maxCount && !isView && /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-image-inner ".concat(disabled ? 'pro-upload-image-disabled' : '', " ")
-    }, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginTop: 8
-      }
-    }, "\u4E0A\u4F20\u6587\u4EF6"))), showExampleContent && /*#__PURE__*/React.createElement(Example, {
-      className: "image-example"
-    }), extraTipText && /*#__PURE__*/React.createElement("div", {
-      className: "upload-tip-txt"
-    }, extraTipText));
-  };
-  /* 营业执照 */
-  var LicenseRender = function LicenseRender() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-button"
-    }, /*#__PURE__*/React.createElement(_Upload, _objectSpread({}, buttonUploadProps), /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-button-inner"
-    }, /*#__PURE__*/React.createElement(_Button, _objectSpread({}, buttonProps), /*#__PURE__*/React.createElement(CloudUploadOutlined, null), "\u4E0A\u4F20\u6587\u4EF6"))), extraTipText && /*#__PURE__*/React.createElement("div", {
-      className: "upload-tip-txt"
-    }, extraTipText));
-  };
-  /* 身份证 */
-  var SFZRender = function SFZRender() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-button"
-    }, /*#__PURE__*/React.createElement(_Upload, _objectSpread({}, buttonUploadProps), /*#__PURE__*/React.createElement("div", {
-      className: "pro-upload-button-inner"
-    }, /*#__PURE__*/React.createElement(_Button, _objectSpread({}, buttonProps), /*#__PURE__*/React.createElement(CloudUploadOutlined, null), "\u4E0A\u4F20\u6587\u4EF6"))), extraTipText && /*#__PURE__*/React.createElement("div", {
-      className: "upload-tip-txt"
-    }, extraTipText));
-  };
-  var upload = {
-    drag: DragRender,
-    button: ButtonRender,
-    image: ImageRender,
-    license: LicenseRender,
-    sfz: SFZRender
-  }[uploadType];
   useEffect(function () {
-    setFileList(value || []);
+    if (fieldNames && value.length > 0) {
+      var _value = value.map(function (file) {
+        var _keys = Object.keys(fieldNames);
+        _keys.forEach(function (key) {
+          if (!file[key]) {
+            file[key] = file[fieldNames[key]];
+          }
+        });
+        if (!file.uid) {
+          file.uid = "".concat(Math.ceil(Math.random() * 10000));
+        }
+        if (!file.status) {
+          file.status = 'done';
+        }
+        return _objectSpread({}, file);
+      });
+      setFileList(_value || []);
+    } else {
+      setFileList(value || []);
+    }
   }, [value]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "pro-upload ".concat(className !== null && className !== void 0 ? className : '')
-  }, upload());
-};
+  return _jsxs("div", {
+    className: "pro-upload ".concat(className !== null && className !== void 0 ? className : ''),
+    children: [uploadType === 'drag' && _jsx(DragRender, _objectSpread({}, baseProps)), uploadType === 'button' && _jsx(ButtonRender, _objectSpread({}, baseProps)), uploadType === 'image' && _jsx(ImageRender, _objectSpread({}, baseProps))]
+  });
+});
 export default ProUpload;