@nutui/nutui-react-taro 1.5.2 → 1.5.3-beta.0

package/dist/esm/uploader.taro-587e6bf3.js

@@ -0,0 +1,492 @@
+import React__default, { useState, useEffect, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import Taro, { uploadFile, getEnv, chooseMedia, chooseImage } from '@tarojs/taro';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { B as Button } from './button.taro-9244d065.js';
+import { P as Progress } from './progress.taro-f0ce38e9.js';
+import { Image } from '@tarojs/components';
+import { c as cn } from './bem-350c1702.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { i as isPromise } from './index-5bcb0ff8.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+class UploadOptions {
+    url = '';
+    name = 'file';
+    fileType = 'image';
+    formData;
+    sourceFile;
+    method = 'post';
+    xhrState = 200;
+    timeout = 30 * 1000;
+    headers = {};
+    withCredentials = false;
+    onStart;
+    taroFilePath;
+    onProgress;
+    onSuccess;
+    onFailure;
+    beforeXhrUpload;
+}
+class Upload {
+    options;
+    constructor(options) {
+        this.options = options;
+    }
+    upload() {
+        const { options } = this;
+        const xhr = new XMLHttpRequest();
+        xhr.timeout = options.timeout;
+        if (xhr.upload) {
+            xhr.upload.addEventListener('progress', (e) => {
+                options.onProgress?.(e, options);
+            }, false);
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === 4) {
+                    if (xhr.status === options.xhrState) {
+                        options.onSuccess?.(xhr.responseText, options);
+                    }
+                    else {
+                        options.onFailure?.(xhr.responseText, options);
+                    }
+                }
+            };
+            xhr.withCredentials = options.withCredentials;
+            xhr.open(options.method, options.url, true);
+            // headers
+            for (const [key, value] of Object.entries(options.headers)) {
+                xhr.setRequestHeader(key, value);
+            }
+            options.onStart?.(options);
+            if (options.beforeXhrUpload) {
+                options.beforeXhrUpload(xhr, options);
+            }
+            else {
+                xhr.send(options.formData);
+            }
+        }
+        else {
+            console.warn('浏览器不支持 XMLHttpRequest');
+        }
+    }
+}
+class UploaderTaro extends Upload {
+    constructor(options) {
+        super(options);
+    }
+    uploadTaro(uploadFile, env) {
+        const options = this.options;
+        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: 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,
+    maximize: Number.MAX_VALUE,
+    data: {},
+    headers: {},
+    method: 'post',
+    defaultImg: '',
+    xhrState: 200,
+    timeout: 1000 * 30,
+    isPreview: true,
+    isDeletable: true,
+    maxDuration: 10,
+    onBeforeDelete: (file, files) => {
+        return true;
+    },
+};
+class FileItem {
+    status = 'ready';
+    message = '准备中..';
+    uid = new Date().getTime().toString();
+    name;
+    url;
+    type;
+    path;
+    percentage = 0;
+    formData = {};
+}
+const InternalUploader = (props, ref) => {
+    const { locale } = useConfig();
+    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(() => {
+        if (defaultFileList) {
+            setFileList(defaultFileList);
+        }
+    }, [defaultFileList]);
+    const b = cn('uploader');
+    const classes = classNames(className, b(''));
+    useImperativeHandle(ref, () => ({
+        submit: () => {
+            Promise.all(uploadQueue).then((res) => {
+                res.forEach((i) => i.uploadTaro(uploadFile, getEnv()));
+            });
+        },
+        clear: () => {
+            clearUploadQueue();
+        },
+    }));
+    const clearUploadQueue = (index = -1) => {
+        if (index > -1) {
+            uploadQueue.splice(index, 1);
+            setUploadQueue(uploadQueue);
+        }
+        else {
+            setUploadQueue([]);
+            fileList.splice(0, fileList.length);
+            setFileList([...fileList]);
+        }
+    };
+    const _chooseImage = () => {
+        if (disabled) {
+            return;
+        }
+        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();
+        uploadOption.name = name;
+        uploadOption.url = url;
+        uploadOption.fileType = fileItem.type;
+        uploadOption.formData = fileItem.formData;
+        uploadOption.timeout = timeout * 1;
+        uploadOption.method = method;
+        uploadOption.xhrState = xhrState;
+        uploadOption.headers = headers;
+        uploadOption.taroFilePath = fileItem.path;
+        uploadOption.beforeXhrUpload = onBeforeXhrUpload;
+        uploadOption.onStart = (option) => {
+            clearUploadQueue(index);
+            setFileList((fileList) => {
+                fileList.map((item) => {
+                    if (item.uid === fileItem.uid) {
+                        item.status = 'ready';
+                        item.message = locale.uploader.readyUpload;
+                    }
+                });
+                return [...fileList];
+            });
+            onStart && onStart(option);
+        };
+        uploadOption.onProgress = (e, option) => {
+            setFileList((fileList) => {
+                fileList.map((item) => {
+                    if (item.uid === fileItem.uid) {
+                        item.status = 'uploading';
+                        item.message = locale.uploader.uploading;
+                        item.percentage = e.progress;
+                        onProgress && onProgress({ e, option, percentage: item.percentage });
+                    }
+                });
+                return [...fileList];
+            });
+        };
+        uploadOption.onSuccess = (responseText, option) => {
+            setFileList((fileList) => {
+                onUpdate && onUpdate(fileList);
+                fileList.map((item) => {
+                    if (item.uid === fileItem.uid) {
+                        item.status = 'success';
+                        item.message = locale.uploader.success;
+                    }
+                });
+                return [...fileList];
+            });
+            onSuccess &&
+                onSuccess({
+                    responseText,
+                    option,
+                    fileList,
+                    file: fileItem,
+                });
+        };
+        uploadOption.onFailure = (responseText, option) => {
+            setFileList((fileList) => {
+                fileList.map((item) => {
+                    if (item.uid === fileItem.uid) {
+                        item.status = 'error';
+                        item.message = locale.uploader.error;
+                    }
+                });
+                return [...fileList];
+            });
+            onFailure &&
+                onFailure({
+                    responseText,
+                    option,
+                    fileList,
+                    file: fileItem,
+                });
+        };
+        const task = new UploaderTaro(uploadOption);
+        if (props.autoUpload) {
+            task.uploadTaro(uploadFile, getEnv());
+        }
+        else {
+            uploadQueue.push(new Promise((resolve, reject) => {
+                resolve(task);
+            }));
+            setUploadQueue(uploadQueue);
+        }
+    };
+    const readFile = (files) => {
+        files.forEach((file, index) => {
+            let fileType = file.type;
+            let filepath = (file.tempFilePath || file.path);
+            const fileItem = new FileItem();
+            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 = filepath;
+            fileItem.name = filepath;
+            fileItem.status = 'ready';
+            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)) {
+                    formData.append(key, value);
+                }
+                formData.append(name, file.originalFileObj);
+                fileItem.name = file.originalFileObj?.name;
+                fileItem.type = file.originalFileObj?.type;
+                fileItem.formData = formData;
+            }
+            else {
+                fileItem.formData = data;
+            }
+            if (isPreview) {
+                fileItem.url = fileType == 'video' ? file.thumbTempFilePath : filepath;
+            }
+            fileList.push(fileItem);
+            setFileList([...fileList]);
+            executeUpload(fileItem, index);
+        });
+    };
+    const filterFiles = (files) => {
+        const maximum = props.maximum * 1;
+        const maximize = props.maximize * 1;
+        const oversizes = new Array();
+        const filterFile = files.filter((file) => {
+            if (file.size > maximize) {
+                oversizes.push(file);
+                return false;
+            }
+            return true;
+        });
+        if (oversizes.length) {
+            onOversize && onOversize(files);
+        }
+        const currentFileLength = filterFile.length + fileList.length;
+        if (currentFileLength > maximum) {
+            filterFile.splice(filterFile.length - (currentFileLength - maximum));
+        }
+        return filterFile;
+    };
+    const deleted = (file, index) => {
+        fileList.splice(index, 1);
+        onRemove && onRemove(file, fileList);
+        setFileList([...fileList]);
+    };
+    const onDelete = (file, index) => {
+        clearUploadQueue(index);
+        funcInterceptor(onBeforeDelete, {
+            args: [file, fileList],
+            done: () => deleted(file, index),
+        });
+    };
+    const onChangeMedia = (res) => {
+        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+        const { tempFiles } = res;
+        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) => {
+        onFileItemClick && onFileItemClick(file);
+    };
+    return (React__default.createElement("div", { className: classes, ...restProps },
+        children && (React__default.createElement("div", { className: "nut-uploader__slot" },
+            React__default.createElement(React__default.Fragment, null,
+                children,
+                maximum > fileList.length && (React__default.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage }))))),
+        fileList.length !== 0 &&
+            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" },
+                            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)))),
+                        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: iconClassPrefix, fontClassName: iconFontClassName, color: "#808080", name: "link" }),
+                                "\u00A0",
+                                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: iconClassPrefix, fontClassName: iconFontClassName, name: "link" }),
+                            "\u00A0",
+                            item.name),
+                        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} ${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);
+Uploader.defaultProps = defaultProps;
+Uploader.displayName = 'NutUploader';
+
+export { Uploader as U };

package/dist/esm/useClientRect-1f8ed1fe.js

@@ -0,0 +1,18 @@
+/**
+  获取元素的大小及其相对于视口的位置，等价于 Element.getBoundingClientRect。
+  width 宽度	number
+  height 高度	number
+  top	顶部与视图窗口左上角的距离	number
+  left	左侧与视图窗口左上角的距离	number
+  right	右侧与视图窗口左上角的距离	number
+  bottom	底部与视图窗口左上角的距离	number
+ */
+const getRectByTaro = async (element) => {
+    if (element) {
+        const res = await element.getBoundingClientRect();
+        return res;
+    }
+    return Promise.resolve({});
+};
+
+export { getRectByTaro as g };

package/dist/esm/useTouch-db24bb5c.js

@@ -0,0 +1,69 @@
+import { useState } from 'react';
+
+const MIN_DISTANCE = 10;
+function getDirection(x, y) {
+    if (x > y && x > MIN_DISTANCE) {
+        return 'horizontal';
+    }
+    if (y > x && y > MIN_DISTANCE) {
+        return 'vertical';
+    }
+    return '';
+}
+function useTouch() {
+    const [startX, SetStartX] = useState(0);
+    const [startY, SetStartY] = useState(0);
+    const [moveX, SetMoveX] = useState(0);
+    const [moveY, SetMoveY] = useState(0);
+    const [deltaX, SetDeltaX] = useState(0);
+    const [deltaY, SetDeltaY] = useState(0);
+    const [offsetX, SetOffsetX] = useState(0);
+    const [offsetY, SetOffsetY] = useState(0);
+    const [direction, SetDirection] = useState('');
+    const isVertical = () => direction === 'vertical';
+    const isHorizontal = () => direction === 'horizontal';
+    const reset = () => {
+        SetDeltaX(0);
+        SetDeltaY(0);
+        SetOffsetX(0);
+        SetOffsetY(0);
+        SetDirection('');
+    };
+    const start = ((event) => {
+        reset();
+        SetStartX(event.touches[0].clientX);
+        SetStartY(event.touches[0].clientY);
+    });
+    const move = ((event) => {
+        const touch = event.touches[0];
+        const dX = touch.clientX - startX;
+        const dY = touch.clientY - startY;
+        SetDeltaX(dX);
+        SetDeltaY(dY);
+        SetMoveX(touch.clientX);
+        SetMoveY(touch.clientY);
+        SetOffsetX(Math.abs(dX));
+        SetOffsetY(Math.abs(dY));
+        if (!direction) {
+            SetDirection(getDirection(offsetX, offsetY));
+        }
+    });
+    return {
+        move,
+        start,
+        reset,
+        startX,
+        startY,
+        moveX,
+        moveY,
+        deltaX,
+        deltaY,
+        offsetX,
+        offsetY,
+        direction,
+        isVertical,
+        isHorizontal,
+    };
+}
+
+export { useTouch as u };

package/dist/esm/video-f1be8a91.js

@@ -0,0 +1,67 @@
+import React__default, { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    source: {
+        type: {},
+        src: '',
+    },
+    options: {
+        controls: true,
+        muted: false,
+        autoplay: false,
+        poster: '',
+        playsinline: false,
+        loop: false,
+    },
+};
+const Video = (props) => {
+    const { children, source, options, className, play, pause, playend, onPlayFuc, onPauseFuc, onPlayend, ...restProps } = {
+        ...defaultProps,
+        ...props,
+    };
+    const rootRef = useRef(null);
+    const b = cn('video');
+    const classes = classNames(className, b(''));
+    useEffect(() => {
+        init();
+    }, []);
+    const init = () => {
+        if (rootRef.current) {
+            const videoRef = rootRef.current;
+            if (options.autoplay) {
+                setTimeout(() => {
+                    videoRef.play();
+                }, 200);
+            }
+            if (options.playsinline) {
+                videoRef.setAttribute('playsinline', String(options.playsinline));
+                videoRef.setAttribute('webkit-playsinline', String(options.playsinline));
+                videoRef.setAttribute('x5-video-player-type', 'h5-page');
+                videoRef.setAttribute('x5-video-player-fullscreen', 'false');
+            }
+            videoRef.addEventListener('play', () => {
+                onPlayFuc && onPlayFuc(videoRef);
+                play && play(videoRef);
+            });
+            videoRef.addEventListener('pause', () => {
+                onPauseFuc && onPauseFuc(videoRef);
+                pause && pause(videoRef);
+            });
+            videoRef.addEventListener('ended', () => {
+                videoRef.currentTime = 0;
+                onPlayend && onPlayend(videoRef);
+                playend && playend(videoRef);
+            });
+        }
+    };
+    return (React__default.createElement("div", { className: classes, ...restProps },
+        React__default.createElement("video", { className: "nut-video-player", muted: options.muted, autoPlay: options.autoplay, loop: options.loop, poster: options.poster, controls: options.controls, ref: rootRef, src: source.src },
+            React__default.createElement("source", { src: source.src, type: source.type }),
+            React__default.createElement("track", { kind: "captions" }))));
+};
+Video.defaultProps = defaultProps;
+Video.displayName = 'NutVideo';
+
+export { Video as V };