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

package/lib/ProTreeSelect/style/index.less

@@ -1,109 +1,113 @@
-
-.ant-select-selector{
-    // 单选树选择结果框里title不用待后缀
-    .check-mark-icon{
-        display: none;
+.pro-tree-select{
+    .ant-select-selector{
+        // 单选树选择结果框里title不用待后缀
+        .check-mark-icon{
+            display: none;
+        }
     }
-}
-.ant-select.ant-select-single.ant-select-show-arrow{
-    &.ant-select-open{
-        .ant-select-arrow{
-            transition: transform 300ms ease-in-out;
-            transform: rotate(180deg);
+    .ant-select.ant-select-single.ant-select-show-arrow:not(.ant-select-show-search){
+        &.ant-select-open{
+            .ant-select-arrow{
+                transition: transform 300ms ease-in-out;
+                transform: rotate(180deg);
+            }
         }
     }
 }
-.ant-select-dropdown{
-    .highlight-search-text{
-        color: @zaui-brand;
-    }
-    .ant-select-tree-list-holder-inner{
-        position: relative!important;
-    }
-    &.ant-tree-select-dropdown{
-        width: auto!important;
-        padding: 0px;
-    }
-    &.singal-tree,&.checkable-tree{
-        .ant-select-tree{
-            .ant-select-tree-treenode{
-                padding-top: 5px;
-                padding-bottom: 5px;
-            }
+.pro-tree-select-drop-down-container{
+    &.ant-select-dropdown{
+        .highlight-search-text{
+            color: @zaui-brand;
         }
-        .highlight{
-            color: red;
+        .ant-select-tree-list-holder-inner{
+            position: relative!important;
         }
-    }
-    // 单选
-    &.signal-tree{
-        .ant-select-tree{
-            .ant-select-tree-treenode{
-                position: relative;
-                padding-right: 50px;
-                padding-left: 7px;
-                z-index: 1;
-                &:after{
-                    content: '';
-                    display: none;
-                    position: absolute;
+        &.ant-tree-select-dropdown{
+            width: auto!important;
+            padding: 0px;
+        }
+        &.singal-tree,&.checkable-tree{
+            .ant-select-tree{
+                .ant-select-tree-treenode{
+                    padding-top: var(--zaui-space-size-xs);
+                    padding-bottom: var(--zaui-space-size-xs);
+                }
+            }
+            .highlight{
+                color: red;
+            }
+        }
+        // 单选
+        &.signal-tree{
+            .ant-select-tree{
+                .ant-select-tree-treenode{
+                    position: relative;
+                    padding-right: 50px;
+                    padding-left: 7px;
                     z-index: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    background-color: @zaui-brand;
-                    opacity: 0.1;
+                    &:after{
+                        content: '';
+                        display: none;
+                        position: absolute;
+                        z-index: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        background-color: @zaui-brand;
+                        opacity: 0.1;
+                    }
+                    &.ant-select-tree-treenode-selected:after{
+                        display: block;
+                    }
+                }
+                .ant-select-tree-node-content-wrapper{
+                    background-color: transparent;
+                    &.ant-select-tree-node-selected{
+                        .check-mark-icon{
+                            display: block;
+                        }
+                    }
                 }
-                &.ant-select-tree-treenode-selected:after{
-                    display: block;
+                .ant-select-tree-treenode:hover{
+                    background-color: #f5f5f5;
                 }
-            }
-            .ant-select-tree-node-content-wrapper{
-                background-color: transparent;
-                &.ant-select-tree-node-selected{
+                .check-option-text{
                     .check-mark-icon{
-                        display: block;
+                        position: absolute;
+                        right: -34px;
+                        top: 2px;
+                        display: none;
+                        color: var(--zaui-list-item-selected-bg);
                     }
                 }
             }
-            .ant-select-tree-treenode:hover{
-                background-color: @zaui-disabled-bg;
-            }
-            .check-option-text{
-                .check-mark-icon{
-                    position: absolute;
-                    right: -34px;
-                    top: 2px;
-                    display: none;
-                    color: @zaui-list-item-selected-bg;
+        }
+        // 复选
+        &.checkable-tree{
+            .ant-select-tree{
+                .ant-select-tree-treenode{
+                    padding-left: 7px;
+                }
+                .ant-select-tree-treenode:hover{
+                    background-color: #f5f5f5;
+                }
+                .ant-select-tree-node-content-wrapper{
+                    padding-right: var(--zaui-space-size-md);
+                }
+                .ant-select-tree-node-content-wrapper:hover{
+                    background-color: transparent;
+                }
+                .ant-select-tree-checkbox{
+                    margin-top: var(--zaui-space-size-xs);
+                    align-self: stretch;
                 }
             }
         }
-    }
-    // 复选
-    &.checkable-tree{
-        .ant-select-tree{
-            .ant-select-tree-treenode{
-                padding-left: 7px;
-            }
-            .ant-select-tree-treenode:hover{
-                background-color: @zaui-disabled-bg;
-            }
-            .ant-select-tree-node-content-wrapper{
-                padding-right: 16px;
-            }
-            .ant-select-tree-node-content-wrapper:hover{
-                background-color: transparent;
+        // 数据小于10条
+        &.ten-count-tree-node{
+            .ant-select-tree-switcher-noop{
+                width: var(--zaui-space-size-xs);
             }
-            .ant-select-tree-checkbox{
-                margin-top: 0px;
-            }
-        }
-    }
-    // 数据小于10条
-    &.ten-count-tree-node{
-        .ant-select-tree-switcher-noop{
-            width: 4px;
         }
     }
-}
+}

package/lib/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/lib/ProUpload/components/ButtonRender.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _antd = require("antd");
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _icons = require("@ant-design/icons");
+var _FileItem = require("./FileItem");
+var _DraggableUploadListItem = require("./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 = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseUploadProps), {}, {
+    fileList: fileList,
+    itemRender: function itemRender(originNode, file, fileList, actions) {
+      return (0, _jsxRuntime.jsx)(_DraggableUploadListItem.DraggableUploadListItem, {
+        file: file,
+        children: (0, _jsxRuntime.jsx)(_FileItem.FileItem, {
+          disabled: disabled || isView,
+          file: file,
+          onPreview: onPreview,
+          onRemove: actions.remove,
+          onDownload: onDownload
+        })
+      });
+    }
+  });
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "pro-upload-button",
+    children: [(0, _jsxRuntime.jsx)(_core.DndContext, {
+      sensors: [sensor],
+      onDragEnd: onDragEnd,
+      children: (0, _jsxRuntime.jsx)(_sortable.SortableContext, {
+        items: fileList.map(function (i) {
+          return i.uid;
+        }),
+        strategy: _sortable.rectSortingStrategy,
+        children: (0, _jsxRuntime.jsx)(_antd.Upload, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, buttonUploadProps), {}, {
+          children: !isView && (0, _jsxRuntime.jsxs)("div", {
+            className: "pro-upload-button-inner",
+            children: [(0, _jsxRuntime.jsxs)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, buttonProps), {}, {
+              disabled: disabled || isView,
+              children: [(0, _jsxRuntime.jsx)(_icons.CloudUploadOutlined, {}), buttonText || '上传文件']
+            })), afterRender ? (0, _jsxRuntime.jsx)("div", {
+              className: "pro-upload-button-inner-right",
+              children: afterRender
+            }) : null]
+          })
+        }))
+      })
+    }), extraTipText && (0, _jsxRuntime.jsx)("div", {
+      className: "upload-tip-txt",
+      children: extraTipText
+    })]
+  });
+};
+var _default = exports.default = ButtonRender;

package/lib/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/lib/ProUpload/components/DragRender.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _antd = require("antd");
+var _core = require("@dnd-kit/core");
+var _sortable = require("@dnd-kit/sortable");
+var _icons = require("@ant-design/icons");
+var _FileItem = require("./FileItem");
+var _DraggableUploadListItem = require("./DraggableUploadListItem");
+var Dragger = _antd.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 = (0, _react.useRef)();
+  if (isView) return (0, _jsxRuntime.jsx)(_jsxRuntime.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 = (0, _FileItem.getFileExt)(file.name);
+    var _fileIcon = (0, _FileItem.getFileIcon)(_fileExt);
+    return (0, _jsxRuntime.jsxs)("div", {
+      className: "dragger-single-file",
+      children: [(0, _jsxRuntime.jsx)("div", {
+        className: "file-type-icon",
+        children: (0, _jsxRuntime.jsx)("img", {
+          src: _fileIcon
+        })
+      }), (0, _jsxRuntime.jsx)(_FileItem.DragSingleFileItem, {
+        file: file,
+        disabled: disabled,
+        onDownload: onDownload,
+        onPreview: onPreview
+      }), file.status !== 'uploading' && (0, _jsxRuntime.jsxs)("div", {
+        className: "file-action-box",
+        children: [(0, _jsxRuntime.jsx)("div", {
+          className: "file-name",
+          onClick: function onClick() {
+            handleReSelect(file);
+          },
+          children: "\u91CD\u65B0\u9009\u62E9"
+        }), (0, _jsxRuntime.jsx)("div", {
+          className: "file-del",
+          onClick: function onClick() {
+            handleDelFile(file);
+          },
+          children: "\u5220\u9664"
+        })]
+      })]
+    });
+  };
+  var dragUploadProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseUploadProps), {}, {
+    fileList: fileList,
+    showUploadList: false,
+    disabled: disabled,
+    openFileDialogOnClick: !showDraggerSingleRender
+  });
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "pro-upload-dragger",
+    children: [(0, _jsxRuntime.jsxs)("div", {
+      className: "pro-upload-handle-box",
+      children: [(0, _jsxRuntime.jsx)("div", {
+        className: "pro-upload-dragger-header",
+        children: headerRender()
+      }), (0, _jsxRuntime.jsx)(Dragger, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, dragUploadProps), {}, {
+        children: (0, _jsxRuntime.jsxs)("div", {
+          className: "drag-upload-inner",
+          ref: refReSelect,
+          children: [!showDraggerSingleRender && (0, _jsxRuntime.jsxs)("div", {
+            className: "upload-dragger-control",
+            children: [(0, _jsxRuntime.jsxs)("div", {
+              className: "dragger-txt-line1",
+              children: [(0, _jsxRuntime.jsx)("i", {
+                className: "icon-upload",
+                children: (0, _jsxRuntime.jsx)(_icons.CloudUploadOutlined, {})
+              }), (0, _jsxRuntime.jsxs)("p", {
+                className: "dragger-txt",
+                children: ["\u5C06\u6587\u4EF6\u62D6\u62FD\u5230\u6B64\u5904\uFF0C\u6216", (0, _jsxRuntime.jsx)("span", {
+                  className: "click-txt",
+                  children: "\u70B9\u51FB\u4E0A\u4F20 "
+                })]
+              })]
+            }), (0, _jsxRuntime.jsxs)("p", {
+              className: "file-ext",
+              children: ["\u652F\u6301\u6269\u5C55\u540D\uFF1A", extExt.length > 0 ? extExt.join('、') : '无限制']
+            })]
+          }), (0, _jsxRuntime.jsx)("div", {
+            className: "dragger-file-show",
+            children: showDraggerSingleRender && draggerSingleRender(fileList[0])
+          })]
+        })
+      })), (0, _jsxRuntime.jsx)("div", {
+        className: "pro-upload-dragger-footer",
+        children: footerRender()
+      })]
+    }), (0, _jsxRuntime.jsx)("div", {
+      className: "pro-upload-file-list",
+      children: (0, _jsxRuntime.jsx)(_core.DndContext, {
+        sensors: [sensor],
+        onDragEnd: onDragEnd,
+        children: (0, _jsxRuntime.jsx)(_sortable.SortableContext, {
+          items: fileList.map(function (i) {
+            return i.uid;
+          }),
+          strategy: _sortable.rectSortingStrategy,
+          children: maxCount > 1 && fileList.map(function (file) {
+            return (0, _jsxRuntime.jsx)(_DraggableUploadListItem.DraggableUploadListItem, {
+              file: file,
+              children: (0, _jsxRuntime.jsx)(_FileItem.FileItem, {
+                file: file,
+                disabled: disabled || isView,
+                onPreview: onPreview,
+                onRemove: handleDelFile,
+                onDownload: onDownload
+              }, file.uid)
+            });
+          })
+        })
+      })
+    })]
+  });
+};
+var _default = exports.default = DragRender;

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

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

