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

package/lib/ProUpload/propsType.d.ts

@@ -1,21 +1,32 @@
 import React from 'react';
 import { UploadFile } from 'antd/es/upload/interface';
-export type UploadType = 'drag' | 'button' | 'image' | 'license' | 'sfz';
+export type UploadType = 'drag' | 'button' | 'image';
 export interface UploadFileRes {
     url: string;
     [key: string]: any;
 }
+export interface ExampleModalProps {
+    width?: string | number;
+    wrapClassName?: string;
+    [key: string]: any;
+}
+export interface fieldNamesProps {
+    uid?: number;
+    name?: string;
+    url?: string;
+    status?: 'done' | 'uploading' | 'error';
+}
 export interface ProUploadProps {
     /**
      * @description       拖拽框顶部的内容
      * @default           -
      */
-    headerRender?: () => React.ReactNode;
+    headerRender?: React.ReactNode | (() => React.ReactNode);
     /**
      * @description       拖拽框底部内容
      * @default           -
      */
-    footerRender?: () => React.ReactNode;
+    footerRender?: React.ReactNode | (() => React.ReactNode);
     /**
      * @description       是否显示示例弹窗
      * @default           false
@@ -26,6 +37,11 @@ export interface ProUploadProps {
      * @default           -
      */
     exampleContent?: React.ReactNode;
+    /**
+     * @description       示例弹窗的属性配置继承与antd 的Modal对话框
+     * @default           -
+     */
+    exampleModalProps?: ExampleModalProps;
     /**
      * @description       接受上传的文件类型, '.png,.jpeg,.jpg,.xlsx,.xls,.json,.doc,.docx' 详见 input accept Attribute
      * @default           -
@@ -56,6 +72,11 @@ export interface ProUploadProps {
      * @default           -
      */
     buttonProps?: Object;
+    /**
+     * @description       组件文案 仅按钮类型的可用。
+     * @default           -
+     */
+    buttonText?: string;
     /**
      * @description       上传所需额外参数或返回上传额外参数的方法
      * @default           -
@@ -97,7 +118,12 @@ export interface ProUploadProps {
      * @description  发到后台的文件参数名
      * @default      -
      */
-    name: string;
+    name?: string;
+    /**
+     * @description  查看示例title
+     * @default       "查看示例"
+     */
+    exampleTitle?: string | React.ReactNode;
     /**
      * @description 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）；也可以返回 Upload.LIST_IGNORE，此时列表中将不展示此文件。 注意：IE9 不支持该方法
      * @default    -
@@ -112,21 +138,49 @@ export interface ProUploadProps {
      * @description 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页
      * @default    -
      */
-    onDownload?: (arg0: File) => void;
+    onDownload?: (file: UploadFile) => void;
     /**
      * @description 点击文件链接或预览图标时的回调
      * @default    -
      */
-    onPreview?: (arg0: File) => any;
+    onPreview?: (file: UploadFile) => any;
     /**
      * @description 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除
      * @default    -
      */
-    onRemove?: (arg0: File) => boolean | Promise<any>;
+    onRemove?: (file: UploadFile) => boolean | Promise<any>;
     /**
      * @description 样式类名
      * @default    -
      */
     className?: string;
+    /**
+     * @description 上传接口处理方法 返回一个数组 UploadFile【】
+     * @default    -
+     */
     transformResponse?: (res: any) => UploadFileRes;
+    /**
+     * @description 可以调用组件的内部方法，例如：uploadStart方式
+     * @default    -
+     */
+    ref?: any;
+    /**
+     * @description 按钮类型的右侧辅助信息
+     * @default    -
+     */
+    afterRender?: React.ReactNode;
+    /**
+     * @description 是否展示文件列表
+     * @default    true
+     */
+    showUploadList?: boolean;
+    /**
+     * @description 文件对象的字段映射
+     * @default    true
+     */
+    fieldNames?: fieldNamesProps;
+}
+export interface DraggableUploadListItemProps {
+    file: UploadFile<any>;
+    children: React.ReactNode;
 }

package/lib/ProUpload/style/fileItem.less

