@zat-design/sisyphus-react 3.0.13

package/es/ProUpload/index.js

@@ -0,0 +1,404 @@
+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";
+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';
+import './style/index.less';
+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) {
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    _fileList = _useState2[0],
+    setFileList = _useState2[1];
+  var value = props.value,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 10 : _props$size,
+    action = props.action,
+    _props$maxCount = props.maxCount,
+    maxCount = _props$maxCount === void 0 ? 1 : _props$maxCount,
+    headerRender = props.headerRender,
+    footerRender = props.footerRender,
+    disabled = props.disabled,
+    _props$uploadType = props.uploadType,
+    uploadType = _props$uploadType === void 0 ? 'drag' : _props$uploadType,
+    buttonProps = props.buttonProps,
+    accept = props.accept,
+    extraTipText = props.extraTipText,
+    beforeUpload = props.beforeUpload,
+    onChange = props.onChange,
+    onDownload = props.onDownload,
+    onPreview = props.onPreview,
+    onRemove = props.onRemove,
+    _props$method = props.method,
+    method = _props$method === void 0 ? 'post' : _props$method,
+    className = props.className,
+    dataParams = props.dataParams,
+    _props$showExampleCon = props.showExampleContent,
+    showExampleContent = _props$showExampleCon === void 0 ? false : _props$showExampleCon,
+    otherProps = props.otherProps,
+    transformResponse = props.transformResponse,
+    residueProps = _objectWithoutProperties(props, _excluded);
+  var isView = otherProps === null || otherProps === void 0 ? void 0 : otherProps.isView;
+  var refReSelect = useRef();
+  var uploadResTransform = function uploadResTransform(fileList) {
+    return fileList.map(function (file) {
+      if (file.response && transformResponse) {
+        var data = transformResponse(file.response) || {};
+        return _objectSpread(_objectSpread({}, file), data);
+      }
+      return file;
+    });
+  };
+  /**
+   * @description: 文件列表变化
+   * @return {*}
+   */
+  var handleFileChange = function handleFileChange(_ref) {
+    var file = _ref.file,
+      fileList = _ref.fileList;
+    if (!file.status && action) {
+      var nFileList = fileList.filter(function (f) {
+        return f.uid !== file.uid;
+      });
+      nFileList = uploadResTransform(nFileList);
+      setFileList(nFileList);
+      onChange && onChange(nFileList);
+      return;
+    }
+    var _fileList = uploadResTransform(fileList);
+    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
+   * @param {UploadFile} fileList
+   * @return {*}
+   */
+  var handleBeforeUpload = function handleBeforeUpload(file, fileList) {
+    // TODO
+    var ext = getFileExt(file.name);
+    if (!extExt.includes(ext.toLocaleUpperCase()) && extExt.length > 0) {
+      _message.error('文件格式不支持');
+      return false;
+    }
+    if (!validateSize(size, file)) {
+      _message.error('您上传的文件过大');
+      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) {
+      return _file.uid !== file.uid;
+    });
+    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 _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
+    });
+  };
+  // 通用props
+  var baseUploadProps = _objectSpread({
+    action: action,
+    beforeUpload: handleBeforeUpload,
+    onRemove: handleRemove,
+    onChange: handleFileChange,
+    maxCount: maxCount,
+    showUploadList: true,
+    fileList: _fileList,
+    disabled: disabled || isView,
+    method: method,
+    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,
+    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
+      });
+    })));
+  };
+  /* 按钮类型 */
+  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 || []);
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pro-upload ".concat(className !== null && className !== void 0 ? className : '')
+  }, upload());
+};
+export default ProUpload;

package/es/ProUpload/propsType.d.ts

