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

package/es/ProUpload/components/ButtonRender.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+import { UploadFile } from 'antd';
+import { ProUploadProps } from '../propsType';
+interface DragRenderProps extends Pick<ProUploadProps, 'buttonProps' | 'disabled' | 'maxCount' | 'extraTipText' | 'buttonText'> {
+    isView?: boolean;
+    headerRender: () => ReactNode;
+    footerRender: () => ReactNode;
+    sensor: any;
+    fileList: UploadFile[];
+    baseUploadProps: any;
+    onDragEnd: any;
+    onPreview: any;
+    onDownload: any;
+    afterRender: string | ReactNode;
+    extExt: any[];
+}
+declare const ButtonRender: FC<DragRenderProps>;
+export default ButtonRender;

package/es/ProUpload/components/ButtonRender.js

@@ -0,0 +1,71 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/upload/style";
+import _Upload from "antd/es/upload";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
+import { CloudUploadOutlined } from '@ant-design/icons';
+import { FileItem } from './FileItem';
+import { DraggableUploadListItem } from './DraggableUploadListItem';
+/* 按钮类型 */
+var ButtonRender = function ButtonRender(props) {
+  var isView = props.isView,
+    disabled = props.disabled,
+    sensor = props.sensor,
+    onDragEnd = props.onDragEnd,
+    fileList = props.fileList,
+    baseUploadProps = props.baseUploadProps,
+    onPreview = props.onPreview,
+    onDownload = props.onDownload,
+    buttonProps = props.buttonProps,
+    extraTipText = props.extraTipText,
+    afterRender = props.afterRender,
+    buttonText = props.buttonText;
+  // 按钮类型的props
+  var buttonUploadProps = _objectSpread(_objectSpread({}, baseUploadProps), {}, {
+    fileList: fileList,
+    itemRender: function itemRender(originNode, file, fileList, actions) {
+      return _jsx(DraggableUploadListItem, {
+        file: file,
+        children: _jsx(FileItem, {
+          disabled: disabled || isView,
+          file: file,
+          onPreview: onPreview,
+          onRemove: actions.remove,
+          onDownload: onDownload
+        })
+      });
+    }
+  });
+  return _jsxs("div", {
+    className: "pro-upload-button",
+    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({}, buttonUploadProps), {}, {
+          children: !isView && _jsxs("div", {
+            className: "pro-upload-button-inner",
+            children: [_jsxs(_Button, _objectSpread(_objectSpread({}, buttonProps), {}, {
+              disabled: disabled || isView,
+              children: [_jsx(CloudUploadOutlined, {}), buttonText || '上传文件']
+            })), afterRender ? _jsx("div", {
+              className: "pro-upload-button-inner-right",
+              children: afterRender
+            }) : null]
+          })
+        }))
+      })
+    }), extraTipText && _jsx("div", {
+      className: "upload-tip-txt",
+      children: extraTipText
+    })]
+  });
+};
+export default ButtonRender;

package/es/ProUpload/components/DragRender.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import { UploadFile } from 'antd/es/upload/interface';
+interface DragRenderProps {
+    isView?: boolean;
+    headerRender: () => ReactNode;
+    footerRender: () => ReactNode;
+    sensor: any;
+    fileList: UploadFile[];
+    baseUploadProps: any;
+    disabled: boolean;
+    onDragEnd: any;
+    onPreview: any;
+    onDownload: any;
+    extExt: any[];
+    setFileList: any;
+    onChange: any;
+    maxCount: number;
+}
+declare const DragRender: FC<DragRenderProps>;
+export default DragRender;

package/es/ProUpload/components/DragRender.js

