Merge branch 'master' of narrowizard/comment into master

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 0.5.3
+
+- [x] fix: 修复开启closeUploadWhenBlur后, 上传图片弹框的右上角关闭按钮无效的问题.
+- [x] fix: 修复上传大图时, 使用blob导致浏览器很卡的问题.
+- [x] fix: 增大表情翻页的触发区域.
+
 ## 0.5.2
 
 - [x] feat: Editor 增加 props: showError、onError、beforeSubmit

lib/Comment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\n\nconst CommentContext = React.createContext();\n\n// This function takes a component...\nexport function Comment(Component) {\n  // ...and returns another component...\n  return function(props) {\n    // ... and renders the wrapped component with the context theme!\n    // Notice that we pass through any additional props as well\n    return (\n      <CommentContext.Consumer>\n        {app => <Component {...props} app={app} />}\n      </CommentContext.Consumer>\n    );\n  };\n}\n\nexport { CommentContext };\n\nexport default Comment;\n"]}
+{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\r\n\r\nconst CommentContext = React.createContext();\r\n\r\n// This function takes a component...\r\nexport function Comment(Component) {\r\n  // ...and returns another component...\r\n  return function(props) {\r\n    // ... and renders the wrapped component with the context theme!\r\n    // Notice that we pass through any additional props as well\r\n    return (\r\n      <CommentContext.Consumer>\r\n        {app => <Component {...props} app={app} />}\r\n      </CommentContext.Consumer>\r\n    );\r\n  };\r\n}\r\n\r\nexport { CommentContext };\r\n\r\nexport default Comment;\r\n"]}

lib/components/Editor/Emoji.css

@@ -1,23 +1,39 @@
 .item {
-  float: left;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-  white-space: nowrap;
-  /* this is required unless you put the helper span closely near the img */
-  text-align: center;
-  margin: 0;
+    float: left;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    white-space: nowrap;
+    /* this is required unless you put the helper span closely near the img */
+    text-align: center;
+    margin: 0;
 }
+
 .item .helper {
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
 }
+
 .item img {
-  margin: 0 auto;
-  vertical-align: middle;
-  padding: 3px;
+    margin: 0 auto;
+    vertical-align: middle;
+    padding: 3px;
 }
+
 .item img:hover {
-  border: 1px solid #40a9ff;
+    border: 1px solid #40a9ff;
 }
+
+.ant-carousel .slick-dots {
+    height: 5px;
+}
+
+.ant-carousel .slick-dots li button {
+    height: 5px;
+    width: 25px;
+}
+
+.ant-carousel .slick-dots li.slick-active button {
+    width: 32px;
+}

lib/components/Editor/index.js

@@ -164,9 +164,16 @@ var Editor = function (_React$Component) {
       var uid = _ref.uid,
           path = _ref.path;
       var fileMap = this.state.fileMap;
+      var fileList = this.state.fileList;
 
       fileMap[uid] = path;
-      this.setState({ fileMap: fileMap });
+      fileList = fileList.map(function (item) {
+        if (item.uid === uid) {
+          item.thumbUrl = _constant.OSS_LINK + path;
+        }
+        return item;
+      });
+      this.setState({ fileMap: fileMap, fileList: fileList });
     }
 
     /**
@@ -269,73 +276,15 @@ var Editor = function (_React$Component) {
               },
               emojiToolIcon || _react2.default.createElement(_icon2.default, { type: "smile-o", className: "comment-toolbar-icon" })
             ),
-            showUpload ? closeUploadWhenBlur ? _react2.default.createElement(
+            showUpload ? _react2.default.createElement(
               _popover2.default,
               {
                 trigger: "click",
-                overlayStyle: { zIndex: 999 },
-                content: _react2.default.createElement(
-                  "div",
-                  {
-                    style: {
-                      width: 112 * maxUpload,
-                      minHeight: 100,
-                      margin: "0 auto"
-                    }
-                  },
-                  _react2.default.createElement(_Upload2.default, {
-                    onChangeFileList: this.handleChangeFileList,
-                    onUpload: this.handleUpload,
-                    maxUpload: maxUpload,
-                    fileList: this.state.fileList
-                  })
-                ),
-                placement: "bottomLeft",
-                title: _react2.default.createElement(
-                  "div",
-                  { style: { margin: "5px auto" } },
-                  _react2.default.createElement(
-                    "span",
-                    null,
-                    "\u4E0A\u4F20\u56FE\u7247",
-                    maxUpload >= 2 ? _react2.default.createElement(
-                      "span",
-                      { style: { color: "#666", fontWeight: 400 } },
-                      "(\u60A8\u8FD8\u80FD\u4E0A\u4F20",
-                      maxUpload - this.state.fileList.length,
-                      "\u5F20\u56FE\u7247)"
-                    ) : null
-                  ),
-                  _react2.default.createElement(_icon2.default, {
-                    type: "close",
-                    onClick: function onClick() {
-                      return _this3.handleShowUpload(false);
-                    },
-                    style: {
-                      float: "right",
-                      cursor: "pointer",
-                      marginTop: 4
-                    }
-                  })
-                )
-              },
-              imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
-                onClick: function onClick() {
-                  return _this3.handleShowUpload(true);
-                }
-              }) : _react2.default.createElement(_icon2.default, {
-                type: "picture",
-                className: "comment-toolbar-icon",
-                style: { marginLeft: 10 },
-                onClick: function onClick() {
-                  return _this3.handleShowUpload(true);
-                }
-              })
-            ) : _react2.default.createElement(
-              _popover2.default,
-              {
                 visible: this.state.showUpload,
                 overlayStyle: { zIndex: 999 },
+                onVisibleChange: closeUploadWhenBlur ? function (visible) {
+                  _this3.handleShowUpload(visible);
+                } : null,
                 content: _react2.default.createElement(
                   "div",
                   {

lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","text","files","loading","setTimeout","msg","Promise","resolve","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAIA;;;;AACA;;;;;;;;;;;AAJA;AACA;AACA;;;IAIMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;6CAEmC;AAAA;;AAAA,UAAfO,IAAe,QAAfA,IAAe;AAAA,UAATC,KAAS,QAATA,KAAS;;AAClC,WAAKJ,QAAL,CAAc,EAAEK,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKN,QAAL,CAAc,EAAEK,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAJ,cAAQC,GAAR,CAAY,eAAZ,EAA6BC,IAA7B;AACAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BE,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA;AACE,gBAAM,CADR;AAEE,sBAAW,MAFb;AAGE,gCAHF;AAIE,8BAJF;AAKE,8BALF;AAME,qBAAW,KANb;AAOE,mBAAS,sBAAO;AACdH,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AATH;AAWE,sCAAC,WAAD;AACE,qBAAW,CADb;AAEE,wBAAc,wBAAM;AAClB,mBAAQ,IAAIC,OAAJ,CAAY,UAACC,OAAD,EAAa;AAC/BA,sBAAQ,IAAR;AACD,aAFO,CAAR;AAGD,WANH;AAOE,qBAAW,KAPb;AAQE,mBAAS,sBAAO;AACdR,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AAVH;AAXF,OADF;;AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EA7FiBG,gB;;AAgGpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n// e.g.\r\n// import { Button, Icon } from \"antd\";\r\n// import App, { Editor, RenderText } from \"./App\";\r\nimport App, { Editor } from \"./App\";\r\nimport registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nclass Index extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      value: \"\"\r\n    };\r\n    this.handleChangeValue = this.handleChangeValue.bind(this);\r\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\r\n  }\r\n\r\n  handleChangeValue(value) {\r\n    this.setState({ value });\r\n    console.log(\"handleChangeValue value: \", value);\r\n  }\r\n\r\n  handleChangeSubmit({ text, files }) {\r\n    this.setState({ loading: true }, () => {\r\n      setTimeout(() => {\r\n        this.setState({ loading: false });\r\n      }, 2000);\r\n    });\r\n    console.log(\"submit text: \", text);\r\n    console.log(\"submit files: \", files);\r\n  }\r\n\r\n  render() {\r\n    // 最简单的用法\r\n    return (\r\n      <App\r\n        type={1}\r\n        businessId=\"test\"\r\n        showAlertComment\r\n        showAlertReply\r\n        showAlertFavor\r\n        showError={false}\r\n        onError={msg => {\r\n          console.log(`-----------${msg}`);\r\n        }}\r\n      >\r\n        <Editor\r\n          maxUpload={4}\r\n          beforeSubmit={() => {\r\n            return (new Promise((resolve) => {\r\n              resolve(true);\r\n            }));\r\n          }}\r\n          showError={false}\r\n          onError={msg => {\r\n            console.log(`-----------${msg}`);\r\n          }}\r\n        />\r\n      </App>\r\n    );\r\n\r\n    // e.g.\r\n    // 复杂的用户法\r\n    // const props = {\r\n    //   type: 1,\r\n    //   businessId: \"1\",\r\n    //   API: \"http://api.links123.net/comment/v1\",\r\n    //   showList: true\r\n    // };\r\n\r\n    // const editorProps = {\r\n    //   showEmoji: true,\r\n    //   placeholder: \"说点什么吧\",\r\n    //   rows: 5,\r\n    //   btnLoading: this.state.loading,\r\n    //   btnDisable: this.state.loading,\r\n    //   btnSubmitText: \"提交\",\r\n    //   value: this.state.value,\r\n    //   onChange: v => this.handleChangeValue(v),\r\n    //   onSubmit: v => this.handleChangeSubmit(v),\r\n    //   button: (\r\n    //     <Button\r\n    //       type=\"primary\"\r\n    //       ghost\r\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\r\n    //     >\r\n    //       自定义按钮\r\n    //     </Button>\r\n    //   ),\r\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\r\n    //   imageToolIcon: (\r\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\r\n    //   )\r\n    // };\r\n\r\n    // return (\r\n    //   <App {...props}>\r\n    //     <Editor {...editorProps} />\r\n    //   </App>\r\n    // );\r\n  }\r\n}\r\n\r\nReactDOM.render(<Index />, document.getElementById(\"root-comment\"));\r\nregisterServiceWorker();\r\n"]}
+{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","text","files","loading","setTimeout","msg","Promise","resolve","Component","ReactDOM","render","document","getElementById"],"mappings":";;;;AAAA;;;;AACA;;;;AAIA;;;;AACA;;;;;;;;;;;AAJA;AACA;AACA;;;IAIMA,K;;;AACJ,iBAAYC,KAAZ,EAAmB;AAAA;;AAAA,8GACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa;AACXC,aAAO;AADI,KAAb;AAGA,UAAKC,iBAAL,GAAyB,MAAKA,iBAAL,CAAuBC,IAAvB,OAAzB;AACA,UAAKC,kBAAL,GAA0B,MAAKA,kBAAL,CAAwBD,IAAxB,OAA1B;AANiB;AAOlB;;;;sCAEiBF,K,EAAO;AACvB,WAAKI,QAAL,CAAc,EAAEJ,YAAF,EAAd;AACAK,cAAQC,GAAR,CAAY,2BAAZ,EAAyCN,KAAzC;AACD;;;6CAEmC;AAAA;;AAAA,UAAfO,IAAe,QAAfA,IAAe;AAAA,UAATC,KAAS,QAATA,KAAS;;AAClC,WAAKJ,QAAL,CAAc,EAAEK,SAAS,IAAX,EAAd,EAAiC,YAAM;AACrCC,mBAAW,YAAM;AACf,iBAAKN,QAAL,CAAc,EAAEK,SAAS,KAAX,EAAd;AACD,SAFD,EAEG,IAFH;AAGD,OAJD;AAKAJ,cAAQC,GAAR,CAAY,eAAZ,EAA6BC,IAA7B;AACAF,cAAQC,GAAR,CAAY,gBAAZ,EAA8BE,KAA9B;AACD;;;6BAEQ;AACP;AACA,aACE;AAAC,qBAAD;AAAA;AACE,gBAAM,CADR;AAEE,sBAAW,MAFb;AAGE,gCAHF;AAIE,8BAJF;AAKE,8BALF;AAME,qBAAW,KANb;AAOE,mBAAS,sBAAO;AACdH,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AATH;AAWE,sCAAC,WAAD;AACE,qBAAW,CADb;AAEE,wBAAc,wBAAM;AAClB,mBAAO,IAAIC,OAAJ,CAAY,mBAAW;AAC5BC,sBAAQ,IAAR;AACD,aAFM,CAAP;AAGD,WANH;AAOE,qBAAW,KAPb;AAQE,mBAAS,sBAAO;AACdR,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AAVH;AAXF,OADF;;AA2BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACD;;;;EA7FiBG,gB;;AAgGpBC,mBAASC,MAAT,CAAgB,8BAAC,KAAD,OAAhB,EAA2BC,SAASC,cAAT,CAAwB,cAAxB,CAA3B;AACA","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\n// e.g.\r\n// import { Button, Icon } from \"antd\";\r\n// import App, { Editor, RenderText } from \"./App\";\r\nimport App, { Editor } from \"./App\";\r\nimport registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nclass Index extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      value: \"\"\r\n    };\r\n    this.handleChangeValue = this.handleChangeValue.bind(this);\r\n    this.handleChangeSubmit = this.handleChangeSubmit.bind(this);\r\n  }\r\n\r\n  handleChangeValue(value) {\r\n    this.setState({ value });\r\n    console.log(\"handleChangeValue value: \", value);\r\n  }\r\n\r\n  handleChangeSubmit({ text, files }) {\r\n    this.setState({ loading: true }, () => {\r\n      setTimeout(() => {\r\n        this.setState({ loading: false });\r\n      }, 2000);\r\n    });\r\n    console.log(\"submit text: \", text);\r\n    console.log(\"submit files: \", files);\r\n  }\r\n\r\n  render() {\r\n    // 最简单的用法\r\n    return (\r\n      <App\r\n        type={1}\r\n        businessId=\"test\"\r\n        showAlertComment\r\n        showAlertReply\r\n        showAlertFavor\r\n        showError={false}\r\n        onError={msg => {\r\n          console.log(`-----------${msg}`);\r\n        }}\r\n      >\r\n        <Editor\r\n          maxUpload={4}\r\n          beforeSubmit={() => {\r\n            return new Promise(resolve => {\r\n              resolve(true);\r\n            });\r\n          }}\r\n          showError={false}\r\n          onError={msg => {\r\n            console.log(`-----------${msg}`);\r\n          }}\r\n        />\r\n      </App>\r\n    );\r\n\r\n    // e.g.\r\n    // 复杂的用户法\r\n    // const props = {\r\n    //   type: 1,\r\n    //   businessId: \"1\",\r\n    //   API: \"http://api.links123.net/comment/v1\",\r\n    //   showList: true\r\n    // };\r\n\r\n    // const editorProps = {\r\n    //   showEmoji: true,\r\n    //   placeholder: \"说点什么吧\",\r\n    //   rows: 5,\r\n    //   btnLoading: this.state.loading,\r\n    //   btnDisable: this.state.loading,\r\n    //   btnSubmitText: \"提交\",\r\n    //   value: this.state.value,\r\n    //   onChange: v => this.handleChangeValue(v),\r\n    //   onSubmit: v => this.handleChangeSubmit(v),\r\n    //   button: (\r\n    //     <Button\r\n    //       type=\"primary\"\r\n    //       ghost\r\n    //       // onClick={() => console.log('click btn: ', this.state.value)}\r\n    //     >\r\n    //       自定义按钮\r\n    //     </Button>\r\n    //   ),\r\n    //   emojiToolIcon: <Icon type=\"smile\" style={{ fontSize: 23 }} />,\r\n    //   imageToolIcon: (\r\n    //     <Icon type=\"cloud-upload-o\" style={{ fontSize: 25, marginLeft: 10 }} />\r\n    //   )\r\n    // };\r\n\r\n    // return (\r\n    //   <App {...props}>\r\n    //     <Editor {...editorProps} />\r\n    //   </App>\r\n    // );\r\n  }\r\n}\r\n\r\nReactDOM.render(<Index />, document.getElementById(\"root-comment\"));\r\nregisterServiceWorker();\r\n"]}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "comment",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "main": "lib/App.js",
   "description": "通用评论",
   "keywords": [

src/components/Editor/Emoji.css

@@ -8,16 +8,32 @@
   text-align: center;
   margin: 0;
 }
+
 .item .helper {
   display: inline-block;
   height: 100%;
   vertical-align: middle;
 }
+
 .item img {
   margin: 0 auto;
   vertical-align: middle;
   padding: 3px;
 }
+
 .item img:hover {
   border: 1px solid #40a9ff;
 }
+
+.ant-carousel .slick-dots {
+  height: 5px;
+}
+
+.ant-carousel .slick-dots li button {
+  height: 5px;
+  width: 25px;
+}
+
+.ant-carousel .slick-dots li.slick-active button {
+  width: 32px;
+}

src/components/Editor/index.js

@@ -85,8 +85,15 @@ class Editor extends React.Component {
    */
   handleUpload({ uid, path }) {
     const { fileMap } = this.state;
+    let { fileList } = this.state;
     fileMap[uid] = path;
-    this.setState({ fileMap });
+    fileList = fileList.map(item => {
+      if (item.uid === uid) {
+        item.thumbUrl = OSS_LINK + path;
+      }
+      return item;
+    });
+    this.setState({ fileMap, fileList });
   }
 
   /**
@@ -178,121 +185,71 @@ class Editor extends React.Component {
             )}
 
             {showUpload ? (
-              closeUploadWhenBlur ? (
-                <Popover
-                  trigger="click"
-                  overlayStyle={{ zIndex: 999 }}
-                  content={
-                    <div
-                      style={{
-                        width: 112 * maxUpload,
-                        minHeight: 100,
-                        margin: "0 auto"
-                      }}
-                    >
-                      <Upload
-                        onChangeFileList={this.handleChangeFileList}
-                        onUpload={this.handleUpload}
-                        maxUpload={maxUpload}
-                        fileList={this.state.fileList}
-                      />
-                    </div>
-                  }
-                  placement="bottomLeft"
-                  title={
-                    <div style={{ margin: "5px auto" }}>
-                      <span>
-                        上传图片
-                        {maxUpload >= 2 ? (
-                          <span style={{ color: "#666", fontWeight: 400 }}>
-                            (您还能上传{maxUpload - this.state.fileList.length}张图片)
-                          </span>
-                        ) : null}
-                      </span>
-                      <Icon
-                        type="close"
-                        onClick={() => this.handleShowUpload(false)}
-                        style={{
-                          float: "right",
-                          cursor: "pointer",
-                          marginTop: 4
-                        }}
-                      />
-                    </div>
-                  }
-                >
-                  {imageToolIcon ? (
-                    React.cloneElement(imageToolIcon, {
-                      onClick: () => this.handleShowUpload(true)
-                    })
-                  ) : (
-                    <Icon
-                      type="picture"
-                      className="comment-toolbar-icon"
-                      style={{ marginLeft: 10 }}
-                      onClick={() => this.handleShowUpload(true)}
+              <Popover
+                trigger="click"
+                visible={this.state.showUpload}
+                overlayStyle={{ zIndex: 999 }}
+                onVisibleChange={
+                  closeUploadWhenBlur
+                    ? visible => {
+                        this.handleShowUpload(visible);
+                      }
+                    : null
+                }
+                content={
+                  <div
+                    style={{
+                      width: 112 * maxUpload,
+                      minHeight: 100,
+                      margin: "0 auto"
+                    }}
+                  >
+                    <Upload
+                      onChangeFileList={this.handleChangeFileList}
+                      onUpload={this.handleUpload}
+                      maxUpload={maxUpload}
+                      fileList={this.state.fileList}
+                      showError={this.props.showError}
+                      onError={this.props.onError}
                     />
-                  )}
-                </Popover>
-              ) : (
-                <Popover
-                  visible={this.state.showUpload}
-                  overlayStyle={{ zIndex: 999 }}
-                  content={
-                    <div
+                  </div>
+                }
+                placement="bottomLeft"
+                title={
+                  <div style={{ margin: "5px auto" }}>
+                    <span>
+                      上传图片
+                      {maxUpload >= 2 ? (
+                        <span style={{ color: "#666", fontWeight: 400 }}>
+                          (您还能上传{maxUpload - this.state.fileList.length}张图片)
+                        </span>
+                      ) : null}
+                    </span>
+                    <Icon
+                      type="close"
+                      onClick={() => this.handleShowUpload(false)}
                       style={{
-                        width: 112 * maxUpload,
-                        minHeight: 100,
-                        margin: "0 auto"
+                        float: "right",
+                        cursor: "pointer",
+                        marginTop: 4
                       }}
-                    >
-                      <Upload
-                        onChangeFileList={this.handleChangeFileList}
-                        onUpload={this.handleUpload}
-                        maxUpload={maxUpload}
-                        fileList={this.state.fileList}
-                        showError={this.props.showError}
-                        onError={this.props.onError}
-                      />
-                    </div>
-                  }
-                  placement="bottomLeft"
-                  title={
-                    <div style={{ margin: "5px auto" }}>
-                      <span>
-                        上传图片
-                        {maxUpload >= 2 ? (
-                          <span style={{ color: "#666", fontWeight: 400 }}>
-                            (您还能上传{maxUpload - this.state.fileList.length}张图片)
-                          </span>
-                        ) : null}
-                      </span>
-                      <Icon
-                        type="close"
-                        onClick={() => this.handleShowUpload(false)}
-                        style={{
-                          float: "right",
-                          cursor: "pointer",
-                          marginTop: 4
-                        }}
-                      />
-                    </div>
-                  }
-                >
-                  {imageToolIcon ? (
-                    React.cloneElement(imageToolIcon, {
-                      onClick: () => this.handleShowUpload(true)
-                    })
-                  ) : (
-                    <Icon
-                      type="picture"
-                      className="comment-toolbar-icon"
-                      style={{ marginLeft: 10 }}
-                      onClick={() => this.handleShowUpload(true)}
                     />
-                  )}
-                </Popover>
-              )
+                  </div>
+                }
+              >
+                {imageToolIcon ? (
+                  React.cloneElement(imageToolIcon, {
+                    onClick: () => this.handleShowUpload(true)
+                  })
+                ) : (
+                  <Icon
+                    type="picture"
+                    className="comment-toolbar-icon"
+                    style={{ marginLeft: 10 }}
+                    onClick={() => this.handleShowUpload(true)}
+                  />
+                )}
+              </Popover>
             ) : null}
           </div>