@titaui/pc 1.5.78 → 1.5.82

package/lib/components/upload/components/uploadedPreview.js

@@ -11,11 +11,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _titaUi = require("tita-ui");
 
-var _style = require("../style");
-
-require("../index.css");
+var _type = require("../type");
 
-var _util = require("../util");
+var _style = require("../style");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -57,14 +55,16 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
       var uploadResultItem = _this.props.uploadResultItem; // 上传中或不是图片文件时用默认icon
 
       if (uploadResultItem.uploadStatus === 2 || !uploadResultItem.IsImage) {
-        return /*#__PURE__*/_react["default"].createElement("img", {
-          src: (0, _util.getFileTypeMapIcon)(uploadResultItem.FileType),
-          className: "upload-preview-img"
+        return /*#__PURE__*/_react["default"].createElement(_style.PreviewImageIcon, {
+          className: "tu-icon-".concat((0, _type._dealAttachmentType)(uploadResultItem.FileType).FileType),
+          style: {
+            color: (0, _type._dealAttachmentType)(uploadResultItem.FileType).IconColor
+          }
         });
       } else {
         return /*#__PURE__*/_react["default"].createElement("img", {
           src: uploadResultItem.ClientUrl,
-          className: "upload-preview-img"
+          alt: ""
         }); // 上传成功且为图片时
       }
     };
@@ -72,19 +72,17 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
     _this.dealPreviewOptions = function (uploadStatus, index, deleteable, smallImageUrl) {
       var onSubmit = _this.props.onSubmit;
 
-      if (uploadStatus === 2 || uploadStatus === 1) {
+      if (uploadStatus === 2) {
         // 上传中
         return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
           content: "\u53D6\u6D88\u4E0A\u4F20",
           container: document.body
         }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "upload-file-action-wrapper"
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "tu-icon-canceled action-icon action-icon-delete",
+          className: "tu-icon-cross action-icon action-icon-delete",
           onMouseDown: function onMouseDown() {
             return onSubmit(index, 'cancel');
           }
-        })));
+        }));
       } else if (uploadStatus === 3) {
         // 上传成功
         if (smallImageUrl && deleteable) {
@@ -93,95 +91,84 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
             content: "\u9884\u89C8",
             container: document.body
           }, /*#__PURE__*/_react["default"].createElement("span", {
-            className: "upload-file-action-wrapper"
-          }, /*#__PURE__*/_react["default"].createElement("span", {
-            className: "tu-icon-yulan action-icon",
+            className: "tu-icon-magnifier-circle action-icon",
             onMouseDown: function onMouseDown() {
               return onSubmit(index, 'preview');
             }
-          }))), /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
+          })), /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
             content: "\u5220\u9664",
             container: document.body
           }, /*#__PURE__*/_react["default"].createElement("span", {
-            className: "upload-file-action-wrapper"
-          }, /*#__PURE__*/_react["default"].createElement("span", {
-            className: "tu-icon-canceled action-icon delete",
+            className: "tu-icon-cross action-icon action-icon-delete delete",
             onMouseDown: function onMouseDown() {
               return onSubmit(index, 'delete');
             }
-          })))];
+          }))];
         } else if (!smallImageUrl && deleteable) {
           // 不是图片但能删除
           return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
             content: "\u5220\u9664",
             container: document.body
           }, /*#__PURE__*/_react["default"].createElement("span", {
-            className: "upload-file-action-wrapper"
-          }, /*#__PURE__*/_react["default"].createElement("span", {
-            className: "tu-icon-canceled action-icon delete",
+            className: "tu-icon-cross action-icon action-icon-delete delete",
             onMouseDown: function onMouseDown() {
               return onSubmit(index, 'delete');
             }
-          })));
+          }));
         } else if (smallImageUrl && !deleteable) {
           // 是图片不能删除
           return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
             content: "\u9884\u89C8",
             container: document.body
-          }, /*#__PURE__*/_react["default"].createElement("span", {
-            className: "upload-file-action-wrapper"
           }, /*#__PURE__*/_react["default"].createElement("span", {
             className: "tu-icon-magnifier-circle action-icon",
             onMouseDown: function onMouseDown() {
               return onSubmit(index, 'preview');
             }
-          })));
+          }));
         } else {
           // 不是图片也不能删除
           return /*#__PURE__*/_react["default"].createElement("span", null);
         }