@@ -0,0 +1,179 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/upload/style";
+import _Upload from "antd/es/upload";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
+import { CloudUploadOutlined } from '@ant-design/icons';
+import { DragSingleFileItem, FileItem, getFileExt, getFileIcon } from './FileItem';
+import { DraggableUploadListItem } from './DraggableUploadListItem';
+var Dragger = _Upload.Dragger;
+var DragRender = function DragRender(props) {
+  var isView = props.isView,
+    baseUploadProps = props.baseUploadProps,
+    disabled = props.disabled,
+    headerRender = props.headerRender,
+    footerRender = props.footerRender,
+    sensor = props.sensor,
+    onDragEnd = props.onDragEnd,
+    fileList = props.fileList,
+    onPreview = props.onPreview,
+    onDownload = props.onDownload,
+    extExt = props.extExt,
+    maxCount = props.maxCount,
+    setFileList = props.setFileList,
+    onChange = props.onChange;
+  var refReSelect = useRef();
+  if (isView) return _jsx(_Fragment, {
+    children: "-"
+  });
+  // 拖拽模式下单个文件可用
+  var showDraggerSingleRender = maxCount === 1 && fileList[0];
+  /**
+   * @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);
+  };
+  /**
+   * @description: 处理预览按钮
+   * @param {UploadFile} file
+   * @return {*}
+   */
+  var handlePreview = function handlePreview(file) {
+    if (onPreview) {
+      onPreview(file);
+    } else {
+      window.open(file.url || file.thumbUrl);
+    }
+  };
+  /**
+   * @description: 单个拖拽上传界面
+   * @param {UploadFile} file
+   * @return {*}
+   */
+  var draggerSingleRender = function draggerSingleRender(file) {
+    var _fileExt = getFileExt(file.name);
+    var _fileIcon = getFileIcon(_fileExt);
+    return _jsxs("div", {
+      className: "dragger-single-file",
+      children: [_jsx("div", {
+        className: "file-type-icon",
+        children: _jsx("img", {
+          src: _fileIcon
+        })
+      }), _jsx(DragSingleFileItem, {
+        file: file,
+        disabled: disabled,
+        onDownload: onDownload,
+        onPreview: onPreview
+      }), file.status !== 'uploading' && _jsxs("div", {
+        className: "file-action-box",
+        children: [_jsx("div", {
+          className: "file-name",
+          onClick: function onClick() {
+            handleReSelect(file);
+          },
+          children: "\u91CD\u65B0\u9009\u62E9"
+        }), _jsx("div", {
+          className: "file-del",
+          onClick: function onClick() {
+            handleDelFile(file);
+          },
+          children: "\u5220\u9664"
+        })]
+      })]
+    });
+  };
+  var dragUploadProps = _objectSpread(_objectSpread({}, baseUploadProps), {}, {
+    fileList: fileList,
+    showUploadList: false,
+    disabled: disabled,
+    openFileDialogOnClick: !showDraggerSingleRender
+  });
+  return _jsxs("div", {
+    className: "pro-upload-dragger",
+    children: [_jsxs("div", {
+      className: "pro-upload-handle-box",
+      children: [_jsx("div", {
+        className: "pro-upload-dragger-header",
+        children: headerRender()
+      }), _jsx(Dragger, _objectSpread(_objectSpread({}, dragUploadProps), {}, {
+        children: _jsxs("div", {
+          className: "drag-upload-inner",
+          ref: refReSelect,
+          children: [!showDraggerSingleRender && _jsxs("div", {
+            className: "upload-dragger-control",
+            children: [_jsxs("div", {
+              className: "dragger-txt-line1",
+              children: [_jsx("i", {
+                className: "icon-upload",
+                children: _jsx(CloudUploadOutlined, {})
+              }), _jsxs("p", {
+                className: "dragger-txt",
+                children: ["\u5C06\u6587\u4EF6\u62D6\u62FD\u5230\u6B64\u5904\uFF0C\u6216", _jsx("span", {
+                  className: "click-txt",
+                  children: "\u70B9\u51FB\u4E0A\u4F20 "
+                })]
+              })]
+            }), _jsxs("p", {
+              className: "file-ext",
+              children: ["\u652F\u6301\u6269\u5C55\u540D\uFF1A", extExt.length > 0 ? extExt.join('、') : '无限制']
+            })]
+          }), _jsx("div", {
+            className: "dragger-file-show",
+            children: showDraggerSingleRender && draggerSingleRender(fileList[0])
+          })]
+        })
+      })), _jsx("div", {
+        className: "pro-upload-dragger-footer",
+        children: footerRender()
+      })]
+    }), _jsx("div", {
+      className: "pro-upload-file-list",
+      children: _jsx(DndContext, {
+        sensors: [sensor],
+        onDragEnd: onDragEnd,
+        children: _jsx(SortableContext, {
+          items: fileList.map(function (i) {
+            return i.uid;
+          }),
+          strategy: rectSortingStrategy,
+          children: maxCount > 1 && fileList.map(function (file) {
+            return _jsx(DraggableUploadListItem, {
+              file: file,
+              children: _jsx(FileItem, {
+                file: file,
+                disabled: disabled || isView,
+                onPreview: onPreview,
+                onRemove: handleDelFile,
+                onDownload: onDownload
+              }, file.uid)
+            });
+          })
+        })
+      })
+    })]
+  });
+};
+export default DragRender;

