@nutui/nutui-react-taro 3.0.0-beta.1 → 3.0.0-beta.11

package/dist/cjs/packages/uploader/preview.js

@@ -12,12 +12,12 @@ var _interop_require_default = require("@swc/helpers/_/_interop_require_default"
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _components = require("@tarojs/components");
-var _index = /*#__PURE__*/ _interop_require_default._(require("../progress/index"));
-var _utils = require("./utils");
+var _image = require("../image/image");
+var _progress = require("../progress/progress");
 var Preview = function Preview(param) {
     var fileList = param.fileList, previewType = param.previewType, deletable = param.deletable, onDeleteItem = param.onDeleteItem, handleItemClick = param.handleItemClick, previewUrl = param.previewUrl, deleteIcon = param.deleteIcon, children = param.children;
     var renderIcon = function renderIcon(item) {
-        if (item.status === _utils.ERROR) {
+        if (item.status === 'error') {
             return item.failIcon || /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Failure, {
                 color: "#fff"
             });
@@ -28,38 +28,37 @@ var Preview = function Preview(param) {
         });
     };
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, fileList.length !== 0 && fileList.map(function(item, index) {
-        var _item_type;
+        var _item_status = item.status, status = _item_status === void 0 ? 'success' : _item_status, _item_uid = item.uid, uid = _item_uid === void 0 ? index : _item_uid, url = item.url, _item_message = item.message, message = _item_message === void 0 ? '' : _item_message, _item_name = item.name, name = _item_name === void 0 ? '' : _item_name, _item_type = item.type, type = _item_type === void 0 ? 'image' : _item_type;
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "nut-uploader-preview ".concat(previewType),
-            key: item.uid
+            key: uid
         }, previewType === 'picture' && !children && deletable && /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "close",
             onClick: function onClick() {
                 return onDeleteItem(item, index);
-            }
+            },
+            className: "close"
         }, deleteIcon), previewType === 'picture' && !children && /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "nut-uploader-preview-img"
-        }, item.status === 'ready' ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        }, status === 'ready' ? /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "nut-uploader-preview-progress"
         }, /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "nut-uploader-preview-progress-msg"
-        }, item.message)) : item.status !== 'success' && /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-uploader-preview-progress"
+        }, message)) : status !== 'success' && /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "nut-uploader-preview-progress",
+            style: {
+                zIndex: 10
+            }
         }, renderIcon(item), /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "nut-uploader-preview-progress-msg"
-        }, item.message)), ((_item_type = item.type) === null || _item_type === void 0 ? void 0 : _item_type.includes('image')) ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, item.url && /*#__PURE__*/ _react.default.createElement(_components.Image, {
+        }, message)), type.includes('image') ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, url && /*#__PURE__*/ _react.default.createElement(_image.Image, {
             className: "nut-uploader-preview-img-c",
-            style: {
-                objectFit: 'fill'
-            },
-            mode: "aspectFit",
-            src: item.url,
+            src: url,
+            mode: "aspectFill",
             onClick: function onClick() {
                 return handleItemClick(item, index);
             }
-        })) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, previewUrl ? /*#__PURE__*/ _react.default.createElement(_components.Image, {
+        })) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, previewUrl ? /*#__PURE__*/ _react.default.createElement(_image.Image, {
             className: "nut-uploader-preview-img-c",
-            mode: "aspectFit",
             src: previewUrl,
             onClick: function onClick() {
                 return handleItemClick(item, index);
@@ -73,22 +72,24 @@ var Preview = function Preview(param) {
             className: "nut-uploader-preview-img-file-name"
         }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Link, {
             color: "#808080"
-        }), /*#__PURE__*/ _react.default.createElement("span", null, "\xa0", item.name)))), item.status === 'success' ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        }), /*#__PURE__*/ _react.default.createElement("span", null, "\xa0", name)))), status === 'success' && name ? /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "tips"
-        }, item.name) : null), previewType === 'list' && /*#__PURE__*/ _react.default.createElement(_components.View, {
+        }, name) : null), previewType === 'list' && /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: "nut-uploader-preview-list"
         }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "nut-uploader-preview-img-file-name ".concat(item.status),
+            className: "nut-uploader-preview-img-file-name ".concat(status),
             onClick: function onClick() {
                 return handleItemClick(item, index);
             }