@@ -0,0 +1,132 @@
+import React from 'react';
+import { UploadFile } from 'antd/es/upload/interface';
+export type UploadType = 'drag' | 'button' | 'image' | 'license' | 'sfz';
+export interface UploadFileRes {
+    url: string;
+    [key: string]: any;
+}
+export interface ProUploadProps {
+    /**
+     * @description       拖拽框顶部的内容
+     * @default           -
+     */
+    headerRender?: () => React.ReactNode;
+    /**
+     * @description       拖拽框底部内容
+     * @default           -
+     */
+    footerRender?: () => React.ReactNode;
+    /**
+     * @description       是否显示示例弹窗
+     * @default           false
+     */
+    showExampleContent?: boolean;
+    /**
+     * @description       示例弹窗的内容
+     * @default           -
+     */
+    exampleContent?: React.ReactNode;
+    /**
+     * @description       接受上传的文件类型, '.png,.jpeg,.jpg,.xlsx,.xls,.json,.doc,.docx' 详见 input accept Attribute
+     * @default           -
+     */
+    accept?: string;
+    /**
+     * @description       控制文件的上传大小，单位MB
+     * @default           10
+     */
+    size?: number;
+    /**
+     * @description       上传请求的地址
+     * @default           -
+     */
+    action?: string;
+    /**
+     * @description       组件的ui类型 drag 拖拽 button 上传按钮 image 类型
+     * @default           drag
+     */
+    uploadType: UploadType;
+    /**
+     * @description       上传格式提示文案
+     * @default           -
+     */
+    extraTipText?: string | (() => React.ReactNode);
+    /**
+     * @description       组件类型为button时可用, 参考 [antd button的api](https://ant-design.gitee.io/components/button-cn#api)
+     * @default           -
+     */
+    buttonProps?: Object;
+    /**
+     * @description       上传所需额外参数或返回上传额外参数的方法
+     * @default           -
+     */
+    dataParams?: Object;
+    /**
+     * @description       用来设置控件的默认已经上传的文件列表
+     * @default           -
+     */
+    defaultValue?: UploadFile[];
+    /**
+     * @description       用来设置控件的已经上传的文件列表
+     * @default           -
+     */
+    value?: UploadFile[];
+    /**
+     * @description       是否禁用
+     * @default           false
+     */
+    disabled?: boolean;
+    /**
+     * @description       设置上传的请求头部，IE10 以上有效
+     * @default           -
+     */
+    headers?: {
+        [key: string]: any;
+    };
+    /**
+     * @description      限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件
+     * @default           1
+     */
+    maxCount?: number;
+    /**
+     * @description  上传请求的 http method
+     * @default    "post"
+     */
+    method?: 'post' | 'POST' | 'PUT' | 'PATCH' | 'put' | 'patch';
+    /**
+     * @description  发到后台的文件参数名
+     * @default      -
+     */
+    name: string;
+    /**
+     * @description 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）；也可以返回 Upload.LIST_IGNORE，此时列表中将不展示此文件。 注意：IE9 不支持该方法
+     * @default    -
+     */
+    beforeUpload?: (file: any, fileList: any) => boolean | Promise<File>;
+    /**
+     * @description 上传文件改变时的回调，详见 onChange
+     * @default    -
+     */
+    onChange?: (value: Array<UploadFile>) => void;
+    /**
+     * @description 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页
+     * @default    -
+     */
+    onDownload?: (arg0: File) => void;
+    /**
+     * @description 点击文件链接或预览图标时的回调
+     * @default    -
+     */
+    onPreview?: (arg0: File) => any;
+    /**
+     * @description 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除
+     * @default    -
+     */
+    onRemove?: (arg0: File) => boolean | Promise<any>;
+    /**
+     * @description 样式类名
+     * @default    -
+     */
+    className?: string;
+    transformResponse?: (res: any) => UploadFileRes;
+}

package/es/ProUpload/propsType.js

@@ -0,0 +1 @@
+export {};

package/es/ProUpload/style/delete.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678851089478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9199" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18"><path d="M662.08 121.472v64h-300.16v-64zM868.48 280.96v64H155.52v-64z" p-id="9200" fill="currentColor"></path><path d="M280.512 303.232l-0.064 530.816h460.096V303.232h64v594.88H216.512V303.232z" p-id="9201" fill="currentColor"></path><path d="M431.424 440.704v337.728h-64V440.704zM656.576 440.704v337.728h-64V440.704z" p-id="9202" fill="currentColor"></path></svg>

package/es/ProUpload/style/download.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678851079035" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9058" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" fill="currentColor" ><path d="M756.736 454.848l46.08 44.416L512 801.024 221.184 499.2l46.08-44.416L512 708.736z" p-id="9059"></path><path d="M544 155.456v575.872h-64V155.456zM868.544 813.568v64H155.52v-64z" p-id="9060"></path></svg>