package/es/ProUpload/components/DraggableUploadListItem.d.ts

@@ -0,0 +1,2 @@
+import { DraggableUploadListItemProps } from '../propsType';
+export declare const DraggableUploadListItem: ({ file, children }: DraggableUploadListItemProps) => JSX.Element;

package/es/ProUpload/components/DraggableUploadListItem.js

@@ -0,0 +1,29 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CSS } from '@dnd-kit/utilities';
+import { useSortable } from '@dnd-kit/sortable';
+export var DraggableUploadListItem = function DraggableUploadListItem(_ref) {
+  var file = _ref.file,
+    children = _ref.children;
+  var _useSortable = useSortable({
+      id: file.uid
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var style = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition,
+    cursor: 'move',
+    zIndex: 10,
+    position: 'relative'
+  };
+  return _jsx("div", _objectSpread(_objectSpread(_objectSpread({
+    ref: setNodeRef,
+    style: style
+  }, attributes), listeners), {}, {
+    children: children
+  }));
+};

package/es/ProUpload/components/Example.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ExampleModalProps } from '../propsType';
+interface ExampleProps {
+    exampleContent?: React.ReactNode;
+    className?: string;
+    exampleTitle?: string | React.ReactNode;
+    exampleModalProps?: ExampleModalProps;
+}
+export declare const Example: React.FC<ExampleProps>;
+export {};

package/es/ProUpload/components/Example.js

@@ -0,0 +1,40 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import ProDrawerForm from '../../ProDrawerForm';
+export var Example = function Example(props) {
+  var exampleContent = props.exampleContent,
+    className = props.className,
+    exampleTitle = props.exampleTitle,
+    exampleModalProps = props.exampleModalProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleShowModal = function handleShowModal() {
+    setVisible(true);
+  };
+  var handleCancel = function handleCancel() {
+    setVisible(false);
+  };
+  return _jsxs("div", {
+    className: className,
+    children: [_jsx("div", {
+      onClick: handleShowModal,
+      children: "\u67E5\u770B\u793A\u4F8B"
+    }), _jsx(ProDrawerForm, {
+      title: exampleTitle,
+      width: "600",
+      open: visible,
+      showType: "Modal",
+      onCancel: handleCancel,
+      modalProps: _objectSpread({}, exampleModalProps),
+      disabled: true,
+      children: _jsx("div", {
+        className: "pro-upload-example",
+        children: exampleContent
+      })
+    })]
+  });
+};

