@nutui/nutui-react 1.1.4-beta.1 → 1.1.4-beta.2

package/dist/esm/Uploader.js

@@ -4,13 +4,13 @@ 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", "name", "accept", "disabled", "multiple", "url", "defaultImg", "headers", "timeout", "method", "xhrState", "withCredentials", "data", "isPreview", "isDeletable", "maximum", "capture", "maximize", "className", "autoUpload", "clearInput", "start", "removeImage", "progress", "success", "update", "failure", "oversize", "beforeUpload", "beforeDelete"];
+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"];
 
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React__default, { useState, useImperativeHandle } from 'react';
+import React__default, { useState, useEffect, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import Icon from './Icon.js';
 import { c as cn } from './bem-893ad28d.js';
@@ -111,6 +111,8 @@ var defaultProps = {
   url: '',
   maximum: 1,
   uploadIcon: 'photograph',
+  uploadIconSize: '',
+  listType: 'picture',
   name: 'file',
   accept: '*',
   disabled: false,
@@ -138,6 +140,8 @@ var FileItem = /*#__PURE__*/_createClass(function FileItem() {
 
   _defineProperty(this, "status", 'ready');
 
+  _defineProperty(this, "message", '准备中..');
+
   _defineProperty(this, "uid", new Date().getTime().toString());
 
   _defineProperty(this, "name", void 0);
@@ -153,8 +157,11 @@ var InternalUploader = function InternalUploader(props, ref) {
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
       children = _defaultProps$props.children,
       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,
@@ -175,6 +182,8 @@ var InternalUploader = function InternalUploader(props, ref) {
       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,
@@ -194,6 +203,11 @@ var InternalUploader = function InternalUploader(props, ref) {
       uploadQueue = _useState4[0],
       setUploadQueue = _useState4[1];
 
+  useEffect(function () {
+    if (defaultFileList) {
+      setFileList(defaultFileList);
+    }
+  }, [defaultFileList]);
   var b = cn('uploader');
   var classes = classNames(className, b(''));
   useImperativeHandle(ref, function () {
@@ -248,6 +262,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         fileList.map(function (item) {
           if (item.uid === fileItem.uid) {
             item.status = 'ready';
+            item.message = '准备上传';
           }
         });
         return _toConsumableArray(fileList);
@@ -260,6 +275,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         fileList.map(function (item) {
           if (item.uid === fileItem.uid) {
             item.status = 'uploading';
+            item.message = '上传中...';
           }
         });
         return _toConsumableArray(fileList);
@@ -276,6 +292,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         fileList.map(function (item) {
           if (item.uid === fileItem.uid) {
             item.status = 'success';
+            item.message = '上传成功';
           }
         });
         return _toConsumableArray(fileList);
@@ -291,6 +308,7 @@ var InternalUploader = function InternalUploader(props, ref) {
         fileList.map(function (item) {
           if (item.uid === fileItem.uid) {
             item.status = 'error';
+            item.message = '上传失败';
           }
         });
         return _toConsumableArray(fileList);
@@ -323,6 +341,7 @@ var InternalUploader = function InternalUploader(props, ref) {
       fileItem.type = file.type;
       fileItem.formData = formData;
       fileItem.uid = file.lastModified + fileItem.uid;
+      fileItem.message = '准备上传';
       executeUpload(fileItem, index);
 
       if (isPreview && file.type.includes('image')) {
@@ -412,9 +431,13 @@ var InternalUploader = function InternalUploader(props, ref) {
     }
   };
 
+  var handleItemClick = function handleItemClick(file) {
+    fileItemClick && fileItemClick(file);
+  };
+
   return React__default.createElement("div", _objectSpread({
     className: classes
-  }, restProps), children ? React__default.createElement("div", {
+  }, 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",
@@ -433,32 +456,75 @@ var InternalUploader = function InternalUploader(props, ref) {
     disabled: disabled,
     multiple: multiple,
     onChange: fileChange
-  })))) : React__default.createElement(React__default.Fragment, null, fileList.length !== 0 && fileList.map(function (item, index) {
-    console.log('item', item);
+  })))), fileList.length !== 0 && fileList.map(function (item, index) {
     return React__default.createElement("div", {
-      className: "nut-uploader__preview",
+      className: "nut-uploader__preview ".concat(listType),
       key: item.uid
-    }, React__default.createElement("div", {
+    }, listType == 'picture' && !children && React__default.createElement("div", {
       className: "nut-uploader__preview-img"
-    }, isDeletable && React__default.createElement(Icon, {
+    }, 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, {
+      color: "#fff",
+      name: "".concat(item.status == 'error' ? 'failure' : 'loading')
+    }), React__default.createElement("div", {
+      className: "nut-uploader__preview__progress__msg"
+    }, item.message)), isDeletable && React__default.createElement(Icon, {
       color: "rgba(0,0,0,0.6)",
       className: "close",
-      name: "circle-close",
+      name: "failure",
       click: function click() {
         return onDelete(item, index);
       }
-    }), item.type.includes('image') && item.url && React__default.createElement("img", {
+    }), 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
-    }), !item.type.includes('image') && defaultImg && React__default.createElement("img", {
+      src: item.url,
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    })) : React__default.createElement(React__default.Fragment, null, defaultImg ? React__default.createElement("img", {
       className: "nut-uploader__preview-img__c",
-      src: defaultImg
-    }), item.status !== 'success' && React__default.createElement("div", {
+      src: defaultImg,
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    }) : React__default.createElement("div", {
+      className: "nut-uploader__preview-img__file"
+    }, React__default.createElement("div", {
+      onClick: function onClick() {
+        return handleItemClick(item);
+      },
+      className: "nut-uploader__preview-img__file__name"
+    }, React__default.createElement(Icon, {
+      color: "#808080",
+      name: "link"
+    }), "\xA0", item.name))), React__default.createElement("div", {
       className: "tips"
-    }, item.status)));
-  }), maximum > fileList.length && React__default.createElement("div", {
-    className: "nut-uploader__upload"
+    }, item.name)), listType == 'list' && React__default.createElement("div", {
+      className: "nut-uploader__preview-list"
+    }, React__default.createElement("div", {
+      className: "nut-uploader__preview-img__file__name ".concat(item.status),
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    }, React__default.createElement(Icon, {
+      name: "link"
+    }), "\xA0", item.name), React__default.createElement(Icon, {
+      color: "#808080",
+      className: "nut-uploader__preview-img__file__del",
+      name: "del",
+      click: function click() {
+        return onDelete(item, index);
+      }
+    })));
+  }), maximum > fileList.length && listType == 'picture' && !children && React__default.createElement("div", {
+    className: "nut-uploader__upload ".concat(listType)
   }, React__default.createElement(Icon, {
+    size: uploadIconSize,
     color: "#808080",
     name: uploadIcon
   }), capture ? React__default.createElement("input", {
@@ -478,7 +544,7 @@ var InternalUploader = function InternalUploader(props, ref) {
     disabled: disabled,
     multiple: multiple,
     onChange: fileChange
-  }))));
+  })));
 };
 
 var Uploader = React__default.forwardRef(InternalUploader);

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.1.4-beta.1 Wed May 11 2022 10:28:43 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.1.4-beta.2 Fri May 20 2022 09:39:16 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 v1.1.4-beta.1 Wed May 11 2022 10:28:43 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.1.4-beta.2 Fri May 20 2022 09:39:16 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 v1.1.4-beta.1 Wed May 11 2022 10:28:43 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.1.4-beta.2 Fri May 20 2022 09:39:16 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 v1.1.4-beta.1 Wed May 11 2022 10:28:43 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.1.4-beta.2 Fri May 20 2022 09:39:16 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */