@zat-design/sisyphus-react 3.0.13

package/es/ProTransferModal/style/index.less

@@ -0,0 +1,161 @@
+.pro-transfer-modal.ant-modal {
+
+  .ant-modal-header {
+    padding: var(--zaui-space-size-md, 16px);
+  }
+  
+  .ant-modal-footer {
+    padding: var(--zaui-space-size-md, 16px);
+  }
+
+  .ant-modal-body {
+    display: flex;
+    height: 360px;
+    padding: 0 var(--zaui-space-size-md, 16px);
+
+    .pro-transfer-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--zaui-space-size-sm, 8px) 10px;
+      background: #F6F7F8;
+      border-radius: var(--zaui-border-radius, 4px) var(--zaui-border-radius, 4px) 0 0;
+      color: #616161;
+
+      .ant-btn-link {
+        padding: 0;
+      }
+    }
+    
+    .pro-transfer-left {
+      flex: 1;
+      flex-shrink: 0;
+      height: 100%;
+      border: 1px solid #DCDCDC;
+      border-radius: var(--zaui-border-radius, 4px);
+
+      .ant-input-affix-wrapper {
+        height: 40px;
+        padding: 6px var(--zaui-space-size-sm, 8px);
+        background: unset;
+        border: none;
+        border-bottom: 1px solid #DCDCDC;
+        border-radius: 0;
+
+        .anticon-search {
+          color: #DCDCDC;
+        }
+
+        &:hover {
+          border-bottom: 1px solid #DCDCDC;
+        }
+      }
+      .ant-input {
+        background: unset;
+      }
+      .ant-input-affix-wrapper:focus,
+      .ant-input-affix-wrapper-focused {
+        box-shadow: none;
+      }
+
+      .check-container {
+        overflow-y: auto;
+        height: calc(100% - 60px);
+        padding: var(--zaui-space-size-md, 16px);
+
+        &.has-pagination {
+          height: calc(100% - 120px);
+        }
+        
+        .ant-checkbox-wrapper {
+          display: flex;
+          padding-bottom: var(--zaui-space-size-md, 16px);
+
+          & + .ant-checkbox-wrapper {
+            margin: 0;
+          }
+        }
+
+        .noData {
+          height: calc(100% - 60px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          color: #616161;
+
+          .emptyImg {
+            margin-bottom: var(--zaui-space-size-md, 16px);
+            width: 80px;
+          }
+        }
+      }
+
+      .ant-pagination {
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    .pro-transfer-right {
+      margin-left: var(--zaui-space-size-md, 16px);
+      width: 186px;
+      flex-shrink: 0;
+      border: 1px solid #DCDCDC;
+      border-radius: var(--zaui-border-radius, 4px);
+
+      .checked-container {
+        width: 100%;
+        height: calc(100% - 48px);
+        overflow-y: auto;
+
+        .checked-item {
+          margin: var(--zaui-space-size-sm, 8px);
+        
+          .ant-tag {
+            padding: 2px var(--zaui-space-size-sm, 8px);
+            display        : flex;
+            align-items    : center;
+            width          : 100%;
+            height         : 32px;
+            background     : #F2F2F2;
+            border-radius  : var(--zaui-border-radius, 4px);
+            border         : none;
+            color          : #343434;
+            font-size      : var(--zaui-font-size, 14px);
+        
+            .drag-icon {
+              margin-right: var(--zaui-border-radius, 4px);
+              height: 20px;
+              cursor: move;
+            }
+        
+            .disabled-icon {
+              margin-right: var(--zaui-border-radius, 4px);
+              height: 20px;
+            }
+        
+            .anticon-close {
+              margin: 0;
+              color    : #999;
+              font-size: var(--zaui-font-size-sm, 12px);
+            }
+          }
+        
+          &.disabled {
+            cursor: not-allowed;
+        
+            .pro-tooltip,
+            .anticon {
+              cursor: not-allowed;
+            }
+        
+            .anticon {
+              pointer-events: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/es/ProUpload/Example.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ExampleProps {
+    content?: React.ReactNode;
+    className?: string;
+}
+export declare const Example: React.FC<ExampleProps>;
+export {};

package/es/ProUpload/Example.js

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/*
+ * @Author: wangshengqiang
+ * @Date: 2023-02-16 16:32:18
+ * @LastEditTime: 2023-03-30 10:12:34
+ * @LastEditors: wangshengqiang
+ * @Description:
+ */
+import React, { useState } from 'react';
+import { ProDrawerForm } from 'zat-design-pro-component';
+export var Example = function Example(props) {
+  var content = props.content,
+    className = props.className;
+  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 /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: handleShowModal
+  }, " \u67E5\u770B\u793A\u4F8B"), /*#__PURE__*/React.createElement(ProDrawerForm, {
+    title: "\u57FA\u7840\u62BD\u5C49",
+    width: "800",
+    open: visible,
+    showType: "Modal",
+    onCancel: handleCancel,
+    disabled: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "exam-con"
+  }, content || /*#__PURE__*/React.createElement("img", {
+    src: "https://img2.baidu.com/it/u=861863691,2776527252&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
+  }))));
+};

package/es/ProUpload/FileItem.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { UploadFile } from 'antd';
+import './style/fileItem.less';
+/**
+ * @description: b 转成 Kb
+ * @param {*} num
+ * @return {*}
+ */
+export declare const bToKb: (num: any) => string;
+/**
+ * @description: 获取文件后缀名
+ * @param {*} fileName
+ * @return {*}
+ */
+export declare const getFileExt: (fileName: string) => string;
+/**
+ * @description: 根据文件扩展名获取图标地址
+ * @param {string} fileExt
+ * @return {*}
+ */
+export declare const getFileIcon: (fileExt: string) => any;
+interface FileItemProps {
+    file: UploadFile;
+    hideFileIcon?: boolean;
+    showRemoveIcon?: boolean;
+    onRemove?: Function;
+    onDownload?: Function;
+    onPreview?: Function;
+    disabled?: boolean;
+}
+declare const FileItem: React.FC<FileItemProps>;
+declare const DragSingleFileItem: React.FC<FileItemProps>;
+export { DragSingleFileItem, FileItem };

package/es/ProUpload/FileItem.js

@@ -0,0 +1,207 @@
+import "antd/es/progress/style";
+import _Progress from "antd/es/progress";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+/*
+ * @Author: wangshengqiang
+ * @Date: 2023-02-11 19:03:05
+ * @LastEditTime: 2023-04-25 11:30:33
+ * @LastEditors: wangshengqiang
+ * @Description: 上传文件列表项
+ */
+import React from 'react';
+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 './style/look.svg';
+import deleteSvg from './style/delete.svg';
+import downloadSvg from './style/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) {
+  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'].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 = file.status === 'done';
+  var _showRemoveIcon = showRemoveIcon;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "filelist-item-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "file-info-box ".concat(file.status === 'error' ? 'file-box-error' : '')
+  }, !hideFileIcon && /*#__PURE__*/React.createElement("div", {
+    className: "file-type-icon"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: _fileIcon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "file-name ".concat(hideFileIcon ? 'file-name-pf0' : '')
+  }, file.name.replace(_fileExt, '')), /*#__PURE__*/React.createElement("div", {
+    className: "file-ext"
+  }, _fileExt), /*#__PURE__*/React.createElement("div", {
+    className: "file-size"
+  }, "(".concat(_fileSize || 0, "kb)")), /*#__PURE__*/React.createElement("div", {
+    className: "file-actions-wrap"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "file-actions"
+  }, _isShowDownloadIcon && /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    className: "file-action-item",
+    disabled: disabled,
+    onClick: _onDownload
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    className: "action-icon",
+    wrapper: "span",
+    src: downloadSvg
+  })), _showPreViewIcon && /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    className: "file-action-item",
+    disabled: disabled,
+    onClick: _onPreview
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    className: "action-icon",
+    wrapper: "span",
+    color: "#006aff",
+    src: lookSvg
+  })), _showRemoveIcon && /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    className: "file-action-item",
+    disabled: disabled,
+    onClick: _onRemove
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    className: "action-icon",
+    wrapper: "span",
+    src: deleteSvg
+  }))))), file.status === 'uploading' && /*#__PURE__*/React.createElement("div", {
+    className: "file-progress"
+  }, /*#__PURE__*/React.createElement(_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 _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 = file.status === 'done';
+  var _showRemoveIcon = showRemoveIcon;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "drag-Single-item-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "file-info-box ".concat(file.status === 'error' ? 'file-box-error' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "file-name"
+  }, file.name.replace(_fileExt, '')), /*#__PURE__*/React.createElement("div", {
+    className: "file-ext"
+  }, _fileExt), /*#__PURE__*/React.createElement("div", {
+    className: "file-size"
+  }, "(".concat(_fileSize || 0, "kb)")), (_isShowDownloadIcon || _showPreViewIcon || _showRemoveIcon) && /*#__PURE__*/React.createElement("div", {
+    className: "file-actions-wrap"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "file-actions"
+  }, _isShowDownloadIcon && /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    className: "file-action-item",
+    disabled: disabled,
+    onClick: _onDownload
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    className: "action-icon",
+    wrapper: "span",
+    src: downloadSvg
+  })), _showPreViewIcon && /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    className: "file-action-item",
+    disabled: disabled,
+    onClick: _onPreview
+  }, /*#__PURE__*/React.createElement(ReactSVG, {
+    className: "action-icon",
+    wrapper: "span",
+    color: "#006aff",
+    src: lookSvg
+  }))))), file.status === 'uploading' && /*#__PURE__*/React.createElement("div", {
+    className: "file-progress"
+  }, /*#__PURE__*/React.createElement(_Progress, {
+    percent: Math.ceil(file.percent),
+    size: "small",
+    strokeWidth: 2
+  })));
+};
+export { DragSingleFileItem, FileItem };

package/es/ProUpload/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ProUploadProps } from './propsType';
+import './style/index.less';
+declare const ProUpload: React.FC<ProUploadProps>;
+export default ProUpload;