소스 검색

Merge branch 'master' of narrowizard/comment into master

narrowizard 6 년 전
부모
커밋
68472b8c51

+ 6
- 0
CHANGELOG.md 파일 보기

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

+ 1
- 1
lib/Comment.js.map 파일 보기

@@ -1 +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"]}
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\";\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"]}

+ 31
- 15
lib/components/Editor/Emoji.css 파일 보기

@@ -1,23 +1,39 @@
1 1
 .item {
2
-  float: left;
3
-  width: 40px;
4
-  height: 40px;
5
-  cursor: pointer;
6
-  white-space: nowrap;
7
-  /* this is required unless you put the helper span closely near the img */
8
-  text-align: center;
9
-  margin: 0;
2
+    float: left;
3
+    width: 40px;
4
+    height: 40px;
5
+    cursor: pointer;
6
+    white-space: nowrap;
7
+    /* this is required unless you put the helper span closely near the img */
8
+    text-align: center;
9
+    margin: 0;
10 10
 }
11
+
11 12
 .item .helper {
12
-  display: inline-block;
13
-  height: 100%;
14
-  vertical-align: middle;
13
+    display: inline-block;
14
+    height: 100%;
15
+    vertical-align: middle;
15 16
 }
17
+
16 18
 .item img {
17
-  margin: 0 auto;
18
-  vertical-align: middle;
19
-  padding: 3px;
19
+    margin: 0 auto;
20
+    vertical-align: middle;
21
+    padding: 3px;
20 22
 }
23
+
21 24
 .item img:hover {
22
-  border: 1px solid #40a9ff;
25
+    border: 1px solid #40a9ff;
23 26
 }
27
+
28
+.ant-carousel .slick-dots {
29
+    height: 5px;
30
+}
31
+
32
+.ant-carousel .slick-dots li button {
33
+    height: 5px;
34
+    width: 25px;
35
+}
36
+
37
+.ant-carousel .slick-dots li.slick-active button {
38
+    width: 32px;
39
+}

+ 12
- 63
lib/components/Editor/index.js 파일 보기

@@ -164,9 +164,16 @@ var Editor = function (_React$Component) {
164 164
       var uid = _ref.uid,
165 165
           path = _ref.path;
166 166
       var fileMap = this.state.fileMap;
167
+      var fileList = this.state.fileList;
167 168
 
168 169
       fileMap[uid] = path;
169
-      this.setState({ fileMap: fileMap });
170
+      fileList = fileList.map(function (item) {
171
+        if (item.uid === uid) {
172
+          item.thumbUrl = _constant.OSS_LINK + path;
173
+        }
174
+        return item;
175
+      });
176
+      this.setState({ fileMap: fileMap, fileList: fileList });
170 177
     }
171 178
 
