@titaui/pc 1.5.82 → 1.5.83

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

@@ -11,10 +11,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _titaUi = require("tita-ui");
 
-var _type = require("../type");
-
 var _style = require("../style");
 
+require("../index.css");
+
+var _util = require("../util");
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -55,16 +57,14 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
       var uploadResultItem = _this.props.uploadResultItem; // 上传中或不是图片文件时用默认icon
 
       if (uploadResultItem.uploadStatus === 2 || !uploadResultItem.IsImage) {
-        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
-          }
+        return /*#__PURE__*/_react["default"].createElement("img", {
+          src: (0, _util.getFileTypeMapIcon)(uploadResultItem.FileType),
+          className: "upload-preview-img"
         });
       } else {
         return /*#__PURE__*/_react["default"].createElement("img", {
           src: uploadResultItem.ClientUrl,
-          alt: ""
+          className: "upload-preview-img"
         }); // 上传成功且为图片时
       }
     };
@@ -72,17 +72,19 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
     _this.dealPreviewOptions = function (uploadStatus, index, deleteable, smallImageUrl) {
       var onSubmit = _this.props.onSubmit;
 
-      if (uploadStatus === 2) {
+      if (uploadStatus === 2 || uploadStatus === 1) {
         // 上传中
         return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
           content: "\u53D6\u6D88\u4E0A\u4F20",
           container: document.body
         }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "tu-icon-cross action-icon action-icon-delete",
+          className: "upload-file-action-wrapper"
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          className: "tu-icon-canceled action-icon action-icon-delete",
           onMouseDown: function onMouseDown() {
             return onSubmit(index, 'cancel');
           }
-        }));
+        })));
       } else if (uploadStatus === 3) {
         // 上传成功
         if (smallImageUrl && deleteable) {
@@ -91,84 +93,95 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
             content: "\u9884\u89C8",
             container: document.body
           }, /*#__PURE__*/_react["default"].createElement("span", {
-            className: "tu-icon-magnifier-circle action-icon",
+            className: "upload-file-action-wrapper"
+          }, /*#__PURE__*/_react["default"].createElement("span", {
+            className: "tu-icon-yulan 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: "tu-icon-cross action-icon action-icon-delete delete",
+            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 if (!smallImageUrl && deleteable) {
           // 不是图片但能删除
           return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
             content: "\u5220\u9664",
             container: document.body
           }, /*#__PURE__*/_react["default"].createElement("span", {
-            className: "tu-icon-cross action-icon action-icon-delete delete",
+            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 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 {
-        // 4：上传失败
+      } else if (uploadStatus === 5) {
         return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
           content: "\u5220\u9664",
           container: document.body
         }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: "tu-icon-cross action-icon",
+          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, {
+          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');
+          }
+        }))));
       }
     };
 