package/{lib/ProUpload → es/ProUpload/components}/FileItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { UploadFile } from 'antd';
-import './style/fileItem.less';
+import { UploadFile } from 'antd/es/upload/interface';
+import '../style/fileItem.less';
 /**
  * @description: b 转成 Kb
  * @param {*} num

package/es/ProUpload/components/FileItem.js

@@ -0,0 +1,212 @@
+import "antd/es/progress/style";
+import _Progress from "antd/es/progress";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ReactSVG } from 'react-svg';
+import PDF from '../style/icon-PDF.png';
+import TXT from '../style/icon-TXT.png';
+import EXCEL from '../style/icon-excel.png';
+import PIC from '../style/icon-pic.png';
+import WORD from '../style/icon-word.png';
+import lookSvg from '../../assets/look.svg';
+import deleteSvg from '../../assets/delete.svg';
+import downloadSvg from '../../assets/download.svg';
+import '../style/fileItem.less';
+/**
+ * @description: b 转成 Kb
+ * @param {*} num
+ * @return {*}
+ */
+export var bToKb = function bToKb(num) {
+  return num ? (num / 1024).toFixed(2) : '';
+};
+/**
+ * @description: 获取文件后缀名
+ * @param {*} fileName
+ * @return {*}
+ */
+export var getFileExt = function getFileExt(fileName) {
+  if (!fileName) return '';
+  return fileName.substring(fileName.lastIndexOf('.'));
+};
+/**
+ * @description: 根据文件扩展名获取图标地址
+ * @param {string} fileExt
+ * @return {*}
+ */
+export var getFileIcon = function getFileIcon(fileExt) {
+  if (['.PDF'].includes(fileExt.toLocaleUpperCase())) return PDF;
+  if (['.TXT', '.JSON'].includes(fileExt.toLocaleUpperCase())) return TXT;
+  if (['.PNG', '.JPG', '.JPEG', '.GIF', '.BMP', '.JPE'].includes(fileExt.toLocaleUpperCase())) return PIC;
+  if (['.DOC', '.DOCX'].includes(fileExt.toLocaleUpperCase())) return WORD;
+  if (['.XLS', '.XLSX'].includes(fileExt.toLocaleUpperCase())) return EXCEL;
+  return TXT;
+};
+var FileItem = function FileItem(props) {
+  var file = props.file,
+    disabled = props.disabled,
+    _props$hideFileIcon = props.hideFileIcon,
+    hideFileIcon = _props$hideFileIcon === void 0 ? false : _props$hideFileIcon,
+    onRemove = props.onRemove,
+    onDownload = props.onDownload,
+    onPreview = props.onPreview,
+    _props$showRemoveIcon = props.showRemoveIcon,
+    showRemoveIcon = _props$showRemoveIcon === void 0 ? true : _props$showRemoveIcon;
+  var _onPreview = function _onPreview() {
+    if (onPreview) {
+      return onPreview(file);
+    }
+  };
+  var _onDownload = function _onDownload() {
+    if (onDownload) {
+      return onDownload(file);
+    }
+  };
+  var _onRemove = function _onRemove() {
+    if (onRemove) {
+      return onRemove(file);
+    }
+  };
+  var _fileExt = getFileExt(file.name);
+  var _fileSize = bToKb(file.size);
+  var _fileIcon = getFileIcon(_fileExt);
+  var _isShowDownloadIcon = file.status === 'done' && onDownload;
+  var _showPreViewIcon = onPreview;
+  var _showRemoveIcon = showRemoveIcon;
+  return _jsxs("div", {
+    className: "filelist-item-wrapper",
+    children: [_jsxs("div", {
+      className: "file-info-box ".concat(file.status === 'error' ? 'file-box-error' : ''),
+      children: [!hideFileIcon && _jsx("div", {
+        className: "file-type-icon",
+        children: _jsx("img", {
+          src: _fileIcon
+        })
+      }), _jsx("div", {
+        className: "file-name ".concat(hideFileIcon ? 'file-name-pf0' : ''),
+        children: file.name.replace(_fileExt, '')
+      }), _jsx("div", {
+        className: "file-ext",
+        children: _fileExt
+      }), _fileSize && _jsx("div", {
+        className: "file-size",
+        children: "(".concat(_fileSize || 0, "kb)")
+      }), _jsx("div", {
+        className: "file-actions-wrap",
+        children: _jsxs("div", {
+          className: "file-actions",
+          children: [_isShowDownloadIcon && _jsx(_Button, {
+            type: "link",
+            className: "file-action-item",
+            onClick: _onDownload,
+            children: _jsx(ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              src: downloadSvg
+            })
+          }), _showPreViewIcon && _jsx(_Button, {
+            type: "link",
+            className: "file-action-item",
+            onClick: _onPreview,
+            children: _jsx(ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              color: "#006aff",
+              src: lookSvg
+            })
+          }), _showRemoveIcon && !disabled && _jsx(_Button, {
+            type: "link",
+            className: "file-action-item",
+            disabled: disabled,
+            onClick: _onRemove,
+            children: _jsx(ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              src: deleteSvg
+            })
+          })]
+        })
+      })]
+    }), file.status === 'uploading' && _jsx("div", {
+      className: "file-progress",
+      children: _jsx(_Progress, {
+        percent: Math.ceil(file.percent),
+        size: "small",
+        strokeWidth: 2
+      })
+    })]
+  });
+};
+var DragSingleFileItem = function DragSingleFileItem(props) {
+  var file = props.file,
+    disabled = props.disabled,
+    onRemove = props.onRemove,
+    onDownload = props.onDownload,
+    onPreview = props.onPreview,
+    _props$showRemoveIcon2 = props.showRemoveIcon,
+    showRemoveIcon = _props$showRemoveIcon2 === void 0 ? true : _props$showRemoveIcon2;
+  var _onPreview = function _onPreview() {
+    if (onPreview) {
+      return onPreview(file);
+    }
+  };
+  var _onDownload = function _onDownload() {
+    if (onDownload) {
+      return onDownload(file);
+    }
+  };
+  var _fileExt = getFileExt(file.name);
+  var _fileSize = bToKb(file.size);
+  var _isShowDownloadIcon = file.status === 'done' && onDownload;
+  var _showPreViewIcon = file.status === 'done' && onPreview;
+  var _showRemoveIcon = showRemoveIcon;
+  return _jsxs("div", {
+    className: "drag-Single-item-wrapper",
+    children: [_jsxs("div", {
+      className: "file-info-box ".concat(file.status === 'error' ? 'file-box-error' : ''),
+      children: [_jsx("div", {
+        className: "file-name",
+        children: file.name.replace(_fileExt, '')
+      }), _jsx("div", {
+        className: "file-ext",
+        children: _fileExt
+      }), _fileSize && _jsx("div", {
+        className: "file-size",
+        children: "(".concat(_fileSize || 0, "kb)")
+      }), (_isShowDownloadIcon || _showPreViewIcon || _showRemoveIcon) && _jsx("div", {
+        className: "file-actions-wrap",
+        children: _jsxs("div", {
+          className: "file-actions",
+          children: [_showPreViewIcon && _jsx(_Button, {
+            type: "link",
+            className: "file-action-item",
+            onClick: _onPreview,
+            children: _jsx(ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              src: lookSvg
+            })
+          }), _isShowDownloadIcon && _jsx(_Button, {
+            type: "link",
+            className: "file-action-item",
+            onClick: _onDownload,
+            children: _jsx(ReactSVG, {
+              className: "action-icon",
+              wrapper: "span",
+              src: downloadSvg
+            })
+          })]
+        })
+      })]
+    }), file.status === 'uploading' && _jsx("div", {
+      className: "file-progress",
+      children: _jsx(_Progress, {
+        percent: Math.ceil(file.percent),
+        size: "small",
+        strokeWidth: 2
+      })
+    })]
+  });
+};
+export { DragSingleFileItem, FileItem };

package/es/ProUpload/components/ImageRender.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+import { UploadFile } from 'antd/es/upload/interface';
+import { ProUploadProps } from '../propsType';
+interface DragRenderProps extends Pick<ProUploadProps, 'buttonProps' | 'disabled' | 'maxCount' | 'extraTipText' | 'showExampleContent' | 'exampleTitle' | 'exampleContent' | 'exampleModalProps'> {
+    isView?: boolean;
+    headerRender: () => ReactNode;
+    footerRender: () => ReactNode;
+    sensor: any;
+    fileList: UploadFile[];
+    baseUploadProps: any;
+    onDragEnd: any;
+    onPreview: any;
+    onDownload: any;
+    extExt: any[];
+    onRemove: (file: UploadFile) => void | Promise<boolean>;
+}
+declare const ImageRender: FC<DragRenderProps>;
+export default ImageRender;