@@ -1,160 +1,148 @@
-.filelist-item-wrapper {
-  // width: 392px;
-  .file-info-box {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 30px;
-    margin-top: 8px;
-    color: #343434;
-    font-weight: 400;
-    font-size: 12px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    line-height: 17px;
-    &:hover {
-      background: #F8F9FA;
-      border-radius: 4px;
-    }
-    &:hover,&.file-box-error {
-      .file-actions-wrap {
-        .file-actions{
-          display: flex;
-
-          .file-action-item{
-            color: #FF005F;
+.pro-upload  {
+
+  .filelist-item-wrapper {
+    .file-info-box {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 30px;
+      margin-top: var(--zaui-space-size-sm, 8px);
+      color: var(--zaui-text, #343434);
+      font-size: var(--zaui-font-size-sm, 12px);
+      line-height: 16px;
+      &:hover {
+        background: #F8F9FA;
+        border-radius: var(--zaui-border-radius, 4px);
+        color: var(--zaui-brand);
+        .file-actions-wrap {
+          .file-actions{
+            display: flex;
+            .file-action-item{
+              color: var(--zaui-brand);
+            }
           }
         }
       }
+      &.file-box-error {
+        color: var(--zaui-danger);
+
+        .file-actions-wrap {
+          .file-actions{
+            display: flex;
+            .file-action-item{
+              color: var(--zaui-danger);
+            }
+          }
+        }
 
-    }
-
-    .file-type-icon {
-      display: block;
-      width: 18px;
-      height: 23px;
-      margin-left: 6px;
-      overflow: hidden;
-      position: absolute;
-    }
-    .file-name {
-      display: -webkit-box;
-      padding-left: 32px;
-      overflow: hidden;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      word-break: keep-all;
-    }
-    .file-name.file-name-pf0 {
-      padding-left: 0;
-    }
-
-    .file-percent {
-      margin-left: 8px;
-      color: #939599;
-      font-weight: 400;
-      font-size: 12px;
-      font-family: PingFangSC-Regular, PingFang SC;
-    }
-
-    &.file-box-error {
-      color: #FF005F;
-    }
+      }
 
-    .file-actions-wrap {
-      width: 100px;
-      margin-left: auto;
-      .file-actions {
-        display: none;
-        justify-content: right;
+      .file-type-icon {
+        display: block;
+        width: 18px;
+        height: 23px;
+        margin-left: 6px;
+        overflow: hidden;
+        position: absolute;
+      }
+      .file-name {
+        display: box;
+        padding-left: var(--zaui-space-size-lg, 32px);
+        overflow: hidden;
+        line-clamp: 1;
+        box-orient: vertical;
+        word-break: break-all;
+      }
+      .file-name.file-name-pf0 {
+        padding-left: 0;
+      }
 
-        transition: all 1s;
 
-        .file-action-item {
-          margin-left: 8px;
-          padding: 0;
-          cursor: pointer;
-          color: var(--zaui-brand);
+      .file-actions-wrap {
+        width: 100px;
+        margin-left: auto;
+        .file-actions {
+          display: none;
+          justify-content: right;
+
+          transition: all 1s;
+
+          .file-action-item {
+            margin-left: var(--zaui-space-size-sm, 8px);
+            padding: 0;
+            cursor: pointer;
+            color: var(--zaui-brand);
+          }
         }
       }
     }
   }
-}
-
 
-.drag-Single-item-wrapper {
-  .file-info-box {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 30px;
-    margin-top: 8px;
-    color: #343434;
-    font-weight: 400;
-    font-size: 12px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    line-height: 17px;
-    justify-content: center;
-    &:hover {
-      background: #F8F9FA;
-      border-radius: 4px;
-    }
-    &:hover,&.file-box-error {
-      .file-actions-wrap {
-        .file-actions{
-          display: flex;
-
-          // .file-action-item{
-          //   color: #FF005F;
-          // }
-        }
+  // 单个文件拖拽控件
+  .drag-Single-item-wrapper {
+    .file-info-box {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 30px;
+      margin-top: var(--zaui-space-size-sm, 8px);
+      color: var(--zaui-text, #343434);
+
+      font-size: var(--zaui-font-size-sm, 12px);
+      line-height: 16px;
+      justify-content: center;
+      &:hover {
+        background: #F8F9FA;
+        border-radius: var(--zaui-border-radius, 4px);
       }
+      &:hover,&.file-box-error {
+        .file-actions-wrap {
+          .file-actions{
+            display: flex;
+          }
+        }
 
-    }
-
-    .file-type-icon {
-      display: block;
-      width: 18px;
-      height: 23px;
-      margin-left: 6px;
-      overflow: hidden;
-      position: absolute;
-    }
-    .file-name {
-      display: -webkit-box;
-      padding-left: 8px;
-      overflow: hidden;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      word-break: keep-all;
-    }
-    .file-name.file-name-pf0 {
-      padding-left: 0;
-    }
+      }
 
-    .file-percent {
-      margin-left: 8px;
-      color: #939599;
-      font-weight: 400;
-      font-size: 12px;
-      font-family: PingFangSC-Regular, PingFang SC;
-    }
+      .file-type-icon {
+        display: block;
+        width: 18px;
+        height: 23px;
+        margin-left: 6px;
+        overflow: hidden;
+        position: absolute;
+      }
+      .file-name {
+        display: box;
+        padding-left: var(--zaui-space-size-sm, 8px);
+        overflow: hidden;
+        line-clamp: 1;
+        box-orient: vertical;
+        word-break: keep-all;
+      }
+      .file-name.file-name-pf0 {
+        padding-left: 0;
+      }
 
-    &.file-box-error {
-      color: #FF005F;
-    }
+      &.file-box-error {
+        color: var(--zaui-danger, #FF005F);
+      }
 
-    .file-actions-wrap {
-      margin-left: 10px;
-      .file-actions {
-        justify-content: right;
-        transition: all 1s;
-        .file-action-item {
-          margin-left: 8px;
-          padding: 0;
-          cursor: pointer;
-          color: var(--zaui-brand);
+      .file-actions-wrap {
+        margin-left: 10px;
+        .file-actions {
+          justify-content: right;
+          transition: all 1s;
+          display: flex;
+          .file-action-item {
+            margin-left: var(--zaui-space-size-sm, 8px);
+            padding: 0;
+            cursor: pointer;
+            color: var(--zaui-brand);
+          }
         }
       }
     }
   }
+
 }