-      } else if (uploadStatus === 5) {
-        return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
-          content: "\u5220\u9664",
-          container: document.body
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "upload-file-action-wrapper"
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "tu-icon-canceled action-icon delete",
-          onMouseDown: function onMouseDown() {
-            return onSubmit(index, 'delete');
-          }
-        })));
       } else {
         // 4：上传失败
-        return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
-          content: "\u91CD\u65B0\u4E0A\u4F20",
-          container: document.body
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "upload-file-action-wrapper"
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "tu-icon-gengxin1 action-icon",
-          onMouseDown: function onMouseDown() {
-            return onSubmit(index, 'reupload');
-          }
-        }))), /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
+        return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
           content: "\u5220\u9664",
           container: document.body
         }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "upload-file-action-wrapper"
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "tu-icon-canceled action-icon delete",
+          className: "tu-icon-cross action-icon",
           onMouseDown: function onMouseDown() {
-            return onSubmit(index, 'delete');
+            return onSubmit(index, 'reupload');
           }
-        }))));
+        }));
       }
     };
 
+    _this.state = {
+      isDismiss: false
+    };
     return _this;
   }
 
   _createClass(UploadedPreview, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+
+      var _nextProps$uploadResu = nextProps.uploadResultItem,
+          percentComplete = _nextProps$uploadResu.percentComplete,
+          IsSuccess = _nextProps$uploadResu.IsSuccess;
+
+      if (percentComplete === 100 && IsSuccess) {
+        clearTimeout(this.updateStatusTimer);
+        this.updateStatusTimer = setTimeout(function () {
+          _this2.setState({
+            isDismiss: true
+          });
+        }, 2000);
+      }
+    }
+  }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       clearTimeout(this.updateStatusTimer);
@@ -194,6 +181,7 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
           className = _this$props.className,
           uploadResultItem = _this$props.uploadResultItem,
           index = _this$props.index;
+      var isDismiss = this.state.isDismiss;
       return /*#__PURE__*/_react["default"].createElement(_style.PreviewContent, {
         className: ['preview__content', className].join(' ')
       }, /*#__PURE__*/_react["default"].createElement(_style.PreviewImageWrapper, null, this.renderPreviewThumbnail()), /*#__PURE__*/_react["default"].createElement(_style.PreviewMessageWrapper, null, /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
@@ -202,14 +190,18 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_style.PreviewFileTitle, {
         "data-tip": uploadResultItem.FileName,
         key: uploadResultItem.uid
-      }, uploadResultItem.FileName, (uploadResultItem.uploadStatus === 2 || uploadResultItem.uploadStatus === 3) && uploadResultItem.percentComplete !== 100 ? /*#__PURE__*/_react["default"].createElement(_style.UploadProgress, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }, uploadResultItem.FileName, uploadResultItem.uploadStatus === 2 ? /*#__PURE__*/_react["default"].createElement(_style.UploadProgress, null, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           width: uploadResultItem.percentComplete + '%'
-        },
-        className: 'upload-file--progress'
-      })) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: uploadResultItem.uploadStatus === 3 || uploadResultItem.uploadStatus === 2 ? 'upload-file-size' : 'upload-file-size upload-file-size--error'
-      }, uploadResultItem.uploadStatus === 3 || uploadResultItem.uploadStatus === 2 ? (0, _util.getFileSize)(uploadResultItem.FileSize) : uploadResultItem.Msg)))), /*#__PURE__*/_react["default"].createElement(_style.PreviewOptionsWrapper, null, this.dealPreviewOptions(uploadResultItem.uploadStatus, index, uploadResultItem.Deleteable, uploadResultItem.SmallImageUrl), " "));
+        }
+      })) : /*#__PURE__*/_react["default"].createElement("div", null))), /*#__PURE__*/_react["default"].createElement(_style.UploadStatus, {
+        ref: "previewStatusText",
+        className: uploadResultItem.percentComplete === 100 ? 'preview__status-end' : '',
+        style: {
+          color: uploadResultItem.IsSuccess ? '#2dab92' : '#eb4447',
+          opacity: isDismiss ? 0 : 1
+        }
+      }, uploadResultItem.Msg)), /*#__PURE__*/_react["default"].createElement(_style.PreviewOptionsWrapper, null, this.dealPreviewOptions(uploadResultItem.uploadStatus, index, uploadResultItem.Deleteable, uploadResultItem.SmallImageUrl), " "));
     }
   }]);
 

