@nutui/nutui-react-taro 1.4.9-beta.0 → 1.4.9-beta.2

package/dist/esm/{uploader.taro-c830b573.js → uploader.taro-77396b5d.js}

@@ -1,11 +1,13 @@
 import React__default, { useState, useEffect, useImperativeHandle } from 'react';
 import classNames from 'classnames';
-import { uploadFile, getEnv, chooseImage } from '@tarojs/taro';
+import Taro, { uploadFile, getEnv, chooseMedia, chooseImage } from '@tarojs/taro';
 import { I as Icon } from './icon.taro-c9254a81.js';
 import { B as Button } from './button.taro-dc4795a3.js';
 import { P as Progress } from './progress.taro-773482ed.js';
+import { Image } from '@tarojs/components';
 import { c as cn } from './bem-893ad28d.js';
 import { u as useConfig } from './configprovider.taro-26882dd2.js';
+import { i as isPromise } from './index-a90733f9.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
 
 class UploadOptions {
@@ -67,59 +69,93 @@ class Upload {
             console.warn('浏览器不支持 XMLHttpRequest');
         }
     }
+}
+class UploaderTaro extends Upload {
+    constructor(options) {
+        super(options);
+    }
     uploadTaro(uploadFile, env) {
         const options = this.options;
         if (env === 'WEB') {
             this.upload();
         }
-        else if (options.beforeXhrUpload) {
-            options.beforeXhrUpload(uploadFile, options);
-        }
         else {
-            const uploadTask = uploadFile({
-                url: options.url,
-                filePath: options.taroFilePath,
-                fileType: options.fileType,
-                header: {
-                    'Content-Type': 'multipart/form-data',
-                    ...options.headers,
-                },
-                formData: options.formData,
-                name: options.name,
-                success(response) {
-                    if (options.xhrState == response.statusCode) {
-                        options.onSuccess?.(response, options);
-                    }
-                    else {
-                        options.onFailure?.(response, options);
-                    }
-                },
-                fail(e) {
-                    options.onFailure?.(e, options);
-                },
-            });
-            options.onStart?.(options);
-            uploadTask.progress((res) => {
-                options.onProgress?.(res, options);
-                // console.log('上传进度', res.progress);
-                // console.log('已经上传的数据长度', res.totalBytesSent);
-                // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
-            });
-            // uploadTask.abort(); // 取消上传任务
+            if (options.beforeXhrUpload) {
+                options.beforeXhrUpload(uploadFile, options);
+            }
+            else {
+                const uploadTask = uploadFile({
+                    url: options.url,
+                    filePath: options.taroFilePath,
+                    fileType: options.fileType,
+                    header: {
+                        'Content-Type': 'multipart/form-data',
+                        ...options.headers,
+                    },
+                    formData: options.formData,
+                    name: options.name,
+                    success(response) {
+                        if (options.xhrState == response.statusCode) {
+                            options.onSuccess?.(response, options);
+                        }
+                        else {
+                            options.onFailure?.(response, options);
+                        }
+                    },
+                    fail(e) {
+                        options.onFailure?.(e, options);
+                    },
+                });
+                options.onStart?.(options);
+                uploadTask.progress((res) => {
+                    options.onProgress?.(res, options);
+                });
+            }
         }
     }
 }
 