package/lib/ProUpload/components/DraggableUploadListItem.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DraggableUploadListItem = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _utilities = require("@dnd-kit/utilities");
+var _sortable = require("@dnd-kit/sortable");
+var DraggableUploadListItem = exports.DraggableUploadListItem = function DraggableUploadListItem(_ref) {
+  var file = _ref.file,
+    children = _ref.children;
+  var _useSortable = (0, _sortable.useSortable)({
+      id: file.uid
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var style = {
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition: transition,
+    cursor: 'move',
+    zIndex: 10,
+    position: 'relative'
+  };
+  return (0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+    ref: setNodeRef,
+    style: style
+  }, attributes), listeners), {}, {
+    children: children
+  }));
+};

package/lib/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/lib/ProUpload/components/Example.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Example = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _ProDrawerForm = _interopRequireDefault(require("../../ProDrawerForm"));
+var Example = exports.Example = function Example(props) {
+  var exampleContent = props.exampleContent,
+    className = props.className,
+    exampleTitle = props.exampleTitle,
+    exampleModalProps = props.exampleModalProps;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleShowModal = function handleShowModal() {
+    setVisible(true);
+  };
+  var handleCancel = function handleCancel() {
+    setVisible(false);
+  };
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: className,
+    children: [(0, _jsxRuntime.jsx)("div", {
+      onClick: handleShowModal,
+      children: "\u67E5\u770B\u793A\u4F8B"
+    }), (0, _jsxRuntime.jsx)(_ProDrawerForm.default, {
+      title: exampleTitle,
+      width: "600",
+      open: visible,
+      showType: "Modal",
+      onCancel: handleCancel,
+      modalProps: (0, _objectSpread2.default)({}, exampleModalProps),
+      disabled: true,
+      children: (0, _jsxRuntime.jsx)("div", {
+        className: "pro-upload-example",
+        children: exampleContent
+      })
+    })]
+  });
+};

package/{es/ProUpload → lib/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