172 179
     /**
@@ -269,73 +276,15 @@ var Editor = function (_React$Component) {
269 276
               },
270 277
               emojiToolIcon || _react2.default.createElement(_icon2.default, { type: "smile-o", className: "comment-toolbar-icon" })
271 278
             ),
272
-            showUpload ? closeUploadWhenBlur ? _react2.default.createElement(
279
+            showUpload ? _react2.default.createElement(
273 280
               _popover2.default,
274 281
               {
275 282
                 trigger: "click",
276
-                overlayStyle: { zIndex: 999 },
277
-                content: _react2.default.createElement(
278
-                  "div",
279
-                  {
280
-                    style: {
281
-                      width: 112 * maxUpload,
282
-                      minHeight: 100,
283
-                      margin: "0 auto"
284
-                    }
285
-                  },
286
-                  _react2.default.createElement(_Upload2.default, {
287
-                    onChangeFileList: this.handleChangeFileList,
288
-                    onUpload: this.handleUpload,
289
-                    maxUpload: maxUpload,
290
-                    fileList: this.state.fileList
291
-                  })
292
-                ),
293
-                placement: "bottomLeft",
294
-                title: _react2.default.createElement(
295
-                  "div",
296
-                  { style: { margin: "5px auto" } },
297
-                  _react2.default.createElement(
298
-                    "span",
299
-                    null,
300
-                    "\u4E0A\u4F20\u56FE\u7247",
301
-                    maxUpload >= 2 ? _react2.default.createElement(
302
-                      "span",
303
-                      { style: { color: "#666", fontWeight: 400 } },
304
-                      "(\u60A8\u8FD8\u80FD\u4E0A\u4F20",
305
-                      maxUpload - this.state.fileList.length,
306
-                      "\u5F20\u56FE\u7247)"
307
-                    ) : null
308
-                  ),
309
-                  _react2.default.createElement(_icon2.default, {
310
-                    type: "close",
311
-                    onClick: function onClick() {
312
-                      return _this3.handleShowUpload(false);
313
-                    },
314
-                    style: {
315
-                      float: "right",
316
-                      cursor: "pointer",
317
-                      marginTop: 4
318
-                    }
319
-                  })
320
-                )
321
-              },
322
-              imageToolIcon ? _react2.default.cloneElement(imageToolIcon, {
323
-                onClick: function onClick() {
324
-                  return _this3.handleShowUpload(true);
325
-                }
326
-              }) : _react2.default.createElement(_icon2.default, {
327
-                type: "picture",
328
-                className: "comment-toolbar-icon",
329
-                style: { marginLeft: 10 },
330
-                onClick: function onClick() {
331
-                  return _this3.handleShowUpload(true);
332
-                }
333
-              })
334
-            ) : _react2.default.createElement(
335
-              _popover2.default,
336
-              {
337 283
                 visible: this.state.showUpload,
338 284
                 overlayStyle: { zIndex: 999 },
285
+                onVisibleChange: closeUploadWhenBlur ? function (visible) {
286
+                  _this3.handleShowUpload(visible);
287
+                } : null,
339 288
                 content: _react2.default.createElement(
340 289
                   "div",
341 290
                   {

+ 1
- 1
lib/components/Editor/index.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 1
- 1
lib/index.js.map 파일 보기

@@ -1 +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"]}
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,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"]}

+ 1
- 1
lib/registerServiceWorker.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 1
- 1
package.json 파일 보기

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

+ 16
- 0
src/components/Editor/Emoji.css 파일 보기

@@ -8,16 +8,32 @@
8 8
   text-align: center;
9 9
   margin: 0;
10 10
 }
11
+
11 12
 .item .helper {
12 13
   display: inline-block;
13 14
   height: 100%;
14 15
   vertical-align: middle;
15 16
 }
17
+
16 18
 .item img {
17 19
   margin: 0 auto;
18 20
   vertical-align: middle;
19 21
   padding: 3px;
20 22
 }
23
+
21 24
 .item img:hover {
22 25
   border: 1px solid #40a9ff;
23 26
 }
27
+
28
+.ant-carousel .slick-dots {
29
+  height: 5px;
30
+}
31
+
32
+.ant-carousel .slick-dots li button {
33
+  height: 5px;
34
+  width: 25px;
35
+}
36
+
37
+.ant-carousel .slick-dots li.slick-active button {
38
+  width: 32px;
39
+}

+ 69
- 112
src/components/Editor/index.js 파일 보기

@@ -85,8 +85,15 @@ class Editor extends React.Component {
85 85
    */
86 86
   handleUpload({ uid, path }) {
87 87
     const { fileMap } = this.state;
88
+    let { fileList } = this.state;
88 89
     fileMap[uid] = path;
89
-    this.setState({ fileMap });
90
+    fileList = fileList.map(item => {
91
+      if (item.uid === uid) {
92
+        item.thumbUrl = OSS_LINK + path;
93
+      }
94
+      return item;
95
+    });
96
+    this.setState({ fileMap, fileList });
90 97
   }
91 98
 