+const funcInterceptor = (interceptor, { args = [], done, canceled, }) => {
+    if (interceptor) {
+        const returnVal = interceptor.apply(null, args);
+        if (isPromise(returnVal)) {
+            returnVal
+                .then((value) => {
+                if (value) {
+                    done(value);
+                }
+                else if (canceled) {
+                    canceled();
+                }
+            })
+                .catch(() => { });
+        }
+        else if (returnVal) {
+            done();
+        }
+        else if (canceled) {
+            canceled();
+        }
+    }
+    else {
+        done();
+    }
+};
+
 const defaultProps = {
     ...ComponentDefaults,
     url: '',
-    maximum: 9,
+    maximum: 1,
     sizeType: ['original', 'compressed'],
     sourceType: ['album', 'camera'],
+    mediaType: ['image', 'video'],
+    camera: 'back',
     uploadIcon: 'photograph',
     uploadIconSize: '',
+    uploadIconTip: '',
     listType: 'picture',
     name: 'file',
+    accept: '*',
     disabled: false,
     autoUpload: true,
     multiple: false,
@@ -132,6 +168,7 @@ const defaultProps = {
     timeout: 1000 * 30,
     isPreview: true,
     isDeletable: true,
+    maxDuration: 10,
     onBeforeDelete: (file, files) => {
         return true;
     },
@@ -149,7 +186,7 @@ class FileItem {
 }
 const InternalUploader = (props, ref) => {
     const { locale } = useConfig();
-    const { children, uploadIcon, uploadIconSize, name, defaultFileList, listType, disabled, url, defaultImg, headers, timeout, method, xhrState, data, isPreview, isDeletable, maximum, maximize, multiple, className, autoUpload, sizeType, sourceType, onStart, onRemove, onChange, onFileItemClick, onProgress, onSuccess, onUpdate, onFailure, onOversize, onBeforeUpload, onBeforeXhrUpload, onBeforeDelete, ...restProps } = { ...defaultProps, ...props };
+    const { children, uploadIcon, uploadIconSize, uploadIconTip, accept, name, camera, defaultFileList, listType, disabled, multiple, url, defaultImg, headers, timeout, method, xhrState, data, isPreview, isDeletable, maximum, maximize, mediaType, className, autoUpload, sizeType, sourceType, maxDuration, iconClassPrefix, iconFontClassName, onStart, onRemove, onChange, onFileItemClick, onProgress, onSuccess, onUpdate, onFailure, onOversize, onBeforeXhrUpload, onBeforeDelete, ...restProps } = { ...defaultProps, ...props };
     const [fileList, setFileList] = useState([]);
     const [uploadQueue, setUploadQueue] = useState([]);
     useEffect(() => {
@@ -165,6 +202,9 @@ const InternalUploader = (props, ref) => {
                 res.forEach((i) => i.uploadTaro(uploadFile, getEnv()));
             });
         },
+        clear: () => {
+            clearUploadQueue();
+        },
     }));
     const clearUploadQueue = (index = -1) => {
         if (index > -1) {
@@ -173,20 +213,64 @@ const InternalUploader = (props, ref) => {
         }
         else {
             setUploadQueue([]);
+            fileList.splice(0, fileList.length);
+            setFileList([...fileList]);
         }
     };
     const _chooseImage = () => {
         if (disabled) {
             return;
         }
-        chooseImage({
-            // 选择数量
-            count: multiple ? maximum * 1 - fileList.length : 1,
-            // 可以指定是原图还是压缩图，默认二者都有
-            sizeType,
-            sourceType,
-            success: onChangeFn,
-        });
+        if (Taro.getEnv() == 'WEB') {
+            let el = document.getElementById('taroChooseImage');
+            if (el) {
+                el?.setAttribute('accept', accept);
+            }
+            else {
+                const obj = document.createElement('input');
+                obj.setAttribute('type', 'file');
+                obj.setAttribute('id', 'taroChooseImage');
+                obj.setAttribute('accept', accept);
+                obj.setAttribute('style', 'position: fixed; top: -4000px; left: -3000px; z-index: -300;');
+                document.body.appendChild(obj);
+            }
+        }
+        if (getEnv() == 'WEAPP') {
+            // chooseMedia 目前只支持微信小程序原生，其余端全部使用 chooseImage API
+            chooseMedia({
+                /** 最多可以选择的文件个数 */
+                count: multiple ? maximum * 1 - fileList.length : 1,
+                /** 文件类型 */
+                mediaType: mediaType,
+                /** 图片和视频选择的来源 */
+                sourceType: sourceType,
+                /** 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间 */
+                maxDuration: maxDuration,
+                /** 仅对 mediaType 为 image 时有效，是否压缩所选文件 */
+                sizeType: [],
+                /** 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头 */
+                camera: camera,
+                /** 接口调用失败的回调函数 */
+                fail: (res) => {
+                    onFailure && onFailure(res);
+                },
+                /** 接口调用成功的回调函数 */
+                success: onChangeMedia,
+            });
+        }
+        else {
+            chooseImage({
+                // 选择数量
+                count: multiple ? maximum * 1 - fileList.length : 1,
+                // 可以指定是原图还是压缩图，默认二者都有
+                sizeType,
+                sourceType,
+                success: onChangeImage,
+                fail: (res) => {
+                    onFailure && onFailure(res);
+                },
+            });
+        }
     };
     const executeUpload = (fileItem, index) => {
         const uploadOption = new UploadOptions();
@@ -241,6 +325,7 @@ const InternalUploader = (props, ref) => {
                 onSuccess({
                     responseText,
                     option,
+                    fileList,
                 });
         };
         uploadOption.onFailure = (responseText, option) => {
@@ -257,9 +342,10 @@ const InternalUploader = (props, ref) => {
                 onFailure({
                     responseText,
                     option,
+                    fileList,
                 });
         };
-        const task = new Upload(uploadOption);
+        const task = new UploaderTaro(uploadOption);
         if (props.autoUpload) {
             task.uploadTaro(uploadFile, getEnv());
         }
@@ -271,19 +357,30 @@ const InternalUploader = (props, ref) => {
         }
     };
     const readFile = (files) => {
-        const imgReg = /\.(png|jpeg|jpg|webp|gif)$/i;
         files.forEach((file, index) => {
-            console.log('file', file);
             let fileType = file.type;
+            let filepath = (file.tempFilePath || file.path);
             const fileItem = new FileItem();
-            if (!fileType && imgReg.test(file.path)) {
-                fileType = 'image';
+            if (file.fileType) {
+                fileType = file.fileType;
+            }
+            else {
+                const imgReg = /\.(png|jpeg|jpg|webp|gif)$/i;
+                if (!fileType &&
+                    (imgReg.test(filepath) || filepath.includes('data:image'))) {
+                    fileType = 'image';
+                }
             }
-            fileItem.path = file.path;
-            fileItem.name = file.path;
+            fileItem.path = filepath;
+            fileItem.name = filepath;
             fileItem.status = 'ready';
-            fileItem.message = locale.uploader.readyUpload;
             fileItem.type = fileType;
+            if (autoUpload) {
+                fileItem.message = locale.uploader.readyUpload;
+            }
+            else {
+                fileItem.message = locale.uploader.waitingUpload;
+            }
             if (getEnv() === 'WEB') {
                 const formData = new FormData();
                 for (const [key, value] of Object.entries(data)) {
@@ -298,7 +395,7 @@ const InternalUploader = (props, ref) => {
                 fileItem.formData = data;
             }
             if (isPreview) {
-                fileItem.url = file.path;
+                fileItem.url = fileType == 'video' ? file.thumbTempFilePath : filepath;
             }
             fileList.push(fileItem);
             setFileList([...fileList]);
@@ -325,30 +422,30 @@ const InternalUploader = (props, ref) => {
         }
         return filterFile;
     };
+    const deleted = (file, index) => {
+        fileList.splice(index, 1);
+        onRemove && onRemove(file, fileList);
+        setFileList([...fileList]);
+    };
     const onDelete = (file, index) => {
         clearUploadQueue(index);
-        if (onBeforeDelete && onBeforeDelete(file, fileList)) {
-            fileList.splice(index, 1);
-            onRemove && onRemove(file, fileList);
-            setFileList([...fileList]);
-        }
-        else {
-            console.log(locale.uploader.deleteWord);
-        }
+        funcInterceptor(onBeforeDelete, {
+            args: [file, fileList],
+            done: () => deleted(file, index),
+        });
     };
-    const onChangeFn = (res) => {
+    const onChangeMedia = (res) => {
         // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
         const { tempFiles } = res;
-        if (onBeforeUpload) {
-            onBeforeUpload(tempFiles).then((f) => {
-                const _files = filterFiles(f);
-                readFile(_files);
-            });
-        }
-        else {
-            const _files = filterFiles(tempFiles);
-            readFile(_files);
-        }
+        const _files = filterFiles(tempFiles);
+        readFile(_files);
+        onChange && onChange({ fileList });
+    };
+    const onChangeImage = (res) => {
+        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+        const { tempFiles } = res;
+        const _files = filterFiles(tempFiles);
+        readFile(_files);
         onChange && onChange({ fileList });
     };
     const handleItemClick = (file) => {
@@ -363,27 +460,32 @@ const InternalUploader = (props, ref) => {
             fileList.map((item, index) => {
                 return (React__default.createElement("div", { className: `nut-uploader__preview ${listType}`, key: item.uid },
                     listType === 'picture' && !children && (React__default.createElement("div", { className: "nut-uploader__preview-img" },
+                        isDeletable && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, color: "rgba(0,0,0,0.6)", className: "close", name: "failure", onClick: () => onDelete(item, index) })),
                         item.status === 'ready' ? (React__default.createElement("div", { className: "nut-uploader__preview__progress" },
                             React__default.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message))) : (item.status !== 'success' && (React__default.createElement("div", { className: "nut-uploader__preview__progress" },
-                            React__default.createElement(Icon, { classPrefix: props.iconClassPrefix, fontClassName: props.iconFontClassName, color: "#fff", name: `${item.status === 'error' ? 'failure' : 'loading'}` }),
+                            item.failIcon === ' ' ||
+                                item.loadingIcon === ' ' ? null : (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, color: "#fff", name: `${item.status === 'error'
+                                    ? `${item.failIcon || 'failure'}`
+                                    : `${item.loadingIcon || 'loading'}`}` })),
                             React__default.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)))),
-                        isDeletable && (React__default.createElement(Icon, { classPrefix: props.iconClassPrefix, fontClassName: props.iconFontClassName, color: "rgba(0,0,0,0.6)", className: "close", name: "failure", onClick: () => onDelete(item, index) })),
-                        item.type.includes('image') ? (React__default.createElement(React__default.Fragment, null, item.url && (React__default.createElement("img", { className: "nut-uploader__preview-img__c", src: item.url, alt: "", onClick: () => handleItemClick(item) })))) : (React__default.createElement(React__default.Fragment, null, defaultImg ? (React__default.createElement("img", { className: "nut-uploader__preview-img__c", src: defaultImg, alt: "", onClick: () => handleItemClick(item) })) : (React__default.createElement("div", { className: "nut-uploader__preview-img__file" },
+                        item.type.includes('image') ? (React__default.createElement(React__default.Fragment, null, item.url && (React__default.createElement(Image, { className: "nut-uploader__preview-img__c", mode: "aspectFit", src: item.url, onClick: () => handleItemClick(item) })))) : (React__default.createElement(React__default.Fragment, null, defaultImg ? (React__default.createElement(Image, { className: "nut-uploader__preview-img__c", mode: "aspectFit", src: defaultImg, onClick: () => handleItemClick(item) })) : (React__default.createElement("div", { className: "nut-uploader__preview-img__file" },
                             React__default.createElement("div", { onClick: () => handleItemClick(item), className: "nut-uploader__preview-img__file__name" },
-                                React__default.createElement(Icon, { classPrefix: props.iconClassPrefix, fontClassName: props.iconFontClassName, color: "#808080", name: "link" }),
+                                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, color: "#808080", name: "link" }),
                                 "\u00A0",
                                 item.name))))),
-                        React__default.createElement("div", { className: "tips" }, item.name))),
+                        item.status === 'success' ? (React__default.createElement("div", { className: "tips" }, item.name)) : null)),
                     listType === 'list' && (React__default.createElement("div", { className: "nut-uploader__preview-list" },
                         React__default.createElement("div", { className: `nut-uploader__preview-img__file__name ${item.status}`, onClick: () => handleItemClick(item) },
-                            React__default.createElement(Icon, { classPrefix: props.iconClassPrefix, fontClassName: props.iconFontClassName, name: "link" }),
+                            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "link" }),
                             "\u00A0",
                             item.name),
-                        isDeletable && (React__default.createElement(Icon, { classPrefix: props.iconClassPrefix, fontClassName: props.iconFontClassName, color: "#808080", className: "nut-uploader__preview-img__file__del", name: "del", onClick: () => onDelete(item, index) })),
+                        isDeletable && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, color: "#808080", className: "nut-uploader__preview-img__file__del", name: "del", onClick: () => onDelete(item, index) })),
                         item.status === 'uploading' && (React__default.createElement(Progress, { size: "small", percentage: item.percentage, strokeColor: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)", showText: false }))))));
             }),
-        maximum > fileList.length && listType === 'picture' && !children && (React__default.createElement("div", { className: `nut-uploader__upload ${listType}` },
-            React__default.createElement(Icon, { classPrefix: props.iconClassPrefix, fontClassName: props.iconFontClassName, size: uploadIconSize, color: "#808080", name: uploadIcon }),
+        maximum > fileList.length && listType === 'picture' && !children && (React__default.createElement("div", { className: `nut-uploader__upload ${listType} ${disabled ? 'nut-uploader__upload-disabled' : ''}` },
+            React__default.createElement("div", { className: "nut-uploader__icon" },
+                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, size: uploadIconSize, color: "#808080", name: uploadIcon }),
+                React__default.createElement("span", { className: "nut-uploader__icon-tip" }, uploadIconTip)),
             React__default.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage })))));
 };
 const Uploader = React__default.forwardRef(InternalUploader);

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.4.9-beta.0 Fri Feb 24 2023 14:01:26 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.9 Wed Mar 01 2023 15:41:50 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.4.9-beta.0 Fri Feb 24 2023 14:01:26 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.9 Wed Mar 01 2023 15:41:50 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.4.9-beta.0 Fri Feb 24 2023 14:01:26 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.9 Wed Mar 01 2023 15:41:50 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.4.9-beta.0 Fri Feb 24 2023 14:01:26 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.9 Wed Mar 01 2023 15:41:50 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.4.9-beta.0 Fri Feb 24 2023 14:01:26 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.9 Wed Mar 01 2023 15:41:50 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.4.9-beta.0 Fri Feb 24 2023 14:01:26 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.9 Wed Mar 01 2023 15:41:50 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */