@nutui/nutui-react-taro 1.3.3 → 1.3.4

package/dist/esm/{uploader.taro-4fd5dd3c.js → uploader.taro-6184abe7.js}

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "uploadIcon", "uploadIconSize", "name", "accept", "defaultFileList", "listType", "disabled", "multiple", "url", "defaultImg", "headers", "timeout", "method", "xhrState", "withCredentials", "data", "isPreview", "isDeletable", "maximum", "capture", "maximize", "className", "autoUpload", "clearInput", "start", "removeImage", "change", "fileItemClick", "progress", "success", "update", "failure", "oversize", "beforeUpload", "beforeDelete"];
+var _excluded = ["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"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -12,7 +12,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React__default, { useState, useEffect, useImperativeHandle } from 'react';
 import classNames from 'classnames';
-import { I as Icon } from './icon-8dc4de10.js';
+import { I as Icon } from './icon.taro-1d0d4fb7.js';
+import { B as Button } from './button.taro-a9ebb937.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-6c7b3056.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
@@ -24,8 +27,12 @@ var UploadOptions = /*#__PURE__*/_createClass(function UploadOptions() {
 
   _defineProperty(this, "name", 'file');
 
+  _defineProperty(this, "fileType", 'image');
+
   _defineProperty(this, "formData", void 0);
 
+  _defineProperty(this, "sourceFile", void 0);
+
   _defineProperty(this, "method", 'post');
 
   _defineProperty(this, "xhrState", 200);
@@ -45,6 +52,8 @@ var UploadOptions = /*#__PURE__*/_createClass(function UploadOptions() {
   _defineProperty(this, "onSuccess", void 0);
 
   _defineProperty(this, "onFailure", void 0);
+
+  _defineProperty(this, "beforeXhrUpload", void 0);
 });
 
 var Upload = /*#__PURE__*/function () {
@@ -98,11 +107,64 @@ var Upload = /*#__PURE__*/function () {
         }
 
         (_options$onStart = options.onStart) === null || _options$onStart === void 0 ? void 0 : _options$onStart.call(options, options);
-        xhr.send(options.formData);
+
+        if (options.beforeXhrUpload) {
+          options.beforeXhrUpload(xhr, options);
+        } else {
+          xhr.send(options.formData);
+        }
       } else {
         console.warn('浏览器不支持 XMLHttpRequest');
       }
     }
+  }, {
+    key: "uploadTaro",
+    value: function uploadTaro(uploadFile, env) {
+      var options = this.options;
+
+      if (env === 'WEB') {
+        this.upload();
+      } else if (options.beforeXhrUpload) {
+        options.beforeXhrUpload(uploadFile, options);
+      } else {
+        var _options$onStart2;
+
+        var uploadTask = uploadFile({
+          url: options.url,
+          filePath: options.taroFilePath,
+          fileType: options.fileType,
+          header: _objectSpread({
+            'Content-Type': 'multipart/form-data'
+          }, options.headers),
+          formData: options.formData,
+          name: options.name,
+          success: function success(response) {
+            if (options.xhrState == response.statusCode) {
+              var _options$onSuccess2;
+
+              (_options$onSuccess2 = options.onSuccess) === null || _options$onSuccess2 === void 0 ? void 0 : _options$onSuccess2.call(options, response, options);
+            } else {
+              var _options$onFailure2;
+
+              (_options$onFailure2 = options.onFailure) === null || _options$onFailure2 === void 0 ? void 0 : _options$onFailure2.call(options, response, options);
+            }
+          },
+          fail: function fail(e) {
+            var _options$onFailure3;
+
+            (_options$onFailure3 = options.onFailure) === null || _options$onFailure3 === void 0 ? void 0 : _options$onFailure3.call(options, e, options);
+          }
+        });
+        (_options$onStart2 = options.onStart) === null || _options$onStart2 === void 0 ? void 0 : _options$onStart2.call(options, options);
+        uploadTask.progress(function (res) {
+          var _options$onProgress2;
+
+          (_options$onProgress2 = options.onProgress) === null || _options$onProgress2 === void 0 ? void 0 : _options$onProgress2.call(options, res, options); // console.log('上传进度', res.progress);
+          // console.log('已经上传的数据长度', res.totalBytesSent);
+          // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
+        }); // uploadTask.abort(); // 取消上传任务
+      }
+    }
   }]);
 
   return Upload;
@@ -110,15 +172,15 @@ var Upload = /*#__PURE__*/function () {
 
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   url: '',
-  maximum: 1,
+  maximum: 9,
+  sizeType: ['original', 'compressed'],
+  sourceType: ['album', 'camera'],
   uploadIcon: 'photograph',
   uploadIconSize: '',
   listType: 'picture',
   name: 'file',
-  accept: '*',
   disabled: false,
   autoUpload: true,
-  multiple: false,
   maximize: Number.MAX_VALUE,
   data: {},
   headers: {},
@@ -126,12 +188,9 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   defaultImg: '',
   xhrState: 200,
   timeout: 1000 * 30,
-  withCredentials: false,
-  clearInput: false,
   isPreview: true,
   isDeletable: true,
-  capture: false,
-  beforeDelete: function beforeDelete(file, files) {
+  onBeforeDelete: function onBeforeDelete(file, files) {
     return true;
   }
 });
@@ -151,7 +210,11 @@ var FileItem = /*#__PURE__*/_createClass(function FileItem() {
 
   _defineProperty(this, "type", void 0);
 
-  _defineProperty(this, "formData", new FormData());
+  _defineProperty(this, "path", void 0);
+
+  _defineProperty(this, "percentage", 0);
+
+  _defineProperty(this, "formData", {});
 });
 
 var InternalUploader = function InternalUploader(props, ref) {
@@ -163,38 +226,36 @@ var InternalUploader = function InternalUploader(props, ref) {
       uploadIcon = _defaultProps$props.uploadIcon,
       uploadIconSize = _defaultProps$props.uploadIconSize,
       name = _defaultProps$props.name,
-      accept = _defaultProps$props.accept,
       defaultFileList = _defaultProps$props.defaultFileList,
       listType = _defaultProps$props.listType,
       disabled = _defaultProps$props.disabled,
-      multiple = _defaultProps$props.multiple,
       url = _defaultProps$props.url,
       defaultImg = _defaultProps$props.defaultImg,
       headers = _defaultProps$props.headers,
       timeout = _defaultProps$props.timeout,
       method = _defaultProps$props.method,
       xhrState = _defaultProps$props.xhrState,
-      withCredentials = _defaultProps$props.withCredentials,
       data = _defaultProps$props.data,
       isPreview = _defaultProps$props.isPreview,
       isDeletable = _defaultProps$props.isDeletable,
       maximum = _defaultProps$props.maximum,
-      capture = _defaultProps$props.capture,
       maximize = _defaultProps$props.maximize,
       className = _defaultProps$props.className,
       autoUpload = _defaultProps$props.autoUpload,
-      clearInput = _defaultProps$props.clearInput,
-      start = _defaultProps$props.start,
-      removeImage = _defaultProps$props.removeImage,
-      change = _defaultProps$props.change,
-      fileItemClick = _defaultProps$props.fileItemClick,
-      progress = _defaultProps$props.progress,
-      success = _defaultProps$props.success,
-      update = _defaultProps$props.update,
-      failure = _defaultProps$props.failure,
-      oversize = _defaultProps$props.oversize,
-      beforeUpload = _defaultProps$props.beforeUpload,
-      beforeDelete = _defaultProps$props.beforeDelete,
+      sizeType = _defaultProps$props.sizeType,
+      sourceType = _defaultProps$props.sourceType,
+      onStart = _defaultProps$props.onStart,
+      onRemove = _defaultProps$props.onRemove,
+      onChange = _defaultProps$props.onChange,
+      onFileItemClick = _defaultProps$props.onFileItemClick,
+      onProgress = _defaultProps$props.onProgress,
+      onSuccess = _defaultProps$props.onSuccess,
+      onUpdate = _defaultProps$props.onUpdate,
+      onFailure = _defaultProps$props.onFailure,
+      onOversize = _defaultProps$props.onOversize,
+      onBeforeUpload = _defaultProps$props.onBeforeUpload,
+      onBeforeXhrUpload = _defaultProps$props.onBeforeXhrUpload,
+      onBeforeDelete = _defaultProps$props.onBeforeDelete,
       restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
 
   var _useState = useState([]),
@@ -208,8 +269,6 @@ var InternalUploader = function InternalUploader(props, ref) {
       setUploadQueue = _useState4[1];
 
   useEffect(function () {
-    console.log('defaultFileList', defaultFileList);
-
     if (defaultFileList) {
       setFileList(defaultFileList);
     }
@@ -221,7 +280,7 @@ var InternalUploader = function InternalUploader(props, ref) {
       submit: function submit() {
         Promise.all(uploadQueue).then(function (res) {
           res.forEach(function (i) {
-            return i.upload();
+            return i.uploadTaro(Taro.uploadFile, Taro.getEnv());
           });
         });
       }
@@ -239,28 +298,33 @@ var InternalUploader = function InternalUploader(props, ref) {
     }
   };
 
-  var clearInputValue = function clearInputValue(el) {
-    el.value = '';
+  var chooseImage = function chooseImage() {
+    if (disabled) {
+      return;
+    }
+
+    Taro.chooseImage({
+      // 选择数量
+      count: maximum * 1 - fileList.length,
+      // 可以指定是原图还是压缩图，默认二者都有
+      sizeType: sizeType,
+      sourceType: sourceType,
+      success: onChangeFn
+    });
   };
 
   var executeUpload = function executeUpload(fileItem, index) {
     var uploadOption = new UploadOptions();
+    uploadOption.name = name;
     uploadOption.url = url;
-
-    for (var _i2 = 0, _Object$entries2 = Object.entries(data); _i2 < _Object$entries2.length; _i2++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
-          key = _Object$entries2$_i[0],
-          value = _Object$entries2$_i[1];
-
-      fileItem.formData.append(key, value);
-    }
-
+    uploadOption.fileType = fileItem.type;
     uploadOption.formData = fileItem.formData;
     uploadOption.timeout = timeout * 1;
     uploadOption.method = method;
     uploadOption.xhrState = xhrState;
     uploadOption.headers = headers;
-    uploadOption.withCredentials = withCredentials;
+    uploadOption.taroFilePath = fileItem.path;
+    uploadOption.beforeXhrUpload = onBeforeXhrUpload;
 
     uploadOption.onStart = function (option) {
       clearUploadQueue(index);
@@ -273,7 +337,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         });
         return _toConsumableArray(fileList);
       });
-      start && start(option);
+      onStart && onStart(option);
     };
 
     uploadOption.onProgress = function (e, option) {
@@ -282,19 +346,21 @@ var InternalUploader = function InternalUploader(props, ref) {
           if (item.uid === fileItem.uid) {
             item.status = 'uploading';
             item.message = locale.uploader.uploading;
+            item.percentage = e.progress;
+            onProgress && onProgress({
+              e: e,
+              option: option,
+              percentage: item.percentage
+            });
           }
         });
         return _toConsumableArray(fileList);
       });
-      progress && progress({
-        e: e,
-        option: option
-      });
     };
 
     uploadOption.onSuccess = function (responseText, option) {
       setFileList(function (fileList) {
-        update && update(fileList);
+        onUpdate && onUpdate(fileList);
         fileList.map(function (item) {
           if (item.uid === fileItem.uid) {
             item.status = 'success';
@@ -303,7 +369,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         });
         return _toConsumableArray(fileList);
       });
-      success && success({
+      onSuccess && onSuccess({
         responseText: responseText,
         option: option
       });
@@ -319,7 +385,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         });
         return _toConsumableArray(fileList);
       });
