@nutui/nutui-react-taro 2.0.0-alpha.5 → 2.0.0-alpha.7

package/dist/esm/uploader.taro-c70d00de.js

@@ -1,494 +0,0 @@
-import React, { useState, useEffect, useImperativeHandle } from 'react';
-import classNames from 'classnames';
-import Taro, { uploadFile, getEnv, chooseMedia, chooseImage } from '@tarojs/taro';
-import { Failure, Loading, Link, Del, Photograph } from '@nutui/icons-react-taro';
-import { Image } from '@tarojs/components';
-import { B as Button } from './button.taro-b50bc217.js';
-import { P as Progress } from './progress.taro-1a7ac8a4.js';
-import { u as useConfig } from './configprovider.taro-ce34d482.js';
-import { i as isPromise } from './index-5bcb0ff8.js';
-import { C as ComponentDefaults } from './typings-d8491423.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 (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);
-                });
-            }
-        }
-    }
-}
-
-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: '',
-    maxCount: 1,
-    sizeType: ['original', 'compressed'],
-    sourceType: ['album', 'camera'],
-    mediaType: ['image', 'video'],
-    camera: 'back',
-    uploadIcon: null,
-    uploadLabel: '',
-    previewType: 'picture',
-    imageFit: 'cover',
-    name: 'file',
-    accept: '*',
-    disabled: false,
-    autoUpload: true,
-    multiple: false,
-    maxFileSize: Number.MAX_VALUE,
-    data: {},
-    headers: {},
-    method: 'post',
-    previewUrl: '',
-    xhrState: 200,
-    timeout: 1000 * 30,
-    preview: true,
-    deletable: true,
-    maxDuration: 10,
-    beforeDelete: (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, uploadLabel, accept, name, camera, defaultValue, value, previewType, imageFit, disabled, multiple, url, previewUrl, headers, timeout, method, xhrState, data, preview, deletable, maxCount, maxFileSize, mediaType, className, autoUpload, sizeType, sourceType, maxDuration, onStart, onDelete, onChange, onFileItemClick, onProgress, onSuccess, onUpdate, onFailure, onOversize, beforeXhrUpload, beforeDelete, ...restProps } = { ...defaultProps, ...props };
-    const [fileList, setFileList] = useState(defaultValue || []);
-    const [uploadQueue, setUploadQueue] = useState([]);
-    useEffect(() => {
-        if (value) {
-            setFileList(value);
-        }
-    }, [value]);
-    const classes = classNames(className, 'nut-uploader');
-    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') {
-            const 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 ? maxCount * 1 - fileList.length : 1,
-                /** 文件类型 */
-                mediaType: mediaType,
-                /** 图片和视频选择的来源 */
-                sourceType,
-                /** 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间 */
-                maxDuration,
-                /** 仅对 mediaType 为 image 时有效，是否压缩所选文件 */
-                sizeType: [],
-                /** 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头 */
-                camera,
-                /** 接口调用失败的回调函数 */
-                fail: (res) => {
-                    onFailure && onFailure(res);
-                },
-                /** 接口调用成功的回调函数 */
-                success: onChangeMedia,
-            });
-        }
-        else {
-            chooseImage({
-                // 选择数量
-                count: multiple ? maxCount * 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 = beforeXhrUpload;
-        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,
-                });
-        };
-        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,
-                });
-        };
-        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;
-            const 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 (preview) {
-                fileItem.url = fileType == 'video' ? file.thumbTempFilePath : filepath;
-            }
-            fileList.push(fileItem);
-            setFileList([...fileList]);
-            executeUpload(fileItem, index);
-        });
-    };
-    const filterFiles = (files) => {
-        const maximum = props.maxCount * 1;
-        const maximize = props.maxFileSize * 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);
-        onDelete && onDelete(file, fileList);
-        setFileList([...fileList]);
-    };
-    const onDeleteItem = (file, index) => {
-        clearUploadQueue(index);
-        funcInterceptor(beforeDelete, {
-            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.createElement("div", { className: classes, ...restProps },
-        children && (React.createElement("div", { className: "nut-uploader__slot" },
-            React.createElement(React.Fragment, null,
-                children,
-                maxCount > fileList.length && (React.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage }))))),
-        fileList.length !== 0 &&
-            fileList.map((item, index) => {
-                return (React.createElement("div", { className: `nut-uploader__preview ${previewType}`, key: item.uid },
-                    previewType === 'picture' && !children && (React.createElement("div", { className: "nut-uploader__preview-img" },
-                        deletable && (React.createElement(Failure, { color: "rgba(0,0,0,0.6)", className: "close", onClick: () => onDeleteItem(item, index) })),
-                        item.status === 'ready' ? (React.createElement("div", { className: "nut-uploader__preview__progress" },
-                            React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message))) : (item.status !== 'success' && (React.createElement("div", { className: "nut-uploader__preview__progress" },
-                            item.failIcon !== ' ' &&
-                                item.loadingIcon !== ' ' &&
-                                (item.status === 'error'
-                                    ? item.failIcon || React.createElement(Failure, { color: "#fff" })
-                                    : item.loadingIcon || React.createElement(Loading, { color: "#fff" })),
-                            React.createElement("div", { className: "nut-uploader__preview__progress__msg" }, item.message)))),
-                        item.type.includes('image') ? (React.createElement(React.Fragment, null, item.url && (React.createElement(Image, { className: "nut-uploader__preview-img__c", style: { objectFit: imageFit }, mode: "aspectFit", src: item.url, onClick: () => handleItemClick(item) })))) : (React.createElement(React.Fragment, null, previewUrl ? (React.createElement(Image, { className: "nut-uploader__preview-img__c", mode: "aspectFit", src: previewUrl, onClick: () => handleItemClick(item) })) : (React.createElement("div", { className: "nut-uploader__preview-img__file" },
-                            React.createElement("div", { onClick: () => handleItemClick(item), className: "nut-uploader__preview-img__file__name" },
-                                React.createElement(Link, { color: "#808080" }),
-                                "\u00A0",
-                                item.name))))),
-                        item.status === 'success' ? (React.createElement("div", { className: "tips" }, item.name)) : null)),
-                    previewType === 'list' && (React.createElement("div", { className: "nut-uploader__preview-list" },
-                        React.createElement("div", { className: `nut-uploader__preview-img__file__name ${item.status}`, onClick: () => handleItemClick(item) },
-                            React.createElement(Link, null),
-                            "\u00A0",
-                            item.name),
-                        deletable && (React.createElement(Del, { color: "#808080", className: "nut-uploader__preview-img__file__del", onClick: () => onDeleteItem(item, index) })),
-                        item.status === 'uploading' && (React.createElement(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 }))))));
-            }),
-        maxCount > fileList.length && previewType === 'picture' && !children && (React.createElement("div", { className: `nut-uploader__upload ${previewType} ${disabled ? 'nut-uploader__upload-disabled' : ''}` },
-            React.createElement("div", { className: "nut-uploader__icon" },
-                uploadIcon || React.createElement(Photograph, { size: "20px", color: "#808080" }),
-                React.createElement("span", { className: "nut-uploader__icon-tip" }, uploadLabel)),
-            React.createElement(Button, { className: "nut-uploader__input", onClick: _chooseImage })))));
-};
-const Uploader = React.forwardRef(InternalUploader);
-Uploader.defaultProps = defaultProps;
-Uploader.displayName = 'NutUploader';
-
-export { Uploader as U };

