@nutui/nutui-react-taro 1.4.4 → 1.4.5-beta.0

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

@@ -0,0 +1,392 @@
+import React__default, { useState, useEffect, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import { I as Icon } from './icon.taro-1d0d4fb7.js';
+import { B as Button } from './button.taro-4ce133b9.js';
+import { P as Progress } from './progress.taro-623bc807.js';
+import Taro from '@tarojs/taro';
+import { c as cn } from './bem-893ad28d.js';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+import { C as ComponentDefaults } from './typings-1c5f2628.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');
+        }
+    }
+    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(); // 取消上传任务
+        }
+    }
+}
+
+const defaultProps = {
+    ...ComponentDefaults,
+    url: '',
+    maximum: 9,
+    sizeType: ['original', 'compressed'],
+    sourceType: ['album', 'camera'],
+    uploadIcon: 'photograph',
+    uploadIconSize: '',
+    listType: 'picture',
+    name: 'file',
+    disabled: false,
+    autoUpload: true,
+    maximize: Number.MAX_VALUE,
+    data: {},
+    headers: {},
+    method: 'post',
+    defaultImg: '',
+    xhrState: 200,
+    timeout: 1000 * 30,
+    isPreview: true,
+    isDeletable: true,
+    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, name, defaultFileList, listType, disabled, url, defaultImg, headers, timeout, method, xhrState, data, isPreview, isDeletable, maximum, maximize, className, autoUpload, sizeType, sourceType, onStart, onRemove, onChange, onFileItemClick, onProgress, onSuccess, onUpdate, onFailure, onOversize, onBeforeUpload, 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(Taro.uploadFile, Taro.getEnv()));
+            });
+        },
+    }));
+    const clearUploadQueue = (index = -1) => {
+        if (index > -1) {
+            uploadQueue.splice(index, 1);
+            setUploadQueue(uploadQueue);
+        }
+        else {
+            setUploadQueue([]);
+        }
+    };
+    const chooseImage = () => {
+        if (disabled) {
+            return;
+        }
+        Taro.chooseImage({
+            // 选择数量
+            count: maximum * 1 - fileList.length,
+            // 可以指定是原图还是压缩图，默认二者都有
+            sizeType: sizeType,
+            sourceType: sourceType,
+            success: onChangeFn,
+        });
+    };
+    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,
+                });
+        };
+        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,
+                });
+        };
+        const task = new Upload(uploadOption);
+        if (props.autoUpload) {
+            task.uploadTaro(Taro.uploadFile, Taro.getEnv());
+        }
+        else {
+            uploadQueue.push(new Promise((resolve, reject) => {
+                resolve(task);
+            }));
+            setUploadQueue(uploadQueue);
+        }
+    };
+    const readFile = (files) => {
+        const imgReg = /\.(png|jpeg|jpg|webp|gif)$/i;
+        files.forEach((file, index) => {
+            console.log('file', file);
+            let fileType = file.type;
+            const fileItem = new FileItem();
+            if (!fileType && imgReg.test(file.path)) {
+                fileType = 'image';
+            }
+            fileItem.path = file.path;
+            fileItem.name = file.path;
+            fileItem.status = 'ready';
+            fileItem.message = locale.uploader.readyUpload;
+            fileItem.type = fileType;
+            if (Taro.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 = file.path;
+            }
+            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);
+        }
+        let currentFileLength = filterFile.length + fileList.length;
+        if (currentFileLength > maximum) {
+            filterFile.splice(filterFile.length - (currentFileLength - maximum));
+        }
+        return filterFile;
+    };
+    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);
+        }
+    };
+    const onChangeFn = (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);
+        }
+        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" },
+                        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'}` }),
+                            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, onClick: () => handleItemClick(item) })))) : (React__default.createElement(React__default.Fragment, null, defaultImg ? (React__default.createElement("img", { className: "nut-uploader__preview-img__c", 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" }),
+                                "\u00A0",
+                                item.name))))),
+                        React__default.createElement("div", { className: "tips" }, item.name))),
+                    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" }),
+                            "\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) })),
+                        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 }),
+            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-bf69d7b3.js

@@ -1,5 +1,3 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 /**
   获取元素的大小及其相对于视口的位置，等价于 Element.getBoundingClientRect。
   width 宽度	number
@@ -9,27 +7,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
   right	右侧与视图窗口左上角的距离	number
   bottom	底部与视图窗口左上角的距离	number
  */
-var getRectByTaro = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(element) {
-    var res;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return element.getBoundingClientRect();
-          case 2:
-            res = _context.sent;
-            return _context.abrupt("return", res);
-          case 4:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  }));
-  return function getRectByTaro(_x) {
-    return _ref.apply(this, arguments);
-  };
-}();
+const getRectByTaro = async (element) => {
+    const res = await element.getBoundingClientRect();
+    return res;
+};
+
 export { getRectByTaro as g };

package/dist/esm/useTouch-a2ea68c6.js

@@ -1,99 +1,69 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState } from 'react';
-var MIN_DISTANCE = 10;
+
+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 '';
+    if (x > y && x > MIN_DISTANCE) {
+        return 'horizontal';
+    }
+    if (y > x && y > MIN_DISTANCE) {
+        return 'vertical';
+    }
+    return '';
 }
 function useTouch() {
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    startX = _useState2[0],
-    SetStartX = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    startY = _useState4[0],
-    SetStartY = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    moveX = _useState6[0],
-    SetMoveX = _useState6[1];
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    moveY = _useState8[0],
-    SetMoveY = _useState8[1];
-  var _useState9 = useState(0),
-    _useState10 = _slicedToArray(_useState9, 2),
-    deltaX = _useState10[0],
-    SetDeltaX = _useState10[1];
-  var _useState11 = useState(0),
-    _useState12 = _slicedToArray(_useState11, 2),
-    deltaY = _useState12[0],
-    SetDeltaY = _useState12[1];
-  var _useState13 = useState(0),
-    _useState14 = _slicedToArray(_useState13, 2),
-    offsetX = _useState14[0],
-    SetOffsetX = _useState14[1];
-  var _useState15 = useState(0),
-    _useState16 = _slicedToArray(_useState15, 2),
-    offsetY = _useState16[0],
-    SetOffsetY = _useState16[1];
-  var _useState17 = useState(''),
-    _useState18 = _slicedToArray(_useState17, 2),
-    direction = _useState18[0],
-    SetDirection = _useState18[1];
-  var isVertical = function isVertical() {
-    return direction === 'vertical';
-  };
-  var isHorizontal = function isHorizontal() {
-    return direction === 'horizontal';
-  };
-  var reset = function reset() {
-    SetDeltaX(0);
-    SetDeltaY(0);
-    SetOffsetX(0);
-    SetOffsetY(0);
-    SetDirection('');
-  };
-  var start = function start(event) {
-    reset();
-    SetStartX(event.touches[0].clientX);
-    SetStartY(event.touches[0].clientY);
-  };
-  var move = function move(event) {
-    var touch = event.touches[0];
-    var dX = touch.clientX - startX;
-    var 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: move,
-    start: start,
-    reset: reset,
-    startX: startX,
-    startY: startY,
-    moveX: moveX,
-    moveY: moveY,
-    deltaX: deltaX,
-    deltaY: deltaY,
-    offsetX: offsetX,
-    offsetY: offsetY,
-    direction: direction,
-    isVertical: isVertical,
-    isHorizontal: isHorizontal
-  };
+    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 };