-        }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Link, null), /*#__PURE__*/ _react.default.createElement("span", null, "\xa0", item.name)), deletable && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Del, {
+        }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Link, null), /*#__PURE__*/ _react.default.createElement("span", {
+            className: "nut-uploader-preview-img-file-name ".concat(status)
+        }, "\xa0", name)), deletable && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Del, {
             color: "#808080",
             className: "nut-uploader-preview-img-file-del",
             onClick: function onClick() {
                 return onDeleteItem(item, index);
             }
-        }), item.status === 'uploading' && /*#__PURE__*/ _react.default.createElement(_index.default, {
+        }), item.status === 'uploading' && item.percentage && /*#__PURE__*/ _react.default.createElement(_progress.Progress, {
             percent: item.percentage,
             color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
             showText: false

package/dist/cjs/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-color-background, #f5f6fa));
+  background: var(--nutui-progress-background, var(--nutui-gray-3));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -27,7 +31,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: var(--nutui-progress-border-radius, 12px);
-  background-color: var(--nutui-progress-color, #ff0f23);
+  background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
   display: flex;
@@ -36,6 +40,7 @@
   top: var(--nutui-progress-text-position-top, -4px);
   bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
+  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
@@ -44,12 +49,12 @@
   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, #ff0f23);
+  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% {
@@ -84,7 +89,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-uploader-background, var(--nutui-color-background, #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);
@@ -95,11 +100,11 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #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-color-text-help, #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 {
@@ -119,12 +124,12 @@
   cursor: not-allowed;
 }
 .nut-uploader-upload-disabled {
-  background: var(--nutui-uploader-background-disabled, var(--nutui-color-background, #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 {
@@ -144,14 +149,14 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: var(--nutui-uploader-preview-progress-background, var(--nutui-color-mask, 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-color-text-help, #888b94);
+  color: var(--nutui-gray-5);
   font-size: 12px;
 }
 .nut-uploader-preview.list {
@@ -169,7 +174,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 10px;
-  background-color: var(--nutui-color-background-sunken, #f7f8fc);
+  background-color: var(--nutui-color-background-sunken, var(--nutui-gray-2));
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
@@ -205,7 +210,7 @@
   overflow: hidden;
 }
 .nut-uploader-preview-img i {
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-7);
 }
 .nut-uploader-preview-img .tips {
   position: absolute;
@@ -247,7 +252,7 @@
   display: flex;
   width: 90%;
   font-size: 12px;
-  color: var(--nutui-color-text, #505259);
+  color: var(--nutui-gray-6);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;

package/dist/cjs/packages/uploader/style/style.harmony.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-uploader {
   position: relative;
   display: flex;
@@ -11,7 +15,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #F7F8FC;
+  background: #f2f3f5;
   width: 100px;
   height: 100px;
   border: 0px;
@@ -22,14 +26,14 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: #888B94;
+  color: #888b94;
 }
 .nut-uploader-icon i {
-  color: #888B94;
+  color: #888b94;
   margin-bottom: 6px;
 }
 .nut-uploader-icon .nut-icon {
-  color: #888B94;
+  color: #888b94;
   margin-bottom: 6px;
 }
 .nut-uploader-icon-tip {
@@ -49,15 +53,15 @@
   cursor: not-allowed;
 }
 .nut-uploader-upload-disabled {
-  background: #F7F8FC;
-  color: #C2C4CC;
+  background: #f2f3f5;
+  color: #c2c4cc;
 }
 .nut-uploader-upload-disabled .nut-uploader-icon i {
-  color: #C2C4CC;
+  color: #c2c4cc;
   margin-bottom: 6px;
 }
 .nut-uploader-upload-disabled .nut-uploader-icon .nut-icon {
-  color: #C2C4CC;
+  color: #c2c4cc;
   margin-bottom: 6px;
 }
 .nut-uploader-preview {
@@ -84,7 +88,7 @@
   margin-bottom: 6px;
 }
 .nut-uploader-preview-progress-msg {
-  color: #888B94;
+  color: #888b94;
   font-size: 12px;
 }
 .nut-uploader-preview.list {
@@ -102,7 +106,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 10px;
-  background-color: #F7F8FC;
+  background-color: #f7f8fc;
 }
 .nut-uploader-preview-list .nut-uploader-preview-img-file-name {
   display: flex;
@@ -138,7 +142,7 @@
   overflow: hidden;
 }
 .nut-uploader-preview-img i {
-  color: #1A1A1A;
+  color: #1a1a1a;
 }
 .nut-uploader-preview-img .tips {
   position: absolute;
@@ -154,14 +158,16 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   padding: 0 5px;
-  background: undefined;
+  background: rgba(0, 0, 0, 0.4);
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .nut-uploader-preview-img-c {
-  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   height: 100%;
   position: initial;
   border-radius: 4px;

package/dist/cjs/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/cjs/packages/uploader/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -1,8 +1,7 @@
 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;
@@ -22,7 +21,6 @@ interface mediaType {
     video: string;
 }
 export interface UploaderProps extends BasicComponent {
-    url: string;
     maxCount: string | number;
     sizeType: (keyof sizeType)[];
     sourceType: (keyof sourceType)[];
@@ -41,41 +39,21 @@ export interface UploaderProps extends BasicComponent {
     disabled: boolean;
     autoUpload: boolean;
     multiple: boolean;
-    timeout: number;
-    data: any;
-    method: string;
-    xhrState: number | string;
-    headers: any;
     preview: boolean;
     deletable: boolean;
     className: string;
     previewUrl?: string;
     maxDuration: number;
     style: React.CSSProperties;
-    onStart?: (option: UploadOptions) => void;
     onDelete?: (file: FileItem, files: FileItem[]) => void;
-    onSuccess?: (param: {
-        responseText: XMLHttpRequest['responseText'];
-        option: UploadOptions;
-        files: FileItem[];
-    }) => void;
-    onProgress?: (param: {
-        e: ProgressEvent<XMLHttpRequestEventTarget>;
-        option: UploadOptions;
-        percentage: number | string;
-    }) => void;
-    onFailure?: (param: {
-        responseText: XMLHttpRequest['responseText'];
-        option: UploadOptions;
-        files: FileItem[];
-    }) => void;
-    onUpdate?: (files: FileItem[]) => void;
     onOversize?: (files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any) => void;
+    onOverCount?: (count: number) => void;
     onChange?: (files: FileItem[]) => void;
-    beforeUpload?: (files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any) => Promise<File[] | boolean>;
-    beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => 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;