package/dist/esm/use-client-rect-1f8ed1fe.js

@@ -1,18 +0,0 @@
-/**
-  获取元素的大小及其相对于视口的位置，等价于 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/use-props-value-ae7ee726.js

@@ -1,15 +0,0 @@
-import { useState } from 'react';
-
-function usePropsValue({ value, defaultValue, finalValue, onChange = (value) => { }, }) {
-    const [uncontrolled, setUncontrolled] = useState(defaultValue !== undefined ? defaultValue : finalValue);
-    const handleUncontrolledChange = (val) => {
-        setUncontrolled(val);
-        onChange?.(val);
-    };
-    if (value !== undefined) {
-        return [value, onChange];
-    }
-    return [uncontrolled, handleUncontrolledChange];
-}
-
-export { usePropsValue as u };

package/dist/esm/use-touch-db24bb5c.js

@@ -1,69 +0,0 @@
-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-1c6405b4.js

@@ -1,67 +0,0 @@
-import React, { 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, onPlay, onPause, 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', () => {
-                onPlay && onPlay(videoRef);
-                play && play(videoRef);
-            });
-            videoRef.addEventListener('pause', () => {
-                onPause && onPause(videoRef);
-                pause && pause(videoRef);
-            });
-            videoRef.addEventListener('ended', () => {
-                videoRef.currentTime = 0;
-                onPlayEnd && onPlayEnd(videoRef);
-                playend && playend(videoRef);
-            });
-        }
-    };
-    return (React.createElement("div", { className: classes, ...restProps },
-        React.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.createElement("source", { src: source.src, type: source.type }),
-            React.createElement("track", { kind: "captions" }))));
-};
-Video.defaultProps = defaultProps;
-Video.displayName = 'NutVideo';
-
-export { Video as V };