package/lib/components/upload/index.js

@@ -19,16 +19,14 @@ var _requestV = require("../../utils/request-v1");
 
 var _popDownNotification = require("../pop-down-notification");
 
+var _viewer = require("../viewer");
+
 var _uploadedPreview = _interopRequireDefault(require("./components/uploadedPreview"));
 
 var _type = require("./type");
 
 var _style = require("./style");
 
-var _imgViewer = _interopRequireDefault(require("../img-viewer"));
-
-var _util = require("./util");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -73,6 +71,25 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+var RVIewerOptions = {
+  className: 'preview-image-container',
+  toolbar: {
+    zoomIn: 4,
+    zoomOut: 4,
+    oneToOne: 4,
+    reset: 4,
+    prev: 4,
+    play: {
+      show: false
+    },
+    next: 4,
+    rotateLeft: 4,
+    rotateRight: 4,
+    flipHorizontal: false,
+    flipVertical: false
+  }
+};
+
 var Upload = /*#__PURE__*/function (_PureComponent) {
   _inherits(Upload, _PureComponent);
 
@@ -102,9 +119,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
     };
 
     _this.dealSelectFiles = function (uploadSelectFilesObj) {
-      var _this$state = _this.state,
-          uploadSuccessFiles = _this$state.uploadSuccessFiles,
-          selectFiles = _this$state.selectFiles;
+      var uploadSuccessFiles = _this.state.uploadSuccessFiles;
       var _this$props = _this.props,
           action = _this$props.action,
           fileNumLimit = _this$props.fileNumLimit,
@@ -114,17 +129,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
       var uploadSuccessFilesLen = uploadSuccessFiles.length; // 已上传成功的文件数量
 
-      var allFilesTotal = uploadSuccessFilesLen + uploadSelectFilesLen; // 把文件字节流保存，用来文件重传用
-
-      uploadSelectFilesObj.forEach(function (ele) {
-        if (!selectFiles[ele.name]) {
-          selectFiles[ele.name] = ele;
-        }
-      });
-
-      _this.setState({
-        selectFiles: selectFiles
-      });
+      var allFilesTotal = uploadSuccessFilesLen + uploadSelectFilesLen;
 
       if (filesTotal && allFilesTotal > filesTotal) {
         _popDownNotification.Toast.Error("\u6700\u591A\u53EF\u4E0A\u4F20 ".concat(filesTotal, " \u4E2A\u6587\u4EF6"), {
@@ -163,6 +168,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
         uploadStartFile = {
           FileName: element.name,
           FileType: (0, _type._dealAttachmentType)(uploadFileType).FileType,
+          IconColor: (0, _type._dealAttachmentType)(uploadFileType).IconColor,
           FileSize: element.size,
           FileLastModified: element.lastModified,
           IsImage: (0, _type._dealAttachmentType)(uploadFileType).IsImage,
@@ -183,19 +189,12 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
           DownloadUrl: '',
           Msg: '',
           AllowUploadAttachmentSize: 50,
-          Deleteable: true,
-          requestXHR: new XMLHttpRequest() //在这创建是为了取消用
-
+          Deleteable: true
         };
         var sameFile = uploadSuccessFiles.find(function (file) {
-          return _this.isSameFile(file, uploadStartFile) && file.uploadStatus !== 4;
+          return _this.isSameFile(file, uploadStartFile);
         });
-
-        if (sameFile) {
-          return;
-        }
-
-        ;
+        if (sameFile) return;
         uploadStartFiles.push(uploadStartFile);
 
         _this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件
@@ -210,17 +209,18 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
     _this._dealUploadXHRRequest = function (formData, url, uploadStartFile) {
       if (uploadStartFile.FileSize > _this.props.fileSizeLimit * 1024 * 1024) {
+        _popDownNotification.Toast.Error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 ".concat(_this.props.fileSizeLimit, "M"));
+
         setTimeout(function () {
           _this._dealUploadSuccess(_objectSpread(_objectSpread({}, uploadStartFile), {
-            Msg: '上传失败，文件过大',
-            IsImage: false,
-            uploadStatus: 5
+            Msg: '文件过大！',
+            IsImage: false
           }));
         }, 300);
         return;
       }
 
-      var xhr = uploadStartFile.requestXHR;
+      var xhr = new XMLHttpRequest(); //创建xhr
 
       xhr.onreadystatechange = function () {
         if (xhr.readyState == 4 && xhr.status == 200) {
@@ -236,7 +236,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
 
       xhr.upload.onprogress = function (evt) {
-        var uploadSuccessFiles = _toConsumableArray(_this.state.uploadSuccessFiles);
+        var uploadSuccessFiles = JSON.parse(JSON.stringify(_this.state.uploadSuccessFiles));
 
         if (evt.lengthComputable) {
           uploadSuccessFiles.forEach(function (item) {
@@ -253,22 +253,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
         }
       };
 
-      xhr.upload.onerror = function (evt) {
-        var uploadSuccessFiles = _toConsumableArray(_this.state.uploadSuccessFiles);
-
-        uploadSuccessFiles.forEach(function (item) {
-          if (_this.isSameFile(item, uploadStartFile)) {
-            item.uploadStatus = 4; // 上传失败
-
-            item.percentComplete = Math.round(evt.loaded * 100 / evt.total);
-            item.Msg = '网络异常，请重新上传';
-          }
-        });
-
-        _this.setState({
-          uploadSuccessFiles: uploadSuccessFiles
-        });
-      };
+      xhr.upload.onerror = function (evt) {};
 
       xhr.open('POST', url, true);
       xhr.send(formData); //开始上传，发送form数据
@@ -276,19 +261,8 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
     _this._dealUploadStart = function (uploadStartFiles) {
       var uploadSuccessFiles = [];
-
-      var uploadedFiles = _toConsumableArray(_this.state.uploadSuccessFiles); // 处理重传文件,直接展开会导致同样的文件展示两个
-
-
-      var uploadFilesConcatArr = uploadedFiles;
-      var isReloadFile = uploadFilesConcatArr.filter(function (item) {
-        return _this.isSameFile(item, uploadStartFiles[0]);
-      });
-
-      if (!isReloadFile || isReloadFile.length === 0) {
-        uploadFilesConcatArr = [].concat(_toConsumableArray(uploadedFiles), _toConsumableArray(uploadStartFiles));
-      }
-
+      var uploadedFiles = JSON.parse(JSON.stringify(_this.state.uploadSuccessFiles));
+      var uploadFilesConcatArr = [].concat(_toConsumableArray(uploadedFiles), _toConsumableArray(uploadStartFiles));
       uploadFilesConcatArr.forEach(function (item) {
         var res = uploadSuccessFiles.filter(function (v) {
           return _this.isSameFile(item, v);
@@ -311,9 +285,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
     _this._dealUploadSuccess = function (uploadSuccessFile) {
       var onSubmit = _this.props.onSubmit;
-
-      var uploadSuccessFiles = _toConsumableArray(_this.state.uploadSuccessFiles);
-
+      var uploadSuccessFiles = JSON.parse(JSON.stringify(_this.state.uploadSuccessFiles));
       var uploadSuccessFilesFormat = uploadSuccessFiles.map(function (element) {
         return _this.isSameFile(uploadSuccessFile, element) ? uploadSuccessFile : element;
       });
@@ -325,7 +297,9 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
       _this.setState({
         uploadSuccessFiles: uploadSuccessFilesFormat,
-        attachmentPreviewUrl: (0, _util.getPreviewImgs)(uploadSuccessFilesFormat)
+        attachmentPreviewUrl: uploadSuccessFilesFormat.map(function (item) {
+          return item.ClientUrl;
+        })
       });
     };
 
@@ -334,14 +308,8 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
           onSubmit = _this$props2.onSubmit,
           onDelete = _this$props2.onDelete;
 
-      if (options === 'cancel') {
-        var reUploadFileInfo = _this.state.uploadSuccessFiles[index];
-        reUploadFileInfo.requestXHR.abort();
-      }
-
-      if (options === 'delete' || options === 'cancel') {
-        var uploadResultFiles = _toConsumableArray(_this.state.uploadSuccessFiles);
-
+      if (options === 'delete' || options === 'cancel' || options === 'reupload') {
+        var uploadResultFiles = JSON.parse(JSON.stringify(_this.state.uploadSuccessFiles));
         var deleteFiles = uploadResultFiles[index];
         onDelete && onDelete(deleteFiles.documentId ? deleteFiles.documentId : deleteFiles.DfsPath);
         uploadResultFiles.splice(index, 1);
@@ -356,17 +324,12 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
           uploadSuccessFiles: uploadResultFiles
         });
       } else if (options === 'preview') {
-        _this.refs.imgViewerRef.show(index);
-      } else if (options === 'reupload') {
-        var _reUploadFileInfo = _this.state.uploadSuccessFiles[index];
-        var reUploadFile = _this.state.selectFiles[_reUploadFileInfo.FileName];
-
-        _this.dealSelectFiles([reUploadFile]);
+        _this.refs.RViewers.show(index);
       }
     };
 
     _this.isSameFile = function (item, element) {
-      return item.FileName === element.FileName && item.FileSize === element.FileSize && item.FileLastModified === element.FileLastModified;
+      return item.documentId && element.documentId ? item.documentId == element.documentId : item.uid == element.uid;
     };
 
     _this.renderUploadList = function (list) {
@@ -376,10 +339,10 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_Portals["default"], {
         domNode: attachmentPreviewBox,
         className: "uploadFile__preview__list"
-      }, /*#__PURE__*/_react["default"].createElement(_imgViewer["default"], {
-        data: attachmentPreviewUrl,
-        ref: "imgViewerRef",
-        showDownload: false
+      }, /*#__PURE__*/_react["default"].createElement(_viewer.RViewer, {
+        imageUrls: attachmentPreviewUrl,
+        ref: "RViewers",
+        options: RVIewerOptions
       }), list.map(function (item, index) {
         return /*#__PURE__*/_react["default"].createElement(_uploadedPreview["default"], {
           uploadResultItem: item,
@@ -404,8 +367,9 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
     _this.state = {
       uploadSuccessFiles: props.attachments || [],
-      attachmentPreviewUrl: props.attachments ? (0, _util.getPreviewImgs)(props.attachments) : [],
-      selectFiles: {}
+      attachmentPreviewUrl: props.attachments ? props.attachments.map(function (item) {
+        return item.ClientUrl;
+      }) : []
     };
     return _this;
   }
@@ -416,7 +380,9 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
       var attachments = this.props.attachments;
       this.setState({
         uploadSuccessFiles: attachments || [],
-        attachmentPreviewUrl: attachments ? (0, _util.getPreviewImgs)(attachments) : []
+        attachmentPreviewUrl: attachments ? attachments.map(function (item) {
+          return item.ClientUrl;
+        }) : []
       });
     }
   }, {
@@ -430,7 +396,9 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
       } else {
         this.setState({
           // uploadSuccessFiles: nextProps.attachments || [],
-          attachmentPreviewUrl: nextProps.attachments ? (0, _util.getPreviewImgs)(nextProps.attachments) : []
+          attachmentPreviewUrl: nextProps.attachments ? nextProps.attachments.map(function (item) {
+            return item.ClientUrl;
+          }) : []
         });
       }
 

package/lib/components/upload/style.js

@@ -21,27 +21,27 @@ var UploadForm = _styledComponents["default"].form(_templateObject2 || (_templat
 
 exports.UploadForm = UploadForm;
 
-var PreviewContent = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 320px;\n  height: 60px;\n  padding: 10px;\n  box-sizing: border-box;\n  font-size: 12px;\n  background-color: #f7f8fa;\n  display: flex;\n  align-items: center;\n"])));
+var PreviewContent = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 310px;\n  height: 30px;\n  padding: 5px;\n  font-size: 12px;\n  background-color: #f5f8fa;\n  display: flex;\n  align-items: center;\n"])));
 
 exports.PreviewContent = PreviewContent;
 
-var PreviewImageWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n  margin-right: 8px;\n  text-align: center;\n  border-radius: 4px;\n\n  img {\n    max-width: 36px;\n    max-height: 36px;\n    border-radius: 4px;\n  }\n"])));
+var PreviewImageWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 30px;\n  height: 30px;\n  line-height: 30px;\n  margin-right: 10px;\n  background-color: #e4ebf0;\n  text-align: center;\n\n  img {\n    max-width: 30px;\n    max-height: 30px;\n    background-color: #fff;\n  }\n"])));
 
 exports.PreviewImageWrapper = PreviewImageWrapper;
 
-var PreviewImageIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n"])));
+var PreviewImageIcon = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 30px;\n  height: 30px;\n  line-height: 30px;\n  font-size: 30px;\n  display: inline-block;\n  text-align: center;\n  background-color: #ffffff;\n"])));
 
 exports.PreviewImageIcon = PreviewImageIcon;
 
-var PreviewMessageWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  /* justify-content: space-between; */\n  align-items: center;\n"])));
+var PreviewMessageWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 
 exports.PreviewMessageWrapper = PreviewMessageWrapper;
 
-var PreviewFileTitle = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 184px;\n  font-size: 14px;\n  line-height: 22px;\n  color: #3F4755;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: keep-all;\n  .upload-file-size {\n    font-size: 12px;\n    color: #89919F;\n    line-height: 18px;\n  }\n  .upload-file-size--error {\n    color: #f05e5e;\n  }\n"])));
+var PreviewFileTitle = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 160px;\n  color: #647481;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 
 exports.PreviewFileTitle = PreviewFileTitle;
 
-var UploadProgress = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  width: 100%;\n  height: 4px;\n  border-radius: 2px;\n  background: #E9ECF0;\n\n  div {\n    height: 100%;\n    border-radius: 2px;\n  }\n  .upload-file--progress {\n    background: #2879ff;\n  }\n"])));
+var UploadProgress = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 4px;\n  border-radius: 4px;\n  background: #E4ECF2;\n\n  div {\n    height: 100%;\n    border-radius: 4px;\n    background: #2879ff;\n  }\n"])));
 
 exports.UploadProgress = UploadProgress;
 
@@ -49,6 +49,6 @@ var UploadStatus = _styledComponents["default"].span(_templateObject9 || (_templ
 
 exports.UploadStatus = UploadStatus;
 
-var PreviewOptionsWrapper = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-left: 6px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  span {\n    font-size: 14px;\n    color: #a9b8bf;\n    vertical-align: middle;\n    cursor: pointer;\n  }\n"])));
+var PreviewOptionsWrapper = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-left: 6px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  span {\n    margin-left: 4px;\n    font-size: 14px;\n    color: #a9b8bf;\n    vertical-align: middle;\n    cursor: pointer;\n\n    &.tu-icon-magnifier-circle:hover {\n      color: #2879ff;\n    }\n\n    &.action-icon-delete:hover {\n      color: #f05e5e;\n    }\n  }\n"])));
 
 exports.PreviewOptionsWrapper = PreviewOptionsWrapper;

package/lib/components/upload/type.js

@@ -7,27 +7,27 @@ exports._dealAttachmentType = void 0;
 
 var _dealAttachmentType = function _dealAttachmentType(fileType) {
   var IsImage = false;
-  var FileType = fileType; // if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
-  //   IsImage = true;
-  //   IconColor = '#44CF85';
-  // } else if (/^(exe|pdf|txt|doc|docx|ppt|pptx|xls|xlsx)$/.test(fileType)) {
-  //   IconColor = '#49B9DD';
-  // } else if (/^(rar|zip)$/.test(fileType)) {
-  //   IconColor = '#FFBA46';
-  // } else if (/^(mp3|wma|wav|flac|ape|ogg|aac|m4a)$/.test(fileType)) {
-  //   IconColor = '#8479D6';
-  // } else if (/^(mp4|mkv|rm|rmvb|avi|3gp|flv|wmv|asf|mpeg|mpg|mov|ts|m4v)$/.test(fileType)) {
-  //   IconColor = '#3EBBA8';
-  // } else {
-  //   FileType = 'none'
-  // }
+  var IconColor = '#FF730C';
+  var FileType = fileType;
 
-  if (/^(jpg|png|gif|jpeg|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
+  if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
     IsImage = true;
+    IconColor = '#44CF85';
+  } else if (/^(exe|pdf|txt|doc|docx|ppt|pptx|xls|xlsx)$/.test(fileType)) {
+    IconColor = '#49B9DD';
+  } else if (/^(rar|zip)$/.test(fileType)) {
+    IconColor = '#FFBA46';
+  } else if (/^(mp3|wma|wav|flac|ape|ogg|aac|m4a)$/.test(fileType)) {
+    IconColor = '#8479D6';
+  } else if (/^(mp4|mkv|rm|rmvb|avi|3gp|flv|wmv|asf|mpeg|mpg|mov|ts|m4v)$/.test(fileType)) {
+    IconColor = '#3EBBA8';
+  } else {
+    FileType = 'none';
   }
 
   return {
     IsImage: IsImage,
+    IconColor: IconColor,
     FileType: FileType
   };
 };