-    _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);
@@ -181,7 +194,6 @@ 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, {
@@ -190,18 +202,14 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_style.PreviewFileTitle, {
         "data-tip": uploadResultItem.FileName,
         key: uploadResultItem.uid
-      }, uploadResultItem.FileName, uploadResultItem.uploadStatus === 2 ? /*#__PURE__*/_react["default"].createElement(_style.UploadProgress, null, /*#__PURE__*/_react["default"].createElement("div", {
+      }, uploadResultItem.FileName, (uploadResultItem.uploadStatus === 2 || uploadResultItem.uploadStatus === 3) && uploadResultItem.percentComplete !== 100 ? /*#__PURE__*/_react["default"].createElement(_style.UploadProgress, null, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           width: uploadResultItem.percentComplete + '%'
-        }
-      })) : /*#__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), " "));
+        },
+        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), " "));
     }
   }]);
 

package/lib/components/upload/img/doc.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="29.782%" x2="83.621%" y2="29.782%" id="a"><stop stop-color="#2879FF" offset="0%"/><stop stop-color="#005BDC" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#88BCFF" offset="0%"/><stop stop-color="#2879FF" offset="100%"/></linearGradient><filter x="-31.7%" y="-38%" width="163.3%" height="176%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".4" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.105882353 0 0 0 0 0.435294118 0 0 0 0 0.952941176 0 0 0 1 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><path d="M0 .452h28v27.097H0z"/><path d="M8.089 8.129h15.555c.86 0 1.556.668 1.556 1.492v14.177c0 .824-.696 1.492-1.556 1.492H8.09c-.86 0-1.556-.668-1.556-1.492V9.621c0-.824.697-1.492 1.556-1.492z" fill="url(#a)" fill-rule="nonzero"/><path d="M20.291 2.71c.84 0 1.521.674 1.521 1.505v19.57c0 .831.681 1.505 1.521 1.505H4.321c-.84 0-1.521-.674-1.521-1.505V4.215c0-.831.681-1.505 1.521-1.505h15.97z" fill="url(#b)" fill-rule="nonzero"/><g filter="url(#c)" transform="translate(6.533 8.773)"><path d="M.677 4.775h9.846a.677.677 0 1 1 0 1.355H.677a.677.677 0 1 1 0-1.355z" fill="#D2E3FF"/><path d="M.677 1.162h4.246a.677.677 0 0 1 0 1.355H.677a.677.677 0 0 1 0-1.355z" fill="#FFF"/><path d="M.677 8.351h9.846a.677.677 0 1 1 0 1.355H.677a.677.677 0 0 1 0-1.355z" fill="#A8C9FF"/></g></g></svg>

package/lib/components/upload/img/other.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="29.782%" x2="83.621%" y2="29.782%" id="a"><stop stop-color="#26D8F0" offset="0%"/><stop stop-color="#00A7BD" offset="100%"/></linearGradient><linearGradient x1="50%" y1="99.348%" x2="50%" y2="0%" id="b"><stop stop-color="#00BDD6" offset="0%"/><stop stop-color="#9EF4FF" offset="100%"/></linearGradient><filter x="-31.7%" y="-35.3%" width="163.3%" height="170.6%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".4" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0.741176471 0 0 0 0 0.839215686 0 0 0 1 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><path d="M0 .452h28v27.097H0z"/><path d="M8.089 7.677h15.555c.86 0 1.556.669 1.556 1.493v14.176c0 .825-.696 1.493-1.556 1.493H8.09c-.86 0-1.556-.668-1.556-1.493V9.17c0-.824.697-1.493 1.556-1.493z" fill="url(#a)" fill-rule="nonzero" transform="translate(0 .452)"/><path d="M20.291 2.258c.84 0 1.521.674 1.521 1.505v19.57c0 .832.681 1.506 1.521 1.506H4.321c-.84 0-1.521-.674-1.521-1.506V3.763c0-.831.681-1.505 1.521-1.505h15.97z" fill="url(#b)" fill-rule="nonzero" transform="translate(0 .452)"/><g filter="url(#c)" transform="translate(6.3 8.6)" fill-rule="nonzero"><path d="M8.846 1.02H3.395l1.267 2.198A2 2 0 0 0 6.38 4.22l4.126.031V2.664c0-.916-.753-1.643-1.66-1.643zm0 1.175c.268 0 .486.21.486.47v.399l-3.416-.02-.49-.85h3.42z" fill="#C7F8FF"/><path d="M3.298 0H1.403C.628 0 0 .628 0 1.403v7.964c0 .775.628 1.403 1.403 1.403h9.193a1.403 1.403 0 0 0 1.403-1.403L12 4.545l-.006-.126a1.4 1.4 0 0 0-1.373-1.27l-4.678-.037L4.615.807C4.331.337 3.856 0 3.298 0zM1.403 1.174h1.895c.094 0 .222.09.306.23l1.49 2.585c.104.18.295.291.503.293l5.01.04c.12.002.219.102.22.225l-.002 4.82a.23.23 0 0 1-.229.23H1.403a.23.23 0 0 1-.23-.23V1.403a.23.23 0 0 1 .23-.23z" fill="#FFF"/></g></g></svg>

package/lib/components/upload/img/pdf.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="29.782%" x2="83.621%" y2="29.782%" id="a"><stop stop-color="#FD4F54" offset="0%"/><stop stop-color="#CD1116" offset="100%"/></linearGradient><linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="b"><stop stop-color="#EC3C3C" offset="0%"/><stop stop-color="#FF8383" offset="100%"/></linearGradient><linearGradient x1="47.638%" y1="10.393%" x2="52.642%" y2="90.65%" id="d"><stop stop-color="#FFF" offset="0%"/><stop stop-color="#F6AFAF" offset="45.302%"/><stop stop-color="#FFF" offset="100%"/></linearGradient><filter x="-15.6%" y="-15.6%" width="131.2%" height="131.2%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".5" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".25" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.878431373 0 0 0 0 0.125490196 0 0 0 0 0.125490196 0 0 0 1 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><path d="M0 .452h28v27.097H0z"/><path d="M8.089 8.129h15.555c.86 0 1.556.668 1.556 1.492v14.177c0 .824-.696 1.492-1.556 1.492H8.09c-.86 0-1.556-.668-1.556-1.492V9.621c0-.824.697-1.492 1.556-1.492z" fill="url(#a)" fill-rule="nonzero"/><path d="M20.291 2.71c.84 0 1.521.674 1.521 1.505v19.57c0 .831.681 1.505 1.521 1.505H4.321c-.84 0-1.521-.674-1.521-1.505V4.215c0-.831.681-1.505 1.521-1.505h15.97z" fill="url(#b)" fill-rule="nonzero"/><g filter="url(#c)" transform="translate(4 6.032)" fill-rule="nonzero"><path d="m11.249.837.176.048.189.062c.729.268 1.145.751 1.297 1.338.31 1.258-.573 2.82-2.161 4.553l-.334.355.101.388c.175.649.362 1.257.564 1.823l.155.417.131.33.215.099c1.977.926 3.282 1.856 3.643 2.845l.045.141.032.143c.103.492-.05.963-.441 1.359-.329.282-.684.43-1.06.43-1.233 0-2.347-1.514-3.368-3.854l-.082-.188-.421-.174a24.406 24.406 0 0 0-1.997-.705l-.49-.143L7.043 10l-.206.136c-1.307.845-2.517 1.418-3.54 1.549l-.217.02-.21.008c-.924 0-1.603-.48-1.851-1.311-.172-.587-.078-1.098.184-1.43.4-.557 1.189-.824 2.353-.824.815 0 1.813.13 2.908.379l.322.076.345-.251c.414-.31.815-.636 1.195-.97l.374-.338.28-.267-.04-.192c-.412-2.088-.448-3.81.134-4.852l.092-.151.096-.135c.465-.59 1.17-.801 1.986-.609zm.968 11.202.039.07c.628 1.126 1.235 1.783 1.545 1.783.033 0 .077-.018.145-.075.085-.085.094-.119.08-.18-.073-.369-.656-.928-1.695-1.534l-.114-.064zm-8.66-2.594c-.813 0-1.194.138-1.303.27l-.024.046c-.024.053-.027.134.016.289.065.26.22.386.625.386.511 0 1.225-.234 2.084-.68l.27-.146-.089-.016a10.444 10.444 0 0 0-1.345-.145l-.234-.004zM9.333 8.21l-.263.229-.337.283-.374.305.172.052c.36.112.723.235 1.078.364l.12.045-.067-.195a21.92 21.92 0 0 1-.205-.656l-.124-.427zm1.348-6.148a.506.506 0 0 0-.418.193c-.348.437-.439 1.523-.247 2.97l.061.414.085-.095c1.02-1.189 1.577-2.254 1.512-2.853l-.016-.095c-.031-.158-.143-.297-.471-.415l-.134-.043a.994.994 0 0 0-.372-.076z" fill="#FFF"/><path d="m10.416 7.193.101.388c.175.649.362 1.257.564 1.823l.155.417.131.33c.817 2.33 1.982 3.858 3.494 4.587-.329.282-.684.43-1.06.43-1.233 0-2.347-1.514-3.368-3.854l-.082-.188a25.48 25.48 0 0 1-.766-2.113 27.948 27.948 0 0 1-.605-2.237l-.038-.192c-.413-2.088-.449-3.81.133-4.852l.092-.151.096-.135c.465-.59 1.17-.801 1.986-.609l.176.048.189.062c.729.268 1.684 1.674-.427 1.23-1.408-.297-1.665 1.375-.77 5.016z" fill="url(#d)"/></g></g></svg>

package/lib/components/upload/img/ppt.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="29.782%" x2="83.621%" y2="29.782%" id="a"><stop stop-color="#F0A326" offset="0%"/><stop stop-color="#D68500" offset="100%"/></linearGradient><linearGradient x1="50%" y1="99.348%" x2="50%" y2="0%" id="b"><stop stop-color="#F0A326" offset="0%"/><stop stop-color="#FFDA9E" offset="100%"/></linearGradient><filter x="-47.5%" y="-34.5%" width="195%" height="169.1%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".4" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.839215686 0 0 0 0 0.521568627 0 0 0 0 0 0 0 0 1 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><path d="M0 .452h28v27.097H0z"/><path d="M8.089 8.129h15.555c.86 0 1.556.668 1.556 1.492v14.177c0 .824-.696 1.492-1.556 1.492H8.09c-.86 0-1.556-.668-1.556-1.492V9.621c0-.824.697-1.492 1.556-1.492z" fill="url(#a)" fill-rule="nonzero"/><path d="M20.291 2.71c.84 0 1.521.674 1.521 1.505v19.57c0 .831.681 1.505 1.521 1.505H4.321c-.84 0-1.521-.674-1.521-1.505V4.215c0-.831.681-1.505 1.521-1.505h15.97z" fill="url(#b)" fill-rule="nonzero"/><g filter="url(#c)" transform="translate(8 9)"><path d="M.933 9.687V2.7a.7.7 0 1 1 1.4 0v6.987a.7.7 0 1 1-1.4 0z" fill="#FFDA9E"/><path d="M4.57 0c2.222 0 3.333.91 3.333 2.745 0 1.847-1.125 2.77-3.36 2.77H.933a.608.608 0 0 1-.56-.592.597.597 0 0 1 .656-.586l3.423.002c.706 0 1.215-.126 1.542-.38.314-.252.484-.657.484-1.214 0-.557-.17-.961-.497-1.189-.327-.253-.837-.38-1.53-.38H.934a.602.602 0 0 1-.56-.589C.373.263.645 0 .98 0L.932.003.933 0z" fill="#FFF" fill-rule="nonzero"/></g></g></svg>

package/lib/components/upload/img/radio.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="29.782%" x2="83.621%" y2="29.782%" id="a"><stop stop-color="#F026D8" offset="0%"/><stop stop-color="#BD00A7" offset="100%"/></linearGradient><linearGradient x1="50%" y1="99.348%" x2="50%" y2=".295%" id="b"><stop stop-color="#F026D8" offset="0%"/><stop stop-color="#FF9EF4" offset="100%"/></linearGradient><filter x="-31.7%" y="-31.7%" width="163.3%" height="163.3%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".4" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.839215686 0 0 0 0 0 0 0 0 0 0.741176471 0 0 0 1 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><path d="M0 .452h28v27.097H0z"/><path d="M8.089 8.129h15.555c.86 0 1.556.668 1.556 1.492v14.177c0 .824-.696 1.492-1.556 1.492H8.09c-.86 0-1.556-.668-1.556-1.492V9.621c0-.824.697-1.492 1.556-1.492z" fill="url(#a)" fill-rule="nonzero"/><path d="M20.291 2.71c.84 0 1.521.674 1.521 1.505v19.57c0 .831.681 1.505 1.521 1.505H4.321c-.84 0-1.521-.674-1.521-1.505V4.215c0-.831.681-1.505 1.521-1.505h15.97z" fill="url(#b)" fill-rule="nonzero"/><g filter="url(#c)" transform="translate(6 8.37)" fill-rule="nonzero"><path d="M3.285 5.04a.567.567 0 0 1-.081-1.129l3.902-.703a.568.568 0 0 1 .166 1.12l-3.902.704a.448.448 0 0 1-.085.007z" fill="#FFC7F8"/><path d="M10.926.137a.569.569 0 0 1 .197.43v8.059a.566.566 0 0 1-.032.187c-.148.82-.946 1.447-1.903 1.447-1.063 0-1.928-.772-1.928-1.72s.865-1.72 1.928-1.72c.285 0 .556.056.8.156v-5.75l.484-1.22a.57.57 0 0 1 .454.131zM9.187 7.955c-.43 0-.792.268-.792.585 0 .317.363.585.793.585.43 0 .792-.268.792-.585 0-.317-.363-.585-.793-.585z" fill="#FFF"/><path d="M3.287 10.278a.568.568 0 0 1-.568-.567V1.652c0-.281.205-.52.483-.561l7.27-1.085a.57.57 0 0 1 .65.561c-.002.165-.035.287-.1.365a.49.49 0 0 1-.27.159l-6.9 1.051v7.57a.564.564 0 0 1-.565.566z" fill="#FFF"/><path d="M1.927 7.905c1.062 0 1.927.772 1.927 1.72s-.865 1.72-1.927 1.72C.864 11.344 0 10.572 0 9.624s.864-1.72 1.927-1.72zm0 1.135c-.43 0-.793.267-.793.585 0 .317.363.585.793.585.43 0 .793-.268.793-.585 0-.318-.364-.585-.793-.585z" fill="#FFF"/></g></g></svg>

package/lib/components/upload/img/video.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="29.782%" x2="83.621%" y2="29.782%" id="a"><stop stop-color="#A226F0" offset="0%"/><stop stop-color="#7500BD" offset="100%"/></linearGradient><linearGradient x1="50%" y1="99.348%" x2="50%" y2="0%" id="b"><stop stop-color="#A226F0" offset="0%"/><stop stop-color="#DA9EFF" offset="100%"/></linearGradient><filter x="-31.7%" y="-31.7%" width="163.3%" height="163.3%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".8" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".4" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.458823529 0 0 0 0 0 0 0 0 0 0.741176471 0 0 0 1 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><path d="M0 .452h28v27.097H0z"/><path d="M8.089 8.129h15.555c.86 0 1.556.668 1.556 1.492v14.177c0 .824-.696 1.492-1.556 1.492H8.09c-.86 0-1.556-.668-1.556-1.492V9.621c0-.824.697-1.492 1.556-1.492z" fill="url(#a)" fill-rule="nonzero"/><path d="M20.291 2.71c.84 0 1.521.674 1.521 1.505v19.57c0 .831.681 1.505 1.521 1.505H4.321c-.84 0-1.521-.674-1.521-1.505V4.215c0-.831.681-1.505 1.521-1.505h15.97z" fill="url(#b)" fill-rule="nonzero"/><g filter="url(#c)" transform="translate(6 8)"><path d="M6 10.6h5.3a.7.7 0 0 1 0 1.4H6v-1.4z" fill="#EAC7FF"/><circle stroke="#FFF" stroke-width="1.4" cx="6" cy="6" r="5.3"/><path d="M5.032 7.75c.842 0 2.916-.746 2.916-1.75S5.874 4.25 5.032 4.25c-.843 0-.843 3.5 0 3.5z" stroke="#FFF" stroke-width="1.2" stroke-linejoin="round"/></g></g></svg>

package/lib/components/upload/img/xls.svg

@@ -0,0 +1 @@
+<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="100%" y1="29.782%" x2="83.621%" y2="29.782%" id="a"><stop stop-color="#3FC87D" offset="0%"/><stop stop-color="#009B46" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#21E9AA" offset="0%"/><stop stop-color="#00BF77" offset="100%"/></linearGradient><filter x="-20.8%" y="-22.7%" width="141.7%" height="145.5%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".5" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation=".25" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0745098039 0 0 0 0 0.662745098 0 0 0 0 0.337254902 0 0 0 1 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g fill="none" fill-rule="evenodd"><path d="M0 .452h28v27.097H0z"/><path d="M8.089 8.129h15.555c.86 0 1.556.668 1.556 1.492v14.177c0 .824-.696 1.492-1.556 1.492H8.09c-.86 0-1.556-.668-1.556-1.492V9.621c0-.824.697-1.492 1.556-1.492z" fill="url(#a)" fill-rule="nonzero"/><path d="M20.291 2.71c.84 0 1.521.674 1.521 1.505v19.57c0 .831.681 1.505 1.521 1.505H4.321c-.84 0-1.521-.674-1.521-1.505V4.215c0-.831.681-1.505 1.521-1.505h15.97z" fill="url(#b)" fill-rule="nonzero"/><g filter="url(#c)" transform="translate(6.067 9.032)"><path d="M10.99 8.129H1.143a.677.677 0 1 1 0-1.355h9.845a.677.677 0 0 1 0 1.355z" fill="#A1EDD3"/><path d="M2.567 9.461V.926a.7.7 0 1 1 1.4 0V9.46a.7.7 0 0 1-1.4 0z" fill="#FFF"/></g></g></svg>

package/lib/components/upload/index.css

@@ -0,0 +1,26 @@
+.upload-preview-img {
+  margin-right: 8px;
+  width: 36px;
+  height: 36px;
+}
+
+.upload-file-action-wrapper {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #DFE3EA;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin-left: 10px;
+}
+
+.upload-file-action-wrapper:hover .action-icon {
+  color: #2879ff;
+}
+
+.upload-file-action-wrapper .action-icon {
+  font-size: 22px;
+  transform: scale(0.5);
+}

package/lib/components/upload/index.js

@@ -19,14 +19,16 @@ 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); }
@@ -71,25 +73,6 @@ 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);
 
@@ -119,7 +102,9 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
     };
 
     _this.dealSelectFiles = function (uploadSelectFilesObj) {
-      var uploadSuccessFiles = _this.state.uploadSuccessFiles;
+      var _this$state = _this.state,
+          uploadSuccessFiles = _this$state.uploadSuccessFiles,
+          selectFiles = _this$state.selectFiles;
       var _this$props = _this.props,
           action = _this$props.action,
           fileNumLimit = _this$props.fileNumLimit,
@@ -129,7 +114,17 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
       var uploadSuccessFilesLen = uploadSuccessFiles.length; // 已上传成功的文件数量
 
-      var allFilesTotal = uploadSuccessFilesLen + uploadSelectFilesLen;
+      var allFilesTotal = uploadSuccessFilesLen + uploadSelectFilesLen; // 把文件字节流保存，用来文件重传用
+
+      uploadSelectFilesObj.forEach(function (ele) {
+        if (!selectFiles[ele.name]) {
+          selectFiles[ele.name] = ele;
+        }
+      });
+
+      _this.setState({
+        selectFiles: selectFiles
+      });
 
       if (filesTotal && allFilesTotal > filesTotal) {
         _popDownNotification.Toast.Error("\u6700\u591A\u53EF\u4E0A\u4F20 ".concat(filesTotal, " \u4E2A\u6587\u4EF6"), {
@@ -168,7 +163,6 @@ 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,
@@ -189,12 +183,19 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
           DownloadUrl: '',
           Msg: '',
           AllowUploadAttachmentSize: 50,
-          Deleteable: true
+          Deleteable: true,
+          requestXHR: new XMLHttpRequest() //在这创建是为了取消用
+
         };
         var sameFile = uploadSuccessFiles.find(function (file) {
-          return _this.isSameFile(file, uploadStartFile);
+          return _this.isSameFile(file, uploadStartFile) && file.uploadStatus !== 4;
         });
-        if (sameFile) return;
+
+        if (sameFile) {
+          return;
+        }
+
+        ;
         uploadStartFiles.push(uploadStartFile);
 
         _this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件
@@ -209,18 +210,17 @@ 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
+            Msg: '上传失败，文件过大',
+            IsImage: false,
+            uploadStatus: 5
           }));
         }, 300);
         return;
       }
 
-      var xhr = new XMLHttpRequest(); //创建xhr
+      var xhr = uploadStartFile.requestXHR;
 
       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 = JSON.parse(JSON.stringify(_this.state.uploadSuccessFiles));
+        var uploadSuccessFiles = _toConsumableArray(_this.state.uploadSuccessFiles);
 
         if (evt.lengthComputable) {
           uploadSuccessFiles.forEach(function (item) {
@@ -253,7 +253,22 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
         }
       };
 
-      xhr.upload.onerror = function (evt) {};
+      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.open('POST', url, true);
       xhr.send(formData); //开始上传，发送form数据
@@ -261,8 +276,19 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
     _this._dealUploadStart = function (uploadStartFiles) {
       var uploadSuccessFiles = [];
-      var uploadedFiles = JSON.parse(JSON.stringify(_this.state.uploadSuccessFiles));
-      var uploadFilesConcatArr = [].concat(_toConsumableArray(uploadedFiles), _toConsumableArray(uploadStartFiles));
+
+      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));
+      }
+
       uploadFilesConcatArr.forEach(function (item) {
         var res = uploadSuccessFiles.filter(function (v) {
           return _this.isSameFile(item, v);
@@ -285,7 +311,9 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
     _this._dealUploadSuccess = function (uploadSuccessFile) {
       var onSubmit = _this.props.onSubmit;
-      var uploadSuccessFiles = JSON.parse(JSON.stringify(_this.state.uploadSuccessFiles));
+
+      var uploadSuccessFiles = _toConsumableArray(_this.state.uploadSuccessFiles);
+
       var uploadSuccessFilesFormat = uploadSuccessFiles.map(function (element) {
         return _this.isSameFile(uploadSuccessFile, element) ? uploadSuccessFile : element;
       });
@@ -297,9 +325,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
       _this.setState({
         uploadSuccessFiles: uploadSuccessFilesFormat,
-        attachmentPreviewUrl: uploadSuccessFilesFormat.map(function (item) {
-          return item.ClientUrl;
-        })
+        attachmentPreviewUrl: (0, _util.getPreviewImgs)(uploadSuccessFilesFormat)
       });
     };
 
@@ -308,8 +334,14 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
           onSubmit = _this$props2.onSubmit,
           onDelete = _this$props2.onDelete;
 
-      if (options === 'delete' || options === 'cancel' || options === 'reupload') {
-        var uploadResultFiles = JSON.parse(JSON.stringify(_this.state.uploadSuccessFiles));
+      if (options === 'cancel') {
+        var reUploadFileInfo = _this.state.uploadSuccessFiles[index];
+        reUploadFileInfo.requestXHR.abort();
+      }
+
+      if (options === 'delete' || options === 'cancel') {
+        var uploadResultFiles = _toConsumableArray(_this.state.uploadSuccessFiles);
+
         var deleteFiles = uploadResultFiles[index];
         onDelete && onDelete(deleteFiles.documentId ? deleteFiles.documentId : deleteFiles.DfsPath);
         uploadResultFiles.splice(index, 1);
@@ -324,12 +356,17 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
           uploadSuccessFiles: uploadResultFiles
         });
       } else if (options === 'preview') {
-        _this.refs.RViewers.show(index);
+        _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.isSameFile = function (item, element) {
-      return item.documentId && element.documentId ? item.documentId == element.documentId : item.uid == element.uid;
+      return item.FileName === element.FileName && item.FileSize === element.FileSize && item.FileLastModified === element.FileLastModified;
     };
 
     _this.renderUploadList = function (list) {
@@ -339,10 +376,10 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_Portals["default"], {
         domNode: attachmentPreviewBox,
         className: "uploadFile__preview__list"
-      }, /*#__PURE__*/_react["default"].createElement(_viewer.RViewer, {
-        imageUrls: attachmentPreviewUrl,
-        ref: "RViewers",
-        options: RVIewerOptions
+      }, /*#__PURE__*/_react["default"].createElement(_imgViewer["default"], {
+        data: attachmentPreviewUrl,
+        ref: "imgViewerRef",
+        showDownload: false
       }), list.map(function (item, index) {
         return /*#__PURE__*/_react["default"].createElement(_uploadedPreview["default"], {
           uploadResultItem: item,
@@ -367,9 +404,8 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
 
     _this.state = {
       uploadSuccessFiles: props.attachments || [],
-      attachmentPreviewUrl: props.attachments ? props.attachments.map(function (item) {
-        return item.ClientUrl;
-      }) : []
+      attachmentPreviewUrl: props.attachments ? (0, _util.getPreviewImgs)(props.attachments) : [],
+      selectFiles: {}
     };
     return _this;
   }
@@ -380,9 +416,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
       var attachments = this.props.attachments;
       this.setState({
         uploadSuccessFiles: attachments || [],
-        attachmentPreviewUrl: attachments ? attachments.map(function (item) {
-          return item.ClientUrl;
-        }) : []
+        attachmentPreviewUrl: attachments ? (0, _util.getPreviewImgs)(attachments) : []
       });
     }
   }, {
@@ -396,9 +430,7 @@ var Upload = /*#__PURE__*/function (_PureComponent) {
       } else {
         this.setState({
           // uploadSuccessFiles: nextProps.attachments || [],
-          attachmentPreviewUrl: nextProps.attachments ? nextProps.attachments.map(function (item) {
-            return item.ClientUrl;
-          }) : []
+          attachmentPreviewUrl: nextProps.attachments ? (0, _util.getPreviewImgs)(nextProps.attachments) : []
         });
       }
 

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: 310px;\n  height: 30px;\n  padding: 5px;\n  font-size: 12px;\n  background-color: #f5f8fa;\n  display: flex;\n  align-items: center;\n"])));
+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"])));
 
 exports.PreviewContent = PreviewContent;
 
-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"])));
+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"])));
 
 exports.PreviewImageWrapper = PreviewImageWrapper;
 
-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"])));
+var PreviewImageIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\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: 160px;\n  color: #647481;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+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"])));
 
 exports.PreviewFileTitle = PreviewFileTitle;
 
-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"])));
+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"])));
 
 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    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"])));
+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"])));
 
 exports.PreviewOptionsWrapper = PreviewOptionsWrapper;