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

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

@@ -3,11 +3,11 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import React, { useState, useImperativeHandle } from "react";
+import React, { useState, useImperativeHandle, useRef, useEffect } from "react";
 import classNames from "classnames";
 import Taro, { chooseImage, uploadFile, getEnv, chooseMedia } from "@tarojs/taro";
-import { View } from "@tarojs/components";
-import { Photograph } from "@nutui/icons-react-taro";
+import { View, Text } from "@tarojs/components";
+import { Failure, Photograph } from "@nutui/icons-react-taro";
 import Button from "../button/index";
 import { ERROR, SUCCESS, UploaderTaro, UPLOADING, UploadOptions } from "./utils";
 import { useConfig } from "../configprovider/configprovider";
@@ -36,6 +36,9 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
         size: "20px",
         color: "#808080"
     }),
+    deleteIcon: /*#__PURE__*/ React.createElement(Failure, {
+        color: "rgba(0,0,0,0.6)"
+    }),
     uploadLabel: '',
     previewType: 'picture',
     fit: 'cover',
@@ -60,9 +63,10 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var InternalUploader = function(props, ref) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, uploadIcon = _ref.uploadIcon, uploadLabel = _ref.uploadLabel, accept = _ref.accept, name = _ref.name, camera = _ref.camera, defaultValue = _ref.defaultValue, value = _ref.value, previewType = _ref.previewType, fit = _ref.fit, disabled = _ref.disabled, multiple = _ref.multiple, url = _ref.url, previewUrl = _ref.previewUrl, headers = _ref.headers, timeout = _ref.timeout, method = _ref.method, xhrState = _ref.xhrState, data = _ref.data, preview = _ref.preview, deletable = _ref.deletable, maxCount = _ref.maxCount, maxFileSize = _ref.maxFileSize, mediaType = _ref.mediaType, className = _ref.className, autoUpload = _ref.autoUpload, sizeType = _ref.sizeType, sourceType = _ref.sourceType, maxDuration = _ref.maxDuration, onStart = _ref.onStart, onDelete = _ref.onDelete, onChange = _ref.onChange, onFileItemClick = _ref.onFileItemClick, onProgress = _ref.onProgress, onSuccess = _ref.onSuccess, onUpdate = _ref.onUpdate, onFailure = _ref.onFailure, onOversize = _ref.onOversize, beforeXhrUpload = _ref.beforeXhrUpload, beforeDelete = _ref.beforeDelete, restProps = _object_without_properties(_ref, [
+    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, uploadIcon = _ref.uploadIcon, deleteIcon = _ref.deleteIcon, uploadLabel = _ref.uploadLabel, accept = _ref.accept, name = _ref.name, camera = _ref.camera, defaultValue = _ref.defaultValue, value = _ref.value, previewType = _ref.previewType, fit = _ref.fit, disabled = _ref.disabled, multiple = _ref.multiple, url = _ref.url, previewUrl = _ref.previewUrl, headers = _ref.headers, timeout = _ref.timeout, method = _ref.method, xhrState = _ref.xhrState, data = _ref.data, preview = _ref.preview, deletable = _ref.deletable, maxCount = _ref.maxCount, maxFileSize = _ref.maxFileSize, mediaType = _ref.mediaType, className = _ref.className, autoUpload = _ref.autoUpload, sizeType = _ref.sizeType, sourceType = _ref.sourceType, maxDuration = _ref.maxDuration, onStart = _ref.onStart, onDelete = _ref.onDelete, onChange = _ref.onChange, onFileItemClick = _ref.onFileItemClick, onProgress = _ref.onProgress, onSuccess = _ref.onSuccess, onUpdate = _ref.onUpdate, onFailure = _ref.onFailure, onOversize = _ref.onOversize, beforeUpload = _ref.beforeUpload, beforeXhrUpload = _ref.beforeXhrUpload, beforeDelete = _ref.beforeDelete, restProps = _object_without_properties(_ref, [
         "children",
         "uploadIcon",
+        "deleteIcon",
         "uploadLabel",
         "accept",
         "name",
@@ -99,6 +103,7 @@ var InternalUploader = function(props, ref) {
         "onUpdate",
         "onFailure",
         "onOversize",
+        "beforeUpload",
         "beforeXhrUpload",
         "beforeDelete"
     ]);
@@ -126,6 +131,12 @@ var InternalUploader = function(props, ref) {
             }
         };
     });
