@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/es/packages/uploader/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-progress {
   display: flex;
   align-items: center;
@@ -8,7 +12,7 @@
   flex: auto;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
-  background: var(--nutui-progress-background, var(--nutui-gray-3, #f5f6fa));
+  background: var(--nutui-progress-background, var(--nutui-gray-3));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -40,15 +44,17 @@
 }
 .nut-progress-text-inner {
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
-  color: var(--nutui-progress-text-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-progress-text-color, #ffffff);
   padding: var(--nutui-progress-text-padding, 0 5px);
   border-radius: var(--nutui-progress-text-border-radius, 5px);
   font-size: var(--nutui-progress-text-font-size, 9px);
   line-height: 1;
-  background: var(--nutui-progress-text-background, var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)));
+  background: var(--nutui-progress-text-background, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 @keyframes progressActive {
   0% {
@@ -83,7 +89,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-uploader-background, var(--nutui-gray-3, #f5f6fa));
+  background: var(--nutui-uploader-background, var(--nutui-gray-3));
   width: var(--nutui-uploader-image-width, 100px);
   height: var(--nutui-uploader-image-height, 100px);
   border: var(--nutui-uploader-image-border, 0px);
@@ -94,11 +100,11 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: var(--nutui-uploader-image-color, var(--nutui-gray-5, #888b94));
+  color: var(--nutui-uploader-image-color, var(--nutui-gray-5));
 }
 .nut-uploader-icon i,
 .nut-uploader-icon .nut-icon {
-  color: var(--nutui-uploader-image-color, var(--nutui-gray-5, #888b94));
+  color: var(--nutui-uploader-image-color, var(--nutui-gray-5));
   margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
 }
 .nut-uploader-icon-tip {
@@ -118,12 +124,12 @@
   cursor: not-allowed;
 }
 .nut-uploader-upload-disabled {
-  background: var(--nutui-uploader-background-disabled, var(--nutui-gray-3, #f5f6fa));
-  color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  background: var(--nutui-uploader-background-disabled, var(--nutui-gray-3));
+  color: var(--nutui-uploader-image-disabled, var(--nutui-gray-4));
 }
 .nut-uploader-upload-disabled .nut-uploader-icon i,
 .nut-uploader-upload-disabled .nut-uploader-icon .nut-icon {
-  color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-uploader-image-disabled, var(--nutui-gray-4));
   margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
 }
 .nut-uploader-preview {
@@ -143,14 +149,14 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: var(--nutui-uploader-preview-progress-background, var(--nutui-black-10, rgba(0, 0, 0, 0.7)));
+  background: var(--nutui-uploader-preview-progress-background, var(--nutui-black-10));
   border-radius: var(--nutui-uploader-image-border-radius, 4px);
 }
 .nut-uploader-preview-progress i {
   margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
 }
 .nut-uploader-preview-progress-msg {
-  color: var(--nutui-gray-5, #888b94);
+  color: var(--nutui-gray-5);
   font-size: 12px;
 }
 .nut-uploader-preview.list {
@@ -168,7 +174,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 10px;
-  background-color: var(--nutui-gray-2, #f7f8fc);
+  background-color: var(--nutui-color-background-sunken, var(--nutui-gray-2));
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
@@ -204,7 +210,7 @@
   overflow: hidden;
 }
 .nut-uploader-preview-img i {
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-gray-7);
 }
 .nut-uploader-preview-img .tips {
   position: absolute;
@@ -227,7 +233,9 @@
   white-space: nowrap;
 }
 .nut-uploader-preview-img-c {
-  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   height: 100%;
   position: initial;
   border-radius: var(--nutui-uploader-image-border-radius, 4px);
@@ -244,7 +252,7 @@
   display: flex;
   width: 90%;
   font-size: 12px;
-  color: var(--nutui-gray-6, #505259);
+  color: var(--nutui-gray-6);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;

package/dist/es/packages/uploader/style/uploader.scss

@@ -174,7 +174,9 @@
       }
 
       &-c {
-        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         height: 100%;
         position: initial;
         border-radius: $uploader-image-border-radius;
@@ -193,6 +195,7 @@
           width: 90%;
           font-size: 12px;
           color: $color-text;
+          @include moreline-ellipsis();
 
           &.error {
             color: red !important;
@@ -205,8 +208,6 @@
           .nut-icon-Link {
             flex-shrink: 0;
           }
-
-          @include moreline-ellipsis();
         }
       }
     }

package/dist/es/packages/uploader/types.d.ts

@@ -0,0 +1,17 @@
+export type FileItem = {
+    status?: FileItemStatus;
+    message?: string;
+    uid?: string | number;
+    name?: string;
+    url?: string;
+    type?: 'image' | 'list' | string;
+    path?: string;
+    loadingIcon?: React.ReactNode;
+    failIcon?: React.ReactNode;
+    file?: File;
+    percentage?: number;
+};
+export type FileItemStatus = 'ready' | 'uploading' | 'success' | 'error';
+export type FileType<T> = {
+    [key: string]: T;
+};

package/dist/es/packages/uploader/types.js

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

package/dist/es/packages/uploader/uploader.d.ts

@@ -1,23 +1,19 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
-import { UploadOptions } from './utils';
 import { BasicComponent } from "../../utils/typings";
-import { FileItem } from "./file-item";
-/** 图片的尺寸 */
+import { FileItem } from './types';
 interface sizeType {
     /** 原图 */
     original: string;
     /** compressed */
     compressed: string;
 }
-/** 图片的来源 */
 interface sourceType {
     /** 从相册选图 */
     album: string;
     /** 使用相机 */
     camera: string;
 }
-/** 视频的来源 */
 interface mediaType {
     /** 只能拍摄图片或从相册选择图片 */
     image: string;
@@ -25,190 +21,39 @@ interface mediaType {
     video: string;
 }
 export interface UploaderProps extends BasicComponent {
-    /**
-    * 上传服务器的接口地址
-    * @default -
-    */
-    url: string
-    /**
-    * 文件上传数量限制
-    * @default 1
-    */
-    maxCount: string | number
-    /**
-    * [是否压缩所选文件]("https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html")
-    * @default ['original','compressed']
-    */
-    sizeType: (keyof sizeType)[]
-    /**
-    * [选择文件的来源]("https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html")
-    * @default ['album','camera']
-    */
-    sourceType: (keyof sourceType)[]
+    maxCount: string | number;
+    sizeType: (keyof sizeType)[];
+    sourceType: (keyof sourceType)[];
     mediaType: (keyof mediaType)[];
     camera: string;
-    /**
-    * 可以设定最大上传文件的大小（字节）
-    * @default Number.MAX_VALUE
-    */
-    maxFileSize: number
-    /**
-    * 默认已经上传的文件列表
-    * @default []
-    */
-    defaultValue?: FileItem[]
-    /**
-    * 已经上传的文件列表
-    * @default []
-    */
-    value?: FileItem[]
-    /**
-    * 上传列表的内建样式，支持两种基本样式 picture、list
-    * @default picture
-    */
-    previewType: 'picture' | 'list'
-    /**
-    * 图片填充模式
-    * @default cover
-    */
-    fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
-    /**
-    * 上传区域<a href="#/zh-CN/icon">图标名称</a>
-    * @default -
-    */
-    uploadIcon?: React.ReactNode
-    /**
-    * 上传区域图片下方文字
-    * @default &quot;&quot;
-    */
-    uploadLabel?: React.ReactNode
-    /**
-    * input 标签 name 的名称，发到后台的文件参数名
-    * @default file
-    */
-    name: string
+    maxFileSize: number;
+    defaultValue?: FileItem[];
+    value?: FileItem[];
+    previewType: 'picture' | 'list';
+    fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    uploadIcon?: React.ReactNode;
+    deleteIcon?: React.ReactNode;
+    uploadLabel?: React.ReactNode;
+    name: string;
     accept: string;
-    /**
-    * 是否禁用文件上传
-    * @default false
-    */
-    disabled: boolean
-    /**
-    * 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传
-    * @default true
-    */
-    autoUpload: boolean
-    /**
-    * 是否支持文件多选
-    * @default false
-    */
-    multiple: boolean
-    /**
-    * 超时时间，单位为毫秒
-    * @default 1000 * 30
-    */
-    timeout: number
-    /**
-    * 附加上传的信息 formData
-    * @default {}
-    */
-    data: any
-    /**
-    * 上传请求的 http method
-    * @default post
-    */
-    method: string
-    /**
-    * 接口响应的成功状态（status）值
-    * @default 200
-    */
-    xhrState: number | string
-    /**
-    * 设置上传的请求头部
-    * @default {}
-    */
-    headers: any
-    /**
-    * 是否上传成功后展示预览图
-    * @default true
-    */
-    preview: boolean
-    /**
-    * 是否展示删除按钮
-    * @default true
-    */
-    deletable: boolean
+    disabled: boolean;
+    autoUpload: boolean;
+    multiple: boolean;
+    preview: boolean;
+    deletable: boolean;
     className: string;
-    /**
-    * 当上传非图片('image')格式的默认图片地址
-    * @default -
-    */
-    previewUrl?: string
+    previewUrl?: string;
     maxDuration: number;
     style: React.CSSProperties;
-    /**
-    * 文件上传开始
-    * @default -
-    */
-    onStart?: (option: UploadOptions) => void
-    /**
-    * 文件删除之前的状态
-    * @default -
-    */
-    onDelete?: (file: FileItem, files: FileItem[]) => void
-    /**
-    * 上传成功
-    * @default -
-    */
-    onSuccess?: (param: {
-        responseText: XMLHttpRequest['responseText'];
-        option: UploadOptions;
-        files: FileItem[];
-    }) => void
-    /**
-    * 文件上传的进度
-    * @default -
-    */
-    onProgress?: (param: {
-        e: ProgressEvent<XMLHttpRequestEventTarget>;
-        option: UploadOptions;
-        percentage: number | string;
-    }) => void
-    /**
-    * 上传失败
-    * @default -
-    */
-    onFailure?: (param: {
-        responseText: XMLHttpRequest['responseText'];
-        option: UploadOptions;
-        files: FileItem[];
-    }) => void
-    onUpdate?: (files: FileItem[]) => void;
-    /**
-    * 文件大小超过限制时触发
-    * @default -
-    */
-    onOversize?: (files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any) => void
-    /**
-    * 上传文件改变时的状态
-    * @default -
-    */
-    onChange?: (files: FileItem[]) => void
-    /**
-    * 执行 XHR 上传时，自定义方式
-    * @default -
-    */
-    beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => void
-    /**
-    * 除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除
-    * @default -
-    */
-    beforeDelete?: (file: FileItem, files: FileItem[]) => boolean
-    /**
-    * 文件上传成功后点击触发
-    * @default -
-    */
-    onFileItemClick?: (file: FileItem, index: number) => void
+    onDelete?: (file: FileItem, files: FileItem[]) => void;
+    onOversize?: (files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any) => void;
+    onOverCount?: (count: number) => void;
+    onChange?: (files: FileItem[]) => void;
+    upload: (files: Taro.chooseImage.ImageFile | Taro.chooseMedia.ChooseMedia | any) => Promise<FileItem>;
+    beforeUpload?: (files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any) => Promise<File[]>;
+    beforeDelete?: (file: FileItem, files: FileItem[]) => boolean;
+    onFileItemClick?: (file: FileItem, index: number) => void;
+    onUploadQueueChange?: (tasks: FileItem[]) => void;
 }
 export declare const Uploader: React.ForwardRefExoticComponent<Partial<UploaderProps> & {
     children?: React.ReactNode | undefined;