@nutui/nutui-react 3.0.0-beta.8 → 3.0.0-beta.9

package/dist/cjs/packages/uploader/uploader.js

@@ -10,25 +10,25 @@ Object.defineProperty(exports, "Uploader", {
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
+var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreact = require("@nutui/icons-react");
-var _utils = require("./utils");
 var _configprovider = require("../configprovider");
 var _interceptor = require("../../utils/interceptor");
 var _typings = require("../../utils/typings");
 var _button = /*#__PURE__*/ _interop_require_default._(require("../button"));
 var _usepropsvalue = require("../../utils/use-props-value");
 var _preview = require("./preview");
-var _fileitem = require("./file-item");
+var _mergeprops = require("../../utils/merge-props");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
-    url: '',
-    maxCount: 1,
+    maxCount: Number.MAX_VALUE,
     previewType: 'picture',
     fit: 'cover',
     name: 'file',
@@ -37,12 +37,6 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     autoUpload: true,
     multiple: false,
     maxFileSize: Number.MAX_VALUE,
-    data: {},
-    headers: {},
-    method: 'post',
-    xhrState: 200,
-    timeout: 1000 * 30,
-    withCredentials: false,
     clearInput: true,
     preview: true,
     deletable: true,
@@ -62,7 +56,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 var InternalUploader = function InternalUploader(props, ref) {
     var locale = (0, _configprovider.useConfig)().locale;
     var fileListRef = (0, _react.useRef)([]);
-    var _ref = (0, _object_spread._)({}, defaultProps, props), children = _ref.children, uploadIcon = _ref.uploadIcon, deleteIcon = _ref.deleteIcon, uploadLabel = _ref.uploadLabel, name = _ref.name, accept = _ref.accept, defaultValue = _ref.defaultValue, value = _ref.value, previewType = _ref.previewType, fit = _ref.fit, disabled = _ref.disabled, multiple = _ref.multiple, url = _ref.url, previewUrl = _ref.previewUrl, headers = _ref.headers, timeout = _ref.timeout, method = _ref.method, xhrState = _ref.xhrState, withCredentials = _ref.withCredentials, data = _ref.data, preview = _ref.preview, deletable = _ref.deletable, maxCount = _ref.maxCount, capture = _ref.capture, maxFileSize = _ref.maxFileSize, className = _ref.className, autoUpload = _ref.autoUpload, clearInput = _ref.clearInput, onStart = _ref.onStart, onDelete = _ref.onDelete, onChange = _ref.onChange, onFileItemClick = _ref.onFileItemClick, onProgress = _ref.onProgress, onSuccess = _ref.onSuccess, onUpdate = _ref.onUpdate, onFailure = _ref.onFailure, onOversize = _ref.onOversize, beforeUpload = _ref.beforeUpload, beforeXhrUpload = _ref.beforeXhrUpload, beforeDelete = _ref.beforeDelete, restProps = (0, _object_without_properties._)(_ref, [
+    var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), children = _mergeProps.children, uploadIcon = _mergeProps.uploadIcon, deleteIcon = _mergeProps.deleteIcon, uploadLabel = _mergeProps.uploadLabel, name = _mergeProps.name, accept = _mergeProps.accept, defaultValue = _mergeProps.defaultValue, value = _mergeProps.value, previewType = _mergeProps.previewType, fit = _mergeProps.fit, disabled = _mergeProps.disabled, multiple = _mergeProps.multiple, previewUrl = _mergeProps.previewUrl, preview = _mergeProps.preview, deletable = _mergeProps.deletable, maxCount = _mergeProps.maxCount, capture = _mergeProps.capture, maxFileSize = _mergeProps.maxFileSize, className = _mergeProps.className, autoUpload = _mergeProps.autoUpload, clearInput = _mergeProps.clearInput, upload = _mergeProps.upload, onDelete = _mergeProps.onDelete, onChange = _mergeProps.onChange, onFileItemClick = _mergeProps.onFileItemClick, onOversize = _mergeProps.onOversize, onOverCount = _mergeProps.onOverCount, beforeUpload = _mergeProps.beforeUpload, beforeDelete = _mergeProps.beforeDelete, onUploadQueueChange = _mergeProps.onUploadQueueChange, restProps = (0, _object_without_properties._)(_mergeProps, [
         "children",
         "uploadIcon",
         "deleteIcon",
@@ -75,14 +69,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         "fit",
         "disabled",
         "multiple",
-        "url",
         "previewUrl",
-        "headers",
-        "timeout",
-        "method",
-        "xhrState",
-        "withCredentials",
-        "data",
         "preview",
         "deletable",
         "maxCount",
@@ -91,18 +78,15 @@ var InternalUploader = function InternalUploader(props, ref) {
         "className",
         "autoUpload",
         "clearInput",
-        "onStart",
+        "upload",
         "onDelete",
         "onChange",
         "onFileItemClick",
-        "onProgress",
-        "onSuccess",
-        "onUpdate",
-        "onFailure",
         "onOversize",
+        "onOverCount",
         "beforeUpload",
-        "beforeXhrUpload",
-        "beforeDelete"
+        "beforeDelete",
+        "onUploadQueueChange"
     ]);
     var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
         value: value,
@@ -119,15 +103,29 @@ var InternalUploader = function InternalUploader(props, ref) {
     }, [
         fileList
     ]);
+    (0, _react.useEffect)(function() {
+        onUploadQueueChange === null || onUploadQueueChange === void 0 ? void 0 : onUploadQueueChange(uploadQueue);
+    }, [
+        uploadQueue
+    ]);
     (0, _react.useImperativeHandle)(ref, function() {
         return {
-            submit: function submit() {
-                Promise.all(uploadQueue).then(function(res) {
-                    res.forEach(function(i) {
-                        return i.upload();
-                    });
+            submit: /*#__PURE__*/ (0, _async_to_generator._)(function() {
+                return (0, _ts_generator._)(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                uploadAction(uploadQueue)
+                            ];
+                        case 1:
+                            _state.sent();
+                            return [
+                                2
+                            ];
+                    }
                 });
-            },
+            }),
             clear: function clear() {
                 clearUploadQueue();
             }
@@ -143,144 +141,7 @@ var InternalUploader = function InternalUploader(props, ref) {
             setFileList([]);
         }
     };
-    var clearInputValue = function clearInputValue(el) {
-        el.value = '';
-    };
-    var executeUpload = function executeUpload(fileItem, index) {
-        var uploadOption = new _utils.UploadOptions();
-        uploadOption.url = url;
-        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-        try {
-            for(var _iterator = Object.entries(data)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                var _step_value = (0, _sliced_to_array._)(_step.value, 2), key = _step_value[0], value = _step_value[1];
-                var _fileItem_formData;
-                (_fileItem_formData = fileItem.formData) === null || _fileItem_formData === void 0 ? void 0 : _fileItem_formData.append(key, value);
-            }
-        } catch (err) {
-            _didIteratorError = true;
-            _iteratorError = err;
-        } finally{
-            try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                    _iterator.return();
-                }
-            } finally{
-                if (_didIteratorError) {
-                    throw _iteratorError;
-                }
-            }
-        }
-        uploadOption.formData = fileItem.formData;
-        uploadOption.timeout = timeout * 1;
-        uploadOption.method = method;
-        uploadOption.xhrState = xhrState;
-        uploadOption.headers = headers;
-        uploadOption.withCredentials = withCredentials;
-        uploadOption.beforeXhrUpload = beforeXhrUpload;
-        try {
-            var _fileItem_formData1;
-            uploadOption.sourceFile = (_fileItem_formData1 = fileItem.formData) === null || _fileItem_formData1 === void 0 ? void 0 : _fileItem_formData1.get(name);
-        } catch (error) {
-            console.warn(error);
-        }
-        uploadOption.onStart = function(option) {
-            clearUploadQueue(index);
-            setFileList(fileListRef.current.map(function(item) {
-                if (item.uid === fileItem.uid) {
-                    item.status = 'ready';
-                    item.message = locale.uploader.readyUpload;
-                }
-                return item;
-            }));
-            onStart === null || onStart === void 0 ? void 0 : onStart(option);
-        };
-        uploadOption.onProgress = function(e, option) {
-            setFileList(fileListRef.current.map(function(item) {
-                if (item.uid === fileItem.uid) {
-                    item.status = _utils.UPLOADING;
-                    item.message = locale.uploader.uploading;
-                    item.percentage = (e.loaded / e.total * 100).toFixed(0);
-                    onProgress === null || onProgress === void 0 ? void 0 : onProgress({
-                        e: e,
-                        option: option,
-                        percentage: item.percentage
-                    });
-                }
-                return item;
-            }));
-        };
-        uploadOption.onSuccess = function(responseText, option) {
-            var list = fileListRef.current.map(function(item) {
-                if (item.uid === fileItem.uid) {
-                    item.status = _utils.SUCCESS;
-                    item.message = locale.uploader.success;
-                    item.responseText = responseText;
-                }
-                return item;
-            });
-            setFileList(list);
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(list);
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({
-                responseText: responseText,
-                option: option,
-                files: list
-            });
-        };
-        uploadOption.onFailure = function(responseText, option) {
-            var list = fileListRef.current.map(function(item) {
-                if (item.uid === fileItem.uid) {
-                    item.status = _utils.ERROR;
-                    item.message = locale.uploader.error;
-                    item.responseText = responseText;
-                }
-                return item;
-            });
-            setFileList(list);
-            onFailure === null || onFailure === void 0 ? void 0 : onFailure({
-                responseText: responseText,
-                option: option,
-                files: list
-            });
-        };
-        var task = new _utils.Utils(uploadOption);
-        if (autoUpload) {
-            task.upload();
-        } else {
-            uploadQueue.push(new Promise(function(resolve, reject) {
-                resolve(task);
-            }));
-            setUploadQueue(uploadQueue);
-        }
-    };
-    var readFile = function readFile(files) {
-        files.forEach(function(file, index) {
-            var _file_type;
-            var formData = new FormData();
-            formData.append(name, file);
-            var fileItem = new _fileitem.FileItem();
-            fileItem.name = file.name;
-            fileItem.status = 'ready';
-            fileItem.type = file.type;
-            fileItem.formData = formData;
-            fileItem.uid = file.lastModified + fileItem.uid;
-            fileItem.message = autoUpload ? locale.uploader.readyUpload : locale.uploader.waitingUpload;
-            executeUpload(fileItem, index);
-            if (preview && ((_file_type = file.type) === null || _file_type === void 0 ? void 0 : _file_type.includes('image'))) {
-                var reader = new FileReader();
-                reader.onload = function(event) {
-                    fileItem.url = event.target.result;
-                    setFileList((0, _to_consumable_array._)(fileList).concat([
-                        fileItem
-                    ]));
-                };
-                reader.readAsDataURL(file);
-            } else {
-                setFileList((0, _to_consumable_array._)(fileList).concat([
-                    fileItem
-                ]));
-            }
-        });
-    };
+    var idCountRef = (0, _react.useRef)(0);
     var filterFiles = function filterFiles(files) {
         var maximum = maxCount * 1;
         var oversizes = new Array();
@@ -293,6 +154,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         });
         oversizes.length && (onOversize === null || onOversize === void 0 ? void 0 : onOversize(files));
         if (filterFile.length > maximum) {
+            onOverCount === null || onOverCount === void 0 ? void 0 : onOverCount(filterFile.length);
             filterFile.splice(maximum, filterFile.length - maximum);
         }
         if (fileList.length !== 0) {
@@ -302,7 +164,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         return filterFile;
     };
     var deleted = function deleted(file, index) {
-        var deletedFileList = fileList.filter(function(file, idx) {
+        var deletedFileList = fileListRef.current.filter(function(file, idx) {
             return idx !== index;
         });
         onDelete === null || onDelete === void 0 ? void 0 : onDelete(file, deletedFileList);
@@ -320,44 +182,220 @@ var InternalUploader = function InternalUploader(props, ref) {
             }
         });
     };
-    var fileChange = function fileChange(event) {
-        if (disabled) return;
-        var $el = event.target;
-        var files = $el.files;
-        if (beforeUpload) {
-            beforeUpload(new Array().slice.call(files)).then(function(f) {
-                var _files = filterFiles(new Array().slice.call(f));
-                if (!_files.length) $el.value = '';
-                readFile(_files);
+    var fileChange = /*#__PURE__*/ function() {
+        var _ref = (0, _async_to_generator._)(function(event) {
+            var $el, files, _files, filesArr, tasks;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (disabled) return [
+                            2
+                        ];
+                        $el = event.target;
+                        files = $el.files;
+                        _files = [];
+                        filesArr = new Array().slice.call(files);
+                        if (!beforeUpload) return [
+                            3,
+                            2
+                        ];
+                        return [
+                            4,
+                            beforeUpload(filesArr)
+                        ];
+                    case 1:
+                        _files = _state.sent();
+                        if (!_files.length) $el.value = '';
+                        _state.label = 2;
+                    case 2:
+                        _files = filterFiles(filesArr);
+                        tasks = _files.map(function(file) {
+                            var _file_type;
+                            var info = {
+                                uid: idCountRef.current++,
+                                status: autoUpload ? 'uploading' : 'ready',
+                                file: file,
+                                message: autoUpload ? locale.uploader.uploading : locale.uploader.waitingUpload,
+                                name: file.name,
+                                type: file.type
+                            };
+                            if (preview && ((_file_type = file.type) === null || _file_type === void 0 ? void 0 : _file_type.includes('image'))) {
+                                var reader = new FileReader();
+                                reader.onload = function(event) {
+                                    fileListRef.current = (0, _to_consumable_array._)(fileListRef.current).concat([
+                                        (0, _object_spread_props._)((0, _object_spread._)({}, info), {
+                                            url: event.target.result
+                                        })
+                                    ]);
+                                    setFileList(fileListRef.current);
+                                };
+                                reader.readAsDataURL(file);
+                            }
+                            return info;
+                        });
+                        if (!!autoUpload) return [
+                            3,
+                            3
+                        ];
+                        setUploadQueue(tasks);
+                        return [
+                            3,
+                            5
+                        ];
+                    case 3:
+                        return [
+                            4,
+                            uploadAction(tasks)
+                        ];
+                    case 4:
+                        _state.sent();
+                        _state.label = 5;
+                    case 5:
+                        if (clearInput) {
+                            $el.value = '';
+                        }
+                        return [
+                            2
+                        ];
+                }
             });
-        } else {
-            var _files = filterFiles(new Array().slice.call(files));
-            readFile(_files);
-        }
-        if (clearInput) {
-            clearInputValue($el);
-        }
-    };
+        });
+        return function fileChange(event) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    var uploadAction = /*#__PURE__*/ function() {
+        var _ref = (0, _async_to_generator._)(function(tasks) {
+            var taskIds;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        taskIds = tasks.map(function(task) {
+                            return task.uid;
+                        });
+                        setFileList(fileList.map(function(file) {
+                            if (taskIds.includes(file.uid)) {
+                                return (0, _object_spread_props._)((0, _object_spread._)({}, file), {
+                                    status: 'uploading',
+                                    message: locale.uploader.uploading
+                                });
+                            }
+                            return file;
+                        }));
+                        return [
+                            4,
+                            Promise.all(tasks.map(/*#__PURE__*/ function() {
+                                var _ref = (0, _async_to_generator._)(function(currentTask, index) {
+                                    var result, list, e, list1;
+                                    return (0, _ts_generator._)(this, function(_state) {
+                                        switch(_state.label){
+                                            case 0:
+                                                _state.trys.push([
+                                                    0,
+                                                    2,
+                                                    ,
+                                                    3
+                                                ]);
+                                                return [
+                                                    4,
+                                                    upload(currentTask.file)
+                                                ];
+                                            case 1:
+                                                result = _state.sent();
+                                                list = fileListRef.current.map(function(item) {
+                                                    if (item.uid === currentTask.uid) {
+                                                        item.status = 'success';
+                                                        item.message = locale.uploader.success;
+                                                        item.url = result.url;
+                                                    }
+                                                    return item;
+                                                });
+                                                setFileList(list);
+                                                return [
+                                                    3,
+                                                    3
+                                                ];
+                                            case 2:
+                                                e = _state.sent();
+                                                list1 = fileListRef.current.map(function(item) {
+                                                    if (item.uid === currentTask.uid) {
+                                                        item.status = 'error';
+                                                        item.message = locale.uploader.error;
+                                                    }
+                                                    return item;
+                                                });
+                                                setFileList(list1);
+                                                throw e;
+                                            case 3:
+                                                return [
+                                                    2
+                                                ];
+                                        }
+                                    });
+                                });
+                                return function(currentTask, index) {
+                                    return _ref.apply(this, arguments);
+                                };
+                            }())).catch(function(errs) {
+                                return console.error(errs);
+                            })
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function uploadAction(tasks) {
+            return _ref.apply(this, arguments);
+        };
+    }();
     var handleItemClick = function handleItemClick(file, index) {
         onFileItemClick === null || onFileItemClick === void 0 ? void 0 : onFileItemClick(file, index);
     };
+    var renderImageUploader = function renderImageUploader() {
+        var shouldShow = Number(maxCount) > fileList.length && previewType === 'picture';
+        return shouldShow && /*#__PURE__*/ _react.default.createElement("div", {
+            className: (0, _classnames.default)('nut-uploader-upload', previewType, {
+                'nut-uploader-upload-disabled': disabled
+            })
+        }, /*#__PURE__*/ _react.default.createElement("div", {
+            className: "nut-uploader-icon"
+        }, uploadIcon, /*#__PURE__*/ _react.default.createElement("span", {
+            className: "nut-uploader-icon-tip"
+        }, uploadLabel)), /*#__PURE__*/ _react.default.createElement("input", {
+            className: "nut-uploader-input",
+            type: "file",
+            capture: capture,
+            name: name,
+            accept: accept,
+            disabled: disabled,
+            multiple: multiple,
+            onChange: fileChange
+        }));
+    };
+    var renderListUploader = function renderListUploader() {
+        return previewType === 'list' && /*#__PURE__*/ _react.default.createElement("div", {
+            className: "nut-uploader-slot"
+        }, /*#__PURE__*/ _react.default.createElement(_button.default, {
+            size: "small",
+            type: "primary"
+        }, locale.uploader.list), Number(maxCount) > fileList.length && /*#__PURE__*/ _react.default.createElement("input", {
+            className: "nut-uploader-input",
+            type: "file",
+            capture: capture,
+            name: name,
+            accept: accept,
+            disabled: disabled,
+            multiple: multiple,
+            onChange: fileChange
+        }));
+    };
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
         className: classes
-    }, restProps), (children || previewType === 'list') && /*#__PURE__*/ _react.default.createElement("div", {
-        className: "nut-uploader-slot"
-    }, children || /*#__PURE__*/ _react.default.createElement(_button.default, {
-        size: "small",
-        type: "primary"
-    }, locale.uploader.list), Number(maxCount) > fileList.length && /*#__PURE__*/ _react.default.createElement("input", {
-        className: "nut-uploader-input",
-        type: "file",
-        capture: capture,
-        name: name,
-        accept: accept,
-        disabled: disabled,
-        multiple: multiple,
-        onChange: fileChange
-    })), /*#__PURE__*/ _react.default.createElement(_preview.Preview, {
+    }, restProps), renderListUploader(), /*#__PURE__*/ _react.default.createElement(_preview.Preview, {
         fileList: fileList,
         previewType: previewType,
         deletable: deletable,
@@ -366,24 +404,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         previewUrl: previewUrl,
         children: children,
         deleteIcon: deleteIcon
-    }), Number(maxCount) > fileList.length && previewType === 'picture' && !children && /*#__PURE__*/ _react.default.createElement("div", {
-        className: (0, _classnames.default)('nut-uploader-upload', previewType, {
-            'nut-uploader-upload-disabled': disabled
-        })
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "nut-uploader-icon"
-    }, uploadIcon, /*#__PURE__*/ _react.default.createElement("span", {
-        className: "nut-uploader-icon-tip"
-    }, uploadLabel)), /*#__PURE__*/ _react.default.createElement("input", {
-        className: "nut-uploader-input",
-        type: "file",
-        capture: capture,
-        name: name,
-        accept: accept,
-        disabled: disabled,
-        multiple: multiple,
-        onChange: fileChange
-    })));
+    }), renderImageUploader());
 };
 var Uploader = /*#__PURE__*/ _react.default.forwardRef(InternalUploader);
 Uploader.displayName = 'NutUploader';

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

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

package/dist/cjs/utils/platform-taro.d.ts

@@ -2,3 +2,4 @@ export declare const harmonyAndRn: () => boolean;
 export declare const harmony: () => boolean;
 export declare const rn: () => boolean;
 export declare const web: () => boolean;
+export declare const miniprogram: () => boolean;

package/dist/cjs/utils/platform-taro.js

@@ -15,6 +15,9 @@ _export(exports, {
     harmonyAndRn: function() {
         return harmonyAndRn;
     },
+    miniprogram: function() {
+        return miniprogram;
+    },
     rn: function() {
         return rn;
     },
@@ -51,3 +54,8 @@ var web = function web() {
         'web'
     ].includes(_taro.default.getEnv().toLowerCase());
 };
+var miniprogram = function miniprogram() {
+    return [
+        'mini'
+    ].includes(_taro.default.getEnv().toLowerCase());
+};