+    var fileListRef = useRef([]);
+    useEffect(function() {
+        fileListRef.current = fileList;
+    }, [
+        fileList
+    ]);
     var clearUploadQueue = function() {
         var index = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : -1;
         if (index > -1) {
@@ -156,20 +167,19 @@ var InternalUploader = function(props, ref) {
         if ((getEnv() === 'WEAPP' || getEnv() === 'JD') && chooseMedia) {
             // 其余端全部使用 chooseImage API
             chooseMedia({
-                /** 最多可以选择的文件个数 */ count: multiple ? maxCount * 1 - fileList.length : 1,
+                count: multiple ? maxCount * 1 - fileList.length : 1,
                 /** 文件类型 */ mediaType: mediaType,
                 /** 图片和视频选择的来源 */ sourceType: sourceType,
                 /** 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间 */ maxDuration: maxDuration,
-                /** 仅对 mediaType 为 image 时有效，是否压缩所选文件 */ sizeType: [],
+                /** 仅对 mediaType 为 image 时有效，是否压缩所选文件 */ sizeType: sizeType,
                 /** 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头 */ camera: camera,
-                /** 接口调用失败的回调函数 */ fail: function(res) {
+                fail: function(res) {
                     onFailure && onFailure(res);
                 },
-                /** 接口调用成功的回调函数 */ success: onChangeMedia
+                success: onChangeMedia
             });
         } else {
             chooseImage({
-                // 选择数量
                 count: multiple ? maxCount * 1 - fileList.length : 1,
                 // 可以指定是原图还是压缩图，默认二者都有
                 sizeType: sizeType,
@@ -195,22 +205,22 @@ var InternalUploader = function(props, ref) {
         uploadOption.beforeXhrUpload = beforeXhrUpload;
         uploadOption.onStart = function(option) {
             clearUploadQueue(index);
-            setFileList(fileList.map(function(item) {
+            setFileList(fileListRef.current.map(function(item) {
                 if (item.uid === fileItem.uid) {
                     item.status = 'ready';
                     item.message = locale.uploader.readyUpload;
                 }
                 return item;
             }));
-            onStart && onStart(option);
+            onStart === null || onStart === void 0 ? void 0 : onStart(option);
         };
         uploadOption.onProgress = function(e, option) {
-            setFileList(fileList.map(function(item) {
+            setFileList(fileListRef.current.map(function(item) {
                 if (item.uid === fileItem.uid) {
                     item.status = UPLOADING;
                     item.message = locale.uploader.uploading;
                     item.percentage = e.progress;
-                    onProgress && onProgress({
+                    onProgress === null || onProgress === void 0 ? void 0 : onProgress({
                         e: e,
                         option: option,
                         percentage: item.percentage
@@ -220,7 +230,7 @@ var InternalUploader = function(props, ref) {
             }));
         };
         uploadOption.onSuccess = function(responseText, option) {
-            var list = fileList.map(function(item) {
+            var list = fileListRef.current.map(function(item) {
                 if (item.uid === fileItem.uid) {
                     item.status = SUCCESS;
                     item.message = locale.uploader.success;
@@ -236,7 +246,7 @@ var InternalUploader = function(props, ref) {
             });
         };
         uploadOption.onFailure = function(responseText, option) {
-            var list = fileList.map(function(item) {
+            var list = fileListRef.current.map(function(item) {
                 if (item.uid === fileItem.uid) {
                     item.status = ERROR;
                     item.message = locale.uploader.error;
@@ -313,10 +323,10 @@ var InternalUploader = function(props, ref) {
             if (preview) {
                 fileItem.url = fileType === 'video' ? file.thumbTempFilePath : filepath;
             }
+            executeUpload(fileItem, index);
             setFileList(_to_consumable_array(fileList).concat([
                 fileItem
             ]));
-            executeUpload(fileItem, index);
         });
     };
     var filterFiles = function(files) {
@@ -330,9 +340,7 @@ var InternalUploader = function(props, ref) {
             }
             return true;
         });
-        if (oversizes.length) {
-            onOversize && onOversize(files);
-        }
+        oversizes.length && (onOversize === null || onOversize === void 0 ? void 0 : onOversize(files));
         var currentFileLength = filterFile.length + fileList.length;
         if (currentFileLength > maximum) {
             filterFile.splice(filterFile.length - (currentFileLength - maximum));
@@ -362,13 +370,29 @@ var InternalUploader = function(props, ref) {
         // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
         var tempFiles = res.tempFiles;
         var _files = filterFiles(tempFiles);
-        readFile(_files);
+        if (beforeUpload) {
+            beforeUpload(new Array().slice.call(_files)).then(function(f) {
+                var _files = filterFiles(new Array().slice.call(f));
+                if (!_files.length) res.tempFiles = [];
+                readFile(_files);
+            });
+        } else {
+            readFile(_files);
+        }
     };
     var onChangeImage = function(res) {
         // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
         var tempFiles = res.tempFiles;
         var _files = filterFiles(tempFiles);
-        readFile(_files);
+        if (beforeUpload) {
+            beforeUpload(new Array().slice.call(_files)).then(function(f) {
+                var _files = filterFiles(new Array().slice.call(f));
+                if (!_files.length) res.tempFiles = [];
+                readFile(_files);
+            });
+        } else {
+            readFile(_files);
+        }
     };
     var handleItemClick = function(file, index) {
         onFileItemClick === null || onFileItemClick === void 0 ? void 0 : onFileItemClick(file, index);
@@ -380,7 +404,7 @@ var InternalUploader = function(props, ref) {
     }, /*#__PURE__*/ React.createElement(React.Fragment, null, children || /*#__PURE__*/ React.createElement(Button, {
         size: "small",
         type: "primary"
-    }, "上传文件"), Number(maxCount) > fileList.length && /*#__PURE__*/ React.createElement(Button, {
+    }, locale.uploader.list), Number(maxCount) > fileList.length && /*#__PURE__*/ React.createElement(Button, {
         className: "nut-uploader-input",
         onClick: _chooseImage
     }))), /*#__PURE__*/ React.createElement(Preview, {
@@ -390,12 +414,13 @@ var InternalUploader = function(props, ref) {
         onDeleteItem: onDeleteItem,
         handleItemClick: handleItemClick,
         previewUrl: previewUrl,
+        deleteIcon: deleteIcon,
         children: children
     }), Number(maxCount) > fileList.length && previewType === 'picture' && !children && /*#__PURE__*/ React.createElement(View, {
         className: "nut-uploader-upload ".concat(previewType, " ").concat(disabled ? 'nut-uploader-upload-disabled' : '')
     }, /*#__PURE__*/ React.createElement(View, {
         className: "nut-uploader-icon"
-    }, uploadIcon, /*#__PURE__*/ React.createElement("span", {
+    }, uploadIcon, /*#__PURE__*/ React.createElement(Text, {
         className: "nut-uploader-icon-tip"
     }, uploadLabel)), /*#__PURE__*/ React.createElement(Button, {
         className: "nut-uploader-input",

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

@@ -1,10 +1,10 @@
+import { _ as _call_super } from "@swc/helpers/_/_call_super";
 import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
 import { _ as _create_class } from "@swc/helpers/_/_create_class";
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _inherits } from "@swc/helpers/_/_inherits";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import { _ as _create_super } from "@swc/helpers/_/_create_super";
 export var UploadOptions = function UploadOptions() {
     "use strict";
     _class_call_check(this, UploadOptions);
@@ -99,20 +99,23 @@ export var Utils = /*#__PURE__*/ function() {
 export var UploaderTaro = /*#__PURE__*/ function(Utils) {
     "use strict";
     _inherits(UploaderTaro, Utils);
-    var _super = _create_super(UploaderTaro);
     function UploaderTaro(options) {
         _class_call_check(this, UploaderTaro);
-        return _super.call(this, options);
+        return _call_super(this, UploaderTaro, [
+            options
+        ]);
     }
     _create_class(UploaderTaro, [
         {
             key: "uploadTaro",
             value: function uploadTaro(uploadFile, env) {
                 var options = this.options;
+                if (options.beforeXhrUpload) {
+                    options.beforeXhrUpload(uploadFile, options);
+                    return;
+                }
                 if (env === 'WEB') {
                     this.upload();
-                } else if (options.beforeXhrUpload) {
-                    options.beforeXhrUpload(uploadFile, options);
                 } else {
                     var _options_onStart;
                     var uploadTask = uploadFile({

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

@@ -4,8 +4,8 @@
 .nut-horizontal-items li {
   display: block;
   float: left;
-  color: var(--nutui-gray-7, #1a1a1a);
-  background: var(--nutui-gray-1, #ffffff);
+  color: var(--nutui-color-title, #1a1a1a);
+  background: var(--nutui-color-background-overlay, #ffffff);
   padding: 10px;
   margin-right: 20px;
 }
@@ -18,8 +18,8 @@
 
 .nut-vertical-items li {
   display: block;
-  color: var(--nutui-gray-7, #1a1a1a);
-  background: var(--nutui-gray-1, #ffffff);
+  color: var(--nutui-color-title, #1a1a1a);
+  background: var(--nutui-color-background-overlay, #ffffff);
   border-radius: 7px;
   box-shadow: 0 1px 6px 0 rgb(237, 238, 241);
   margin-top: 20px;

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

@@ -27,6 +27,16 @@ export interface WaterMarkProps extends BasicComponent {
     */
     gapY: number
     /**
+    * 水印之间的水平起点
+    * @default 0
+    */
+    startX: number
+    /**
+    * 水印之间的垂直起点
+    * @default 0
+    */
+    startY: number
+    /**
     * 水印的宽度
     * @default 120
     */

package/dist/es/packages/watermark/watermark.js

@@ -16,6 +16,8 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     gapY: 48,
     width: 120,
     height: 64,
+    startX: 0,
+    startY: 0,
     image: '',
     imageWidth: 120,
     imageHeight: 64,
@@ -27,7 +29,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 export var WaterMark = function(props) {
     var locale = useConfig().locale;
-    var _$_object_spread = _object_spread({}, defaultProps, props), content = _$_object_spread.content, fullPage = _$_object_spread.fullPage, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, gapX = _$_object_spread.gapX, gapY = _$_object_spread.gapY, width = _$_object_spread.width, height = _$_object_spread.height, image = _$_object_spread.image, imageWidth = _$_object_spread.imageWidth, imageHeight = _$_object_spread.imageHeight, rotate = _$_object_spread.rotate, color = _$_object_spread.color, fontStyle = _$_object_spread.fontStyle, fontFamily = _$_object_spread.fontFamily, fontWeight = _$_object_spread.fontWeight, fontSize = _$_object_spread.fontSize, style = _$_object_spread.style;
+    var _$_object_spread = _object_spread({}, defaultProps, props), content = _$_object_spread.content, fullPage = _$_object_spread.fullPage, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, gapX = _$_object_spread.gapX, gapY = _$_object_spread.gapY, startX = _$_object_spread.startX, startY = _$_object_spread.startY, width = _$_object_spread.width, height = _$_object_spread.height, image = _$_object_spread.image, imageWidth = _$_object_spread.imageWidth, imageHeight = _$_object_spread.imageHeight, rotate = _$_object_spread.rotate, color = _$_object_spread.color, fontStyle = _$_object_spread.fontStyle, fontFamily = _$_object_spread.fontFamily, fontWeight = _$_object_spread.fontWeight, fontSize = _$_object_spread.fontSize, style = _$_object_spread.style;
     var _useState = _sliced_to_array(useState(''), 2), base64Url = _useState[0], setBase64Url = _useState[1];
     var classPrefix = 'nut-watermark';
     var classes = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-full-page"), fullPage));
@@ -87,7 +89,7 @@ export var WaterMark = function(props) {
                     var markSize = Number(fontSize) * ratio;
                     ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
                     ctx.fillStyle = color;
-                    ctx.fillText(content, 0, 0) // 在画布上绘制"被填充的"文本。
+                    ctx.fillText(content, startX, startY) // 在画布上绘制"被填充的"文本。
                     ;
                     ctx.restore() // 返回之前保存过的路径状态和属性。
                     ;

package/dist/es/utils/get-rect-by-taro.js

@@ -14,7 +14,7 @@ export function makeRect(width, height) {
         height: height
     };
 }
-export var getRectByTaro = function() {
+export var getRectByTaro = /*#__PURE__*/ function() {
     var _ref = _async_to_generator(function(element) {
         return _ts_generator(this, function(_state) {
             if (element) {

package/dist/es/utils/get-scroll-parent.d.ts

@@ -1,4 +1,4 @@
 type ScrollElement = HTMLElement | Window;
-export declare function getScrollParent(el: Element, root?: ScrollElement | null | undefined): Window | Element | null | undefined;
+export declare function getScrollParent(el: Element | null | undefined, root?: ScrollElement | null | undefined): Window | Element | null | undefined;
 export declare function getAllScrollableParents(element: Element | null, scrollableParents?: Element[]): Element[];
 export {};

package/dist/es/utils/merge-props.d.ts

@@ -1,5 +1,9 @@
-export declare function mergeProps<T, U>(defaultProps: T, props: U): {
-    [Key in Extract<keyof T, keyof U>]: U[Key];
-} & {
-    [Key in Exclude<keyof U, keyof T>]?: U[Key];
-};
+export declare function mergeProps<A, B>(a: A, b: B): B & A;
+export declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
+export declare function mergeProps<A, B, C, D>(a: A, b: B, c: C, d: D): D & C & B & A;
+/**
+ * Merge props and return the first non-undefined value.
+ * The later has higher priority. e.g. (10, 1, 5) => 5 wins.
+ * This is useful with legacy props that have been deprecated.
+ */
+export declare function mergeProp<T, DefaultT extends T = T>(defaultProp: DefaultT, ...propList: T[]): T | undefined;

package/dist/es/utils/merge-props.js

@@ -1,4 +1,31 @@
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-export function mergeProps(defaultProps, props) {
-    return _object_spread({}, defaultProps, props);
+export function mergeProps() {
+    for(var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++){
+        items[_key] = arguments[_key];
+    }
+    var ret = {};
+    items.forEach(function(item) {
+        if (item) {
+            Object.keys(item).forEach(function(key) {
+                if (item[key] !== undefined) {
+                    ret[key] = item[key];
+                }
+            });
+        }
+    });
+    return ret;
+}
+/**
+ * Merge props and return the first non-undefined value.
+ * The later has higher priority. e.g. (10, 1, 5) => 5 wins.
+ * This is useful with legacy props that have been deprecated.
+ */ export function mergeProp(defaultProp) {
+    for(var _len = arguments.length, propList = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
+        propList[_key - 1] = arguments[_key];
+    }
+    for(var i = propList.length - 1; i >= 0; i -= 1){
+        if (propList[i] !== undefined) {
+            return propList[i];
+        }
+    }
+    return defaultProp;
 }

package/dist/es/utils/raf.js

@@ -1,7 +1,7 @@
 export var inBrowser = typeof window !== 'undefined';
 // 防频
 function requestAniFrame() {
-    if (typeof window !== 'undefined') {
+    if (inBrowser) {
         var _window = window;
         return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
             _window.setTimeout(callback, 1000 / 60);
@@ -13,7 +13,8 @@ function requestAniFrame() {
 }
 export function cancelRaf(id) {
     if (inBrowser) {
-        cancelAnimationFrame(id);
+        var _window = window;
+        (_window.cancelAnimationFrame || _window.webkitCancelAnimationFrame)(id);
     } else {
         clearTimeout(id);
     }

package/dist/es/utils/typings.d.ts

@@ -9,3 +9,4 @@ export declare const ComponentDefaults: {
     className: string;
     style: {};
 };
+export type Timeout = ReturnType<typeof setTimeout>;

package/dist/es/utils/use-client-rect.d.ts

@@ -9,4 +9,4 @@ export declare function isWindow(val: unknown): val is Window;
   right	右侧与视图窗口左上角的距离	number
   bottom	底部与视图窗口左上角的距离	number
  */
-export declare const getRect: (elementRef: Element | Window | undefined) => any;
+export declare const getRect: (elementRef: HTMLElement | Element | Window | undefined | null) => any;