92 99
   /**
@@ -178,121 +185,71 @@ class Editor extends React.Component {
178 185
             )}
179 186
 
180 187
             {showUpload ? (
181
-              closeUploadWhenBlur ? (
182
-                <Popover
183
-                  trigger="click"
184
-                  overlayStyle={{ zIndex: 999 }}
185
-                  content={
186
-                    <div
187
-                      style={{
188
-                        width: 112 * maxUpload,
189
-                        minHeight: 100,
190
-                        margin: "0 auto"
191
-                      }}
192
-                    >
193
-                      <Upload
194
-                        onChangeFileList={this.handleChangeFileList}
195
-                        onUpload={this.handleUpload}
196
-                        maxUpload={maxUpload}
197
-                        fileList={this.state.fileList}
198
-                      />
199
-                    </div>
200
-                  }
201
-                  placement="bottomLeft"
202
-                  title={
203
-                    <div style={{ margin: "5px auto" }}>
204
-                      <span>
205
-                        上传图片
206
-                        {maxUpload >= 2 ? (
207
-                          <span style={{ color: "#666", fontWeight: 400 }}>
208
-                            (您还能上传{maxUpload - this.state.fileList.length}张图片)
209
-                          </span>
210
-                        ) : null}
211
-                      </span>
212
-                      <Icon
213
-                        type="close"
214
-                        onClick={() => this.handleShowUpload(false)}
215
-                        style={{
216
-                          float: "right",
217
-                          cursor: "pointer",
218
-                          marginTop: 4
219
-                        }}
220
-                      />
221
-                    </div>
222
-                  }
223
-                >
224
-                  {imageToolIcon ? (
225
-                    React.cloneElement(imageToolIcon, {
226
-                      onClick: () => this.handleShowUpload(true)
227
-                    })
228
-                  ) : (
229
-                    <Icon
230
-                      type="picture"
231
-                      className="comment-toolbar-icon"
232
-                      style={{ marginLeft: 10 }}
233
-                      onClick={() => this.handleShowUpload(true)}
188
+              <Popover
189
+                trigger="click"
190
+                visible={this.state.showUpload}
191
+                overlayStyle={{ zIndex: 999 }}
192
+                onVisibleChange={
193
+                  closeUploadWhenBlur
194
+                    ? visible => {
195
+                        this.handleShowUpload(visible);
196
+                      }
197
+                    : null
198
+                }
199
+                content={
200
+                  <div
201
+                    style={{
202
+                      width: 112 * maxUpload,
203
+                      minHeight: 100,
204
+                      margin: "0 auto"
205
+                    }}
206
+                  >
207
+                    <Upload
208
+                      onChangeFileList={this.handleChangeFileList}
209
+                      onUpload={this.handleUpload}
210
+                      maxUpload={maxUpload}
211
+                      fileList={this.state.fileList}
212
+                      showError={this.props.showError}
213
+                      onError={this.props.onError}
234 214
                     />
235
-                  )}
236
-                </Popover>
237
-              ) : (
238
-                <Popover
239
-                  visible={this.state.showUpload}
240
-                  overlayStyle={{ zIndex: 999 }}
241
-                  content={
242
-                    <div
215
+                  </div>
216
+                }
217
+                placement="bottomLeft"
218
+                title={
219
+                  <div style={{ margin: "5px auto" }}>
220
+                    <span>
221
+                      上传图片
222
+                      {maxUpload >= 2 ? (
223
+                        <span style={{ color: "#666", fontWeight: 400 }}>
224
+                          (您还能上传{maxUpload - this.state.fileList.length}张图片)
225
+                        </span>
226
+                      ) : null}
227
+                    </span>
228
+                    <Icon
229
+                      type="close"
230
+                      onClick={() => this.handleShowUpload(false)}
243 231
                       style={{
244
-                        width: 112 * maxUpload,
245
-                        minHeight: 100,
246
-                        margin: "0 auto"
232
+                        float: "right",
233
+                        cursor: "pointer",
234
+                        marginTop: 4
247 235
                       }}
248
-                    >
249
-                      <Upload
250
-                        onChangeFileList={this.handleChangeFileList}
251
-                        onUpload={this.handleUpload}
252
-                        maxUpload={maxUpload}
253
-                        fileList={this.state.fileList}
254
-                        showError={this.props.showError}
255
-                        onError={this.props.onError}
256
-                      />
257
-                    </div>
258
-                  }
259
-                  placement="bottomLeft"
260
-                  title={
261
-                    <div style={{ margin: "5px auto" }}>
262
-                      <span>
263
-                        上传图片
264
-                        {maxUpload >= 2 ? (
265
-                          <span style={{ color: "#666", fontWeight: 400 }}>
266
-                            (您还能上传{maxUpload - this.state.fileList.length}张图片)
267
-                          </span>
268
-                        ) : null}
269
-                      </span>
270
-                      <Icon
271
-                        type="close"
272
-                        onClick={() => this.handleShowUpload(false)}
273
-                        style={{
274
-                          float: "right",
275
-                          cursor: "pointer",
276
-                          marginTop: 4
277
-                        }}
278
-                      />
279
-                    </div>
280
-                  }
281
-                >
282
-                  {imageToolIcon ? (
283
-                    React.cloneElement(imageToolIcon, {
284
-                      onClick: () => this.handleShowUpload(true)
285
-                    })
286
-                  ) : (
287
-                    <Icon
288
-                      type="picture"
289
-                      className="comment-toolbar-icon"
290
-                      style={{ marginLeft: 10 }}
291
-                      onClick={() => this.handleShowUpload(true)}
292 236
                     />
293
-                  )}
294
-                </Popover>
295
-              )
237
+                  </div>
238
+                }
239
+              >
240
+                {imageToolIcon ? (
241
+                  React.cloneElement(imageToolIcon, {
242
+                    onClick: () => this.handleShowUpload(true)
243
+                  })
244
+                ) : (
245
+                  <Icon
246
+                    type="picture"
247
+                    className="comment-toolbar-icon"
248
+                    style={{ marginLeft: 10 }}
249
+                    onClick={() => this.handleShowUpload(true)}
250
+                  />
251
+                )}
252
+              </Popover>
296 253
             ) : null}
297 254
           </div>
298 255