-      failure && failure({
+      onFailure && onFailure({
         responseText: responseText,
         option: option
       });
@@ -328,7 +394,7 @@ var InternalUploader = function InternalUploader(props, ref) {
     var task = new Upload(uploadOption);
 
     if (props.autoUpload) {
-      task.upload();
+      task.uploadTaro(Taro.uploadFile, Taro.getEnv());
     } else {
       uploadQueue.push(new Promise(function (resolve, reject) {
         resolve(task);
@@ -338,37 +404,56 @@ var InternalUploader = function InternalUploader(props, ref) {
   };
 
   var readFile = function readFile(files) {
+    var imgReg = /\.(png|jpeg|jpg|webp|gif)$/i;
     files.forEach(function (file, index) {
-      var formData = new FormData();
-      formData.append(name, file);
+      console.log('file', file);
+      var fileType = file.type;
       var fileItem = new FileItem();
-      fileItem.name = file.name;
+
+      if (!fileType && imgReg.test(file.path)) {
+        fileType = 'image';
+      }
+
+      fileItem.path = file.path;
+      fileItem.name = file.path;
       fileItem.status = 'ready';
-      fileItem.type = file.type;
-      fileItem.formData = formData;
-      fileItem.uid = file.lastModified + fileItem.uid;
       fileItem.message = locale.uploader.readyUpload;
-      executeUpload(fileItem, index);
+      fileItem.type = fileType;
 
-      if (isPreview && file.type.includes('image')) {
-        var reader = new FileReader();
+      if (Taro.getEnv() == 'WEB') {
+        var _file$originalFileObj, _file$originalFileObj2;
 
-        reader.onload = function (event) {
-          fileItem.url = event.target.result;
-          fileList.push(fileItem);
-          setFileList(_toConsumableArray(fileList));
-        };
+        var formData = new FormData();
+
+        for (var _i2 = 0, _Object$entries2 = Object.entries(data); _i2 < _Object$entries2.length; _i2++) {
+          var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+              key = _Object$entries2$_i[0],
+              value = _Object$entries2$_i[1];
+
+          formData.append(key, value);
+        }
 
-        reader.readAsDataURL(file);
+        formData.append(name, file.originalFileObj);
+        fileItem.name = (_file$originalFileObj = file.originalFileObj) === null || _file$originalFileObj === void 0 ? void 0 : _file$originalFileObj.name;
+        fileItem.type = (_file$originalFileObj2 = file.originalFileObj) === null || _file$originalFileObj2 === void 0 ? void 0 : _file$originalFileObj2.type;
+        fileItem.formData = formData;
       } else {
-        fileList.push(fileItem);
-        setFileList(_toConsumableArray(fileList));
+        fileItem.formData = data;
       }
+
+      if (isPreview) {
+        fileItem.url = file.path;
+      }
+
+      fileList.push(fileItem);
+      setFileList(_toConsumableArray(fileList));
+      executeUpload(fileItem, index);
     });
   };
 
   var filterFiles = function filterFiles(files) {
     var maximum = props.maximum * 1;
+    var maximize = props.maximize * 1;
     var oversizes = new Array();
     var filterFile = files.filter(function (file) {
       if (file.size > maximize) {
@@ -380,16 +465,13 @@ var InternalUploader = function InternalUploader(props, ref) {
     });
 
     if (oversizes.length) {
-      oversize && oversize(files);
+      onOversize && onOversize(files);
     }
 
-    if (filterFile.length > maximum) {
-      filterFile.splice(maximum, filterFile.length - maximum);
-    }
+    var currentFileLength = filterFile.length + fileList.length;
 
-    if (fileList.length !== 0) {
-      var index = maximum - fileList.length;
-      filterFile.splice(index, filterFile.length - index);
+    if (currentFileLength > maximum) {
+      filterFile.splice(filterFile.length - (currentFileLength - maximum));
     }
 
     return filterFile;
@@ -398,71 +480,48 @@ var InternalUploader = function InternalUploader(props, ref) {
   var onDelete = function onDelete(file, index) {
     clearUploadQueue(index);
 
-    if (beforeDelete && beforeDelete(file, fileList)) {
+    if (onBeforeDelete && onBeforeDelete(file, fileList)) {
       fileList.splice(index, 1);
-      removeImage && removeImage(file, fileList);
+      onRemove && onRemove(file, fileList);
       setFileList(_toConsumableArray(fileList));
     } else {
       console.log(locale.uploader.deleteWord);
     }
   };
 
-  var fileChange = function fileChange(event) {
-    if (disabled) {
-      return;
-    }
-
-    var $el = event.target;
-    var files = $el.files;
+  var onChangeFn = function onChangeFn(res) {
+    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+    var tempFiles = res.tempFiles;
 
-    if (beforeUpload) {
-      beforeUpload(new Array().slice.call(files)).then(function (f) {
-        var _files = filterFiles(new Array().slice.call(f));
+    if (onBeforeUpload) {
+      onBeforeUpload(tempFiles).then(function (f) {
+        var _files = filterFiles(f);
 
         readFile(_files);
       });
     } else {
-      var _files = filterFiles(new Array().slice.call(files));
+      var _files = filterFiles(tempFiles);
 
       readFile(_files);
     }
 
-    props.change && props.change({
-      fileList: fileList,
-      event: event
+    onChange && onChange({
+      fileList: fileList
     });
-
-    if (clearInput) {
-      clearInputValue($el);
-    }
   };
 
   var handleItemClick = function handleItemClick(file) {
-    fileItemClick && fileItemClick(file);
+    onFileItemClick && onFileItemClick(file);
   };
 
   return React__default.createElement("div", _objectSpread({
     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(React__default.Fragment, null, capture ? React__default.createElement("input", {
-    className: "nut-uploader__input",
-    type: "file",
-    capture: "user",
-    name: name,
-    accept: accept,
-    disabled: disabled,
-    multiple: multiple,
-    onChange: fileChange
-  }) : React__default.createElement("input", {
+  }, React__default.createElement(React__default.Fragment, null, children, maximum > fileList.length && React__default.createElement(Button, {
     className: "nut-uploader__input",
-    type: "file",
-    name: name,
-    accept: accept,
-    disabled: disabled,
-    multiple: multiple,
-    onChange: fileChange
-  })))), fileList.length !== 0 && fileList.map(function (item, index) {
+    onClick: chooseImage
+  }))), fileList.length !== 0 && fileList.map(function (item, index) {
     return React__default.createElement("div", {
       className: "nut-uploader__preview ".concat(listType),
       key: item.uid
@@ -487,7 +546,7 @@ var InternalUploader = function InternalUploader(props, ref) {
       color: "rgba(0,0,0,0.6)",
       className: "close",
       name: "failure",
-      click: function click() {
+      onClick: function onClick() {
         return onDelete(item, index);
       }
     }), item.type.includes('image') ? React__default.createElement(React__default.Fragment, null, item.url && React__default.createElement("img", {
@@ -533,9 +592,14 @@ var InternalUploader = function InternalUploader(props, ref) {
       color: "#808080",
       className: "nut-uploader__preview-img__file__del",
       name: "del",
-      click: function click() {
+      onClick: function onClick() {
         return 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 ".concat(listType)
@@ -545,23 +609,9 @@ var InternalUploader = function InternalUploader(props, ref) {
     size: uploadIconSize,
     color: "#808080",
     name: uploadIcon
-  }), capture ? React__default.createElement("input", {
-    className: "nut-uploader__input",
-    type: "file",
-    capture: "user",
-    name: name,
-    accept: accept,
-    disabled: disabled,
-    multiple: multiple,
-    onChange: fileChange
-  }) : React__default.createElement("input", {
+  }), React__default.createElement(Button, {
     className: "nut-uploader__input",
-    type: "file",
-    name: name,
-    accept: accept,
-    disabled: disabled,
-    multiple: multiple,
-    onChange: fileChange
+    onClick: chooseImage
   })));
 };
 

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.3.3-beta.2 Wed Sep 14 2022 14:26:47 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.3.4-beta.0 Wed Sep 21 2022 14:34:39 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.3.3-beta.2 Wed Sep 14 2022 14:26:47 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.3.4-beta.0 Wed Sep 21 2022 14:34:39 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.3.3-beta.2 Wed Sep 14 2022 14:26:47 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.3.4-beta.0 Wed Sep 21 2022 14:34:39 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.3.3-beta.2 Wed Sep 14 2022 14:26:47 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.3.4-beta.0 Wed Sep 21 2022 14:34:39 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v1.3.3-beta.2 Wed Sep 14 2022 14:26:47 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.3.4-beta.0 Wed Sep 21 2022 14:34:39 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */