Procházet zdrojové kódy

增加onError props.

narro před 6 roky
rodič
revize
af7c8663cd

+ 5
- 0
CHANGELOG.md Zobrazit soubor

@@ -1,5 +1,10 @@
1 1
 # CHANGELOG
2 2
 
3
+## 0.5.2
4
+
5
+- [x] feat: Editor 增加 props: showError、onError、beforeSubmit
6
+- [x] feat: Comment 增加 props: showError、onError
7
+
3 8
 ## 0.5.1
4 9
 
5 10
 - [x] feat: Editor 添加 props: closeUploadWhenBlur

+ 14
- 12
README.md Zobrazit soubor

@@ -13,18 +13,19 @@ import Comment, { Editor, RenderText } from 'comment';
13 13
 ## Comment
14 14
 
15 15
 
16
-| props            | type    | default                            | required | description                                                  |
17
-| ---------------- | ------- | ---------------------------------- | -------- | ------------------------------------------------------------ |
18
-| type             | number  |                                    | true     | 评论的 type                                                  |
19
-| businessId       | string  |                                    | true     | 评论的 business id                                           |
20
-| API              | string  | http://api.links123.net/comment/v1 | false    | API 前缀                                                     |
21
-| showList         | boolean | true                               | false    | 是否显示评论列表                                             |
22
-| showEditor       | boolean | true                               | false    | 是否显示评论输入框                                           |
23
-| showAlertComment | boolean | false                              | false    | 评论成功之后,是否通过 Antd 的 Message 组件进行提示          |
24
-| showAlertReply   | boolean | false                              | false    | 回复成功之后,是否通过 Antd 的 Message 组件进行提示          |
25
-| showAlertFavor   | boolean | false                              | false    | 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示 |
26
-| showError        | boolean | true                               | false    | 是否使用Antd的Message组件提示错误信息                        |
27
-| token            | string  |                                    | false    | [deprecated] token,用于身份认证,非必须。默认使用 cookie    |
16
+| props            | type          | default                            | required | description                                                  |
17
+| ---------------- | ------------- | ---------------------------------- | -------- | ------------------------------------------------------------ |
18
+| type             | number        |                                    | true     | 评论的 type                                                  |
19
+| businessId       | string        |                                    | true     | 评论的 business id                                           |
20
+| API              | string        | http://api.links123.net/comment/v1 | false    | API 前缀                                                     |
21
+| showList         | boolean       | true                               | false    | 是否显示评论列表                                             |
22
+| showEditor       | boolean       | true                               | false    | 是否显示评论输入框                                           |
23
+| showAlertComment | boolean       | false                              | false    | 评论成功之后,是否通过 Antd 的 Message 组件进行提示          |
24
+| showAlertReply   | boolean       | false                              | false    | 回复成功之后,是否通过 Antd 的 Message 组件进行提示          |
25
+| showAlertFavor   | boolean       | false                              | false    | 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示 |
26
+| showError        | boolean       | true                               | false    | 是否使用Antd的Message组件提示错误信息                        |
27
+| onError          | function(msg) |                                    | false    | 错误回调, 出错了会被调用                                     |
28
+| token            | string        |                                    | false    | [deprecated] token,用于身份认证,非必须。默认使用 cookie    |
28 29
 
29 30
 
30 31
 
@@ -50,6 +51,7 @@ import Comment, { Editor, RenderText } from 'comment';
50 51
 | onRef               | function                        |               | false    | 传递子组件的引用                                                                                  |
51 52
 | closeUploadWhenBlur | boolean                         |               | false    | 当 upload 失去焦点(鼠标点击非 Upload 的区域)的时候,是否自动关闭 Popover                        |
52 53
 | showError           | boolean                         | true          | false    | 是否使用Antd的Message组件提示错误信息, 主要是上传图片出错的情况                                   |
54
+| onError             | function(msg)                   |               | false    | 错误回调, 出错了会被调用, 主要是上传图片出错的情况                                                                           |
53 55
 
54 56
 
55 57
 

+ 34
- 30
lib/App.js Zobrazit soubor

@@ -92,13 +92,6 @@ var App = function (_Component) {
92 92
     _this.sCommentFavor = _this.sCommentFavor.bind(_this);
93 93
     _this.sReplyFavor = _this.sReplyFavor.bind(_this);
94 94
     _this.sOssSts = _this.sOssSts.bind(_this);
95
-    _this.message = _extends({}, _message3.default, {
96
-      error: function error() {
97
-        if (_this.props.showError) {
98
-          _message3.default.error.apply(antdMessage, arguments);
99
-        }
100
-      }
101
-    });
102 95
     return _this;
103 96
   }
104 97
 
@@ -114,6 +107,16 @@ var App = function (_Component) {
114 107
   }, {
115 108
     key: "componentDidMount",
116 109
     value: function componentDidMount() {}
110
+  }, {
111
+    key: "error",
112
+    value: function error(msg) {
113
+      if (this.props.showError) {
114
+        _message3.default.error(msg);
115
+      }
116
+      if (this.props.onError) {
117
+        this.props.onError(msg);
118
+      }
119
+    }
117 120
 
118 121
     /**
119 122
      * 改变 loading 状态
@@ -172,17 +175,17 @@ var App = function (_Component) {
172 175
             total: total
173 176
           });
174 177
         } else {
175
-          _this2.message.info("没有更多评论了");
178
+          _message3.default.info("没有更多评论了");
176 179
           _this2.setState({
177 180
             isNoMoreComment: true
178 181
           });
179 182
         }
180 183
       }).catch(function (error) {
181 184
         if (error.response && error.response.data && error.response.data.msg) {
182
-          _this2.message.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
185
+          _this2.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
183 186
           return;
184 187
         }
185
-        _this2.message.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
188
+        _this2.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
186 189
       }).finally(function () {
187 190
         _this2.handleChangeLoading("sGetComment", false);
188 191
       });
@@ -207,7 +210,7 @@ var App = function (_Component) {
207 210
 
208 211
       this.axios.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + _constant.LIMIT).then(function (response) {
209 212
         if (!response.data.list) {
210
-          _this3.message.info("没有更多数据了!");
213
+          _message3.default.info("没有更多数据了!");
211 214
         }
212 215
         var list = _this3.state.list.map(function (item) {
213 216
           if (item.id === commentId) {
@@ -234,10 +237,10 @@ var App = function (_Component) {
234 237
         _this3.setState({ list: list });
235 238
       }).catch(function (error) {
236 239
         if (error.response && error.response.data && error.response.data.msg) {
237
-          _this3.message.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
240
+          _this3.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
238 241
           return;
239 242
         }
240
-        _this3.message.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
243
+        _this3.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
241 244
       }).finally(function () {
242 245
         _this3.handleChangeLoading("sGetReply", false);
243 246
       });
@@ -258,7 +261,7 @@ var App = function (_Component) {
258 261
 
259 262
       var cb = arguments[1];
260 263
 
261
-      if (!content) return this.message.error("评论内容不能为空 ");
264
+      if (!content) return this.error("评论内容不能为空 ");
262 265
       this.handleChangeLoading("sCreateComment", true);
263 266
       var _props2 = this.props,
264 267
           API = _props2.API,
@@ -275,7 +278,7 @@ var App = function (_Component) {
275 278
         withCredentials: true
276 279
       }).then(function (response) {
277 280
         if (_this4.props.showAlertComment) {
278
-          _this4.message.success("评论成功!");
281
+          _message3.default.success("评论成功!");
279 282
         }
280 283
         if ((0, _helper.isFunction)(cb)) cb();
281 284
         // 将数据写入到 list 中
@@ -291,10 +294,10 @@ var App = function (_Component) {
291 294
         _this4.setState({ list: list, total: total + 1 });
292 295
       }).catch(function (error) {
293 296
         if (error.response && error.response.data && error.response.data.msg) {
294
-          _this4.message.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
297
+          _this4.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
295 298
           return;
296 299
         }
297
-        _this4.message.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
300
+        _this4.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
298 301
       }).finally(function () {
299 302
         _this4.handleChangeLoading("sCreateComment", false);
300 303
       });
@@ -311,7 +314,7 @@ var App = function (_Component) {
311 314
     value: function sCreateReply(data, cb) {
312 315
       var _this5 = this;
313 316
 
314
-      if (!data.content) return this.message.error("回复内容不能为空 ");
317
+      if (!data.content) return this.error("回复内容不能为空 ");
315 318
       this.handleChangeLoading("sCreateReply", true);
316 319
       var API = this.props.API;
317 320
 
@@ -321,7 +324,7 @@ var App = function (_Component) {
321 324
         withCredentials: true
322 325
       }).then(function (response) {
323 326
         if (_this5.props.showAlertReply) {
324
-          _this5.message.success("回复成功!");
327
+          _message3.default.success("回复成功!");
325 328
         }
326 329
         if ((0, _helper.isFunction)(cb)) cb();
327 330
         // 将数据写入到 list 中
@@ -340,10 +343,10 @@ var App = function (_Component) {
340 343
         _this5.setState({ list: list });
341 344
       }).catch(function (error) {
342 345
         if (error.response && error.response.data && error.response.data.msg) {
343
-          _this5.message.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
346
+          _this5.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
344 347
           return;
345 348
         }
346
-        _this5.message.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
349
+        _this5.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
347 350
       }).finally(function () {
348 351
         _this5.handleChangeLoading("sCreateReply", false);
349 352
       });
@@ -368,7 +371,7 @@ var App = function (_Component) {
368 371
         withCredentials: true
369 372
       }).then(function (response) {
370 373
         if (_this6.props.showAlertFavor) {
371
-          _this6.message.success(favored ? "取消点赞成功!" : "点赞成功!");
374
+          _message3.default.success(favored ? "取消点赞成功!" : "点赞成功!");
372 375
         }
373 376
         // 更新 list 中的该项数据的 favored
374 377
         var list = _this6.state.list.map(function (item) {
@@ -381,10 +384,10 @@ var App = function (_Component) {
381 384
         _this6.setState({ list: list });
382 385
       }).catch(function (error) {
383 386
         if (error.response && error.response.data && error.response.data.msg) {
384
-          _this6.message.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
387
+          _this6.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
385 388
           return;
386 389
         }
387
-        _this6.message.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
390
+        _this6.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
388 391
       }).finally(function () {
389 392
         _this6.handleChangeLoading("sCommentFavor", false);
390 393
       });
@@ -412,7 +415,7 @@ var App = function (_Component) {
412 415
         },
413 416
         withCredentials: true
414 417
       }).then(function (response) {
415
-        _this7.message.success(favored ? "取消点赞成功!" : "点赞成功!");
418
+        _message3.default.success(favored ? "取消点赞成功!" : "点赞成功!");
416 419
         // 更新 list 中的该项数据的 favored
417 420
         var list = _this7.state.list.map(function (item) {
418 421
           if (item.id === commentId) {
@@ -432,10 +435,10 @@ var App = function (_Component) {
432 435
         _this7.setState({ list: list });
433 436
       }).catch(function (error) {
434 437
         if (error.response && error.response.data && error.response.data.msg) {
435
-          _this7.message.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
438
+          _this7.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
436 439
           return;
437 440
         }
438
-        _this7.message.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
441
+        _this7.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
439 442
       }).finally(function () {
440 443
         _this7.handleChangeLoading("sReplyFavor", false);
441 444
       });
@@ -457,10 +460,10 @@ var App = function (_Component) {
457 460
         _this8.setState({ oss: _extends({}, response.data) });
458 461
       }).catch(function (error) {
459 462
         if (error.response && error.response.data && error.response.data.msg) {
460
-          _this8.message.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
463
+          _this8.error(_lang2.default[error.response.data.msg] || _constant.ERROR_DEFAULT);
461 464
           return;
462 465
         }
463
-        _this8.message.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
466
+        _this8.error(_lang2.default[error.message] || _constant.ERROR_DEFAULT);
464 467
       }).finally(function () {
465 468
         _this8.handleChangeLoading("sOssSts", false);
466 469
       });
@@ -508,7 +511,8 @@ App.propTypes = {
508 511
   showAlertComment: _propTypes2.default.bool, // 评论成功之后,是否通过 Antd 的 Message 组件进行提示
509 512
   showAlertReply: _propTypes2.default.bool, // 回复成功之后,是否通过 Antd 的 Message 组件进行提示
510 513
   showAlertFavor: _propTypes2.default.bool, // 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示
511
-  showError: _propTypes2.default.bool // 是否使用Antd的Message组件提示错误信息
514
+  showError: _propTypes2.default.bool, // 是否使用Antd的Message组件提示错误信息
515
+  onError: _propTypes2.default.func // 错误回调, 出错了会被调用
512 516
 };
513 517
 
514 518
 App.defaultProps = {

+ 1
- 1
lib/App.js.map
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 5
- 1
lib/components/Editor/Upload.js Zobrazit soubor

@@ -145,8 +145,12 @@ var App = function (_React$Component) {
145 145
           info.onSuccess();
146 146
           _this2.props.onUpload({ path: data.name, uid: file.uid });
147 147
         }).catch(function (e) {
148
+          var msg = e.message || _constant.ERROR_DEFAULT;
148 149
           if (_this2.props.showError) {
149
-            _message3.default.error(e.message || _constant.ERROR_DEFAULT);
150
+            _message3.default.error(msg);
151
+          }
152
+          if (_this2.props.onError) {
153
+            _this2.props.onError(msg);
150 154
           }
151 155
           info.onError(e);
152 156
         });

+ 1
- 1
lib/components/Editor/Upload.js.map
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 4
- 2
lib/components/Editor/index.js Zobrazit soubor

@@ -346,7 +346,8 @@ var Editor = function (_React$Component) {
346 346
                     onUpload: this.handleUpload,
347 347
                     maxUpload: maxUpload,
348 348
                     fileList: this.state.fileList,
349
-                    showError: this.props.showError
349
+                    showError: this.props.showError,
350
+                    onError: this.props.onError
350 351
                   })
351 352
                 ),
352 353
                 placement: "bottomLeft",
@@ -435,7 +436,8 @@ Editor.propTypes = {
435 436
   button: _propTypes2.default.node,
436 437
   emojiToolIcon: _propTypes2.default.node,
437 438
   imageToolIcon: _propTypes2.default.node,
438
-  showError: _propTypes2.default.bool
439
+  showError: _propTypes2.default.bool,
440
+  onError: _propTypes2.default.func
439 441
 };
440 442
 
441 443
 Editor.defaultProps = {

+ 1
- 1
lib/components/Editor/index.js.map
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 8
- 2
lib/index.js Zobrazit soubor

@@ -80,13 +80,19 @@ var Index = function (_Component) {
80 80
           showAlertComment: true,
81 81
           showAlertReply: true,
82 82
           showAlertFavor: true,
83
-          showError: false
83
+          showError: false,
84
+          onError: function onError(msg) {
85
+            console.log("-----------" + msg);
86
+          }
84 87
         },
85 88
         _react2.default.createElement(_App.Editor, {
86 89
           maxUpload: 4,
87
-          showError: false,
88 90
           beforeSubmit: function beforeSubmit() {
89 91
             return true;
92
+          },
93
+          showError: false,
94
+          onError: function onError(msg) {
95
+            console.log("-----------" + msg);
90 96
           }
91 97
         })
92 98
       );

+ 1
- 1
lib/index.js.map Zobrazit soubor

@@ -1 +1 @@
1
-{"version":3,"sources":["../src/index.js"],"names":["Index","props","state","value","handleChangeValue","bind","handleChangeSubmit","setState","console","log","text","files","loading","setTimeout","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;AANb;AAQE,sCAAC,WAAD;AACE,qBAAW,CADb;AAEE,qBAAW,KAFb;AAGE,wBAAc,wBAAM;AAClB,mBAAO,IAAP;AACD;AALH;AARF,OADF;;AAmBA;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;;;;EArFiBG,gB;;AAwFpBC,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      >\r\n        <Editor\r\n          maxUpload={4}\r\n          showError={false}\r\n          beforeSubmit={() => {\r\n            return true;\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","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,iBAACG,GAAD,EAAS;AAChBN,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AATH;AAWE,sCAAC,WAAD;AACE,qBAAW,CADb;AAEE,wBAAc,wBAAM;AAClB,mBAAO,IAAP;AACD,WAJH;AAKE,qBAAW,KALb;AAME,mBAAS,iBAACA,GAAD,EAAS;AAChBN,oBAAQC,GAAR,iBAA0BK,GAA1B;AACD;AARH;AAXF,OADF;;AAyBA;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;;;;EA3FiBC,gB;;AA8FpBC,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 true;\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
package.json Zobrazit soubor

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

+ 34
- 32
src/App.js Zobrazit soubor

@@ -1,6 +1,6 @@
1 1
 import React, { Component } from "react";
2 2
 import PropTypes from "prop-types";
3
-import { message as antdMessage } from "antd";
3
+import { message } from "antd";
4 4
 import axios from "axios";
5 5
 import { ERROR_DEFAULT, LIMIT } from "./constant";
6 6
 import { CommentContext } from "./Comment";
@@ -36,14 +36,6 @@ class App extends Component {
36 36
     this.sCommentFavor = this.sCommentFavor.bind(this);
37 37
     this.sReplyFavor = this.sReplyFavor.bind(this);
38 38
     this.sOssSts = this.sOssSts.bind(this);
39
-    this.message = {
40
-      ...antdMessage,
41
-      error: (...args) => {
42
-        if (this.props.showError) {
43
-          antdMessage.error(...args);
44
-        }
45
-      }
46
-    };
47 39
   }
48 40
 
49 41
   componentWillMount() {
@@ -58,6 +50,15 @@ class App extends Component {
58 50
 
59 51
   componentDidMount() {}
60 52
 
53
+  error(msg) {
54
+    if (this.props.showError) {
55
+      message.error(msg);
56
+    }
57
+    if (this.props.onError) {
58
+      this.props.onError(msg);
59
+    }
60
+  }
61
+
61 62
   /**
62 63
    * 改变 loading 状态
63 64
    * @param {string} key key
@@ -95,7 +96,7 @@ class App extends Component {
95 96
             total
96 97
           });
97 98
         } else {
98
-          this.message.info("没有更多评论了");
99
+          message.info("没有更多评论了");
99 100
           this.setState({
100 101
             isNoMoreComment: true
101 102
           });
@@ -103,10 +104,10 @@ class App extends Component {
103 104
       })
104 105
       .catch(error => {
105 106
         if (error.response && error.response.data && error.response.data.msg) {
106
-          this.message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
107
+          this.error(lang[error.response.data.msg] || ERROR_DEFAULT);
107 108
           return;
108 109
         }
109
-        this.message.error(lang[error.message] || ERROR_DEFAULT);
110
+        this.error(lang[error.message] || ERROR_DEFAULT);
110 111
       })
111 112
       .finally(() => {
112 113
         this.handleChangeLoading("sGetComment", false);
@@ -123,7 +124,7 @@ class App extends Component {
123 124
       .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
124 125
       .then(response => {
125 126
         if (!response.data.list) {
126
-          this.message.info("没有更多数据了!");
127
+          message.info("没有更多数据了!");
127 128
         }
128 129
         const list = this.state.list.map(item => {
129 130
           if (item.id === commentId) {
@@ -151,10 +152,10 @@ class App extends Component {
151 152
       })
152 153
       .catch(error => {
153 154
         if (error.response && error.response.data && error.response.data.msg) {
154
-          this.message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
155
+          this.error(lang[error.response.data.msg] || ERROR_DEFAULT);
155 156
           return;
156 157
         }
157
-        this.message.error(lang[error.message] || ERROR_DEFAULT);
158
+        this.error(lang[error.message] || ERROR_DEFAULT);
158 159
       })
159 160
       .finally(() => {
160 161
         this.handleChangeLoading("sGetReply", false);
@@ -166,7 +167,7 @@ class App extends Component {
166 167
    * @param {object} {content} comment content
167 168
    */
168 169
   sCreateComment({ content } = {}, cb) {
169
-    if (!content) return this.message.error("评论内容不能为空 ");
170
+    if (!content) return this.error("评论内容不能为空 ");
170 171
     this.handleChangeLoading("sCreateComment", true);
171 172
     const { API, type, businessId } = this.props;
172 173
     this.axios(`${API}/comments`, {
@@ -180,7 +181,7 @@ class App extends Component {
180 181
     })
181 182
       .then(response => {
182 183
         if (this.props.showAlertComment) {
183
-          this.message.success("评论成功!");
184
+          message.success("评论成功!");
184 185
         }
185 186
         if (isFunction(cb)) cb();
186 187
         // 将数据写入到 list 中
@@ -195,10 +196,10 @@ class App extends Component {
195 196
       })
196 197
       .catch(error => {
197 198
         if (error.response && error.response.data && error.response.data.msg) {
198
-          this.message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
199
+          this.error(lang[error.response.data.msg] || ERROR_DEFAULT);
199 200
           return;
200 201
         }
201
-        this.message.error(lang[error.message] || ERROR_DEFAULT);
202
+        this.error(lang[error.message] || ERROR_DEFAULT);
202 203
       })
203 204
       .finally(() => {
204 205
         this.handleChangeLoading("sCreateComment", false);
@@ -211,7 +212,7 @@ class App extends Component {
211 212
    * @param {object} data { comment_id, content, [reply_id] }
212 213
    */
213 214
   sCreateReply(data, cb) {
214
-    if (!data.content) return this.message.error("回复内容不能为空 ");
215
+    if (!data.content) return this.error("回复内容不能为空 ");
215 216
     this.handleChangeLoading("sCreateReply", true);
216 217
     const { API } = this.props;
217 218
     this.axios(`${API}/replies`, {
@@ -221,7 +222,7 @@ class App extends Component {
221 222
     })
222 223
       .then(response => {
223 224
         if (this.props.showAlertReply) {
224
-          this.message.success("回复成功!");
225
+          message.success("回复成功!");
225 226
         }
226 227
         if (isFunction(cb)) cb();
227 228
         // 将数据写入到 list 中
@@ -242,10 +243,10 @@ class App extends Component {
242 243
       })
243 244
       .catch(error => {
244 245
         if (error.response && error.response.data && error.response.data.msg) {
245
-          this.message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
246
+          this.error(lang[error.response.data.msg] || ERROR_DEFAULT);
246 247
           return;
247 248
         }
248
-        this.message.error(lang[error.message] || ERROR_DEFAULT);
249
+        this.error(lang[error.message] || ERROR_DEFAULT);
249 250
       })
250 251
       .finally(() => {
251 252
         this.handleChangeLoading("sCreateReply", false);
@@ -266,7 +267,7 @@ class App extends Component {
266 267
     })
267 268
       .then(response => {
268 269
         if (this.props.showAlertFavor) {
269
-          this.message.success(favored ? "取消点赞成功!" : "点赞成功!");
270
+          message.success(favored ? "取消点赞成功!" : "点赞成功!");
270 271
         }
271 272
         // 更新 list 中的该项数据的 favored
272 273
         const list = this.state.list.map(item => {
@@ -280,10 +281,10 @@ class App extends Component {
280 281
       })
281 282
       .catch(error => {
282 283
         if (error.response && error.response.data && error.response.data.msg) {
283
-          this.message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
284
+          this.error(lang[error.response.data.msg] || ERROR_DEFAULT);
284 285
           return;
285 286
         }
286
-        this.message.error(lang[error.message] || ERROR_DEFAULT);
287
+        this.error(lang[error.message] || ERROR_DEFAULT);
287 288
       })
288 289
       .finally(() => {
289 290
         this.handleChangeLoading("sCommentFavor", false);
@@ -307,7 +308,7 @@ class App extends Component {
307 308
       withCredentials: true
308 309
     })
309 310
       .then(response => {
310
-        this.message.success(favored ? "取消点赞成功!" : "点赞成功!");
311
+        message.success(favored ? "取消点赞成功!" : "点赞成功!");
311 312
         // 更新 list 中的该项数据的 favored
312 313
         const list = this.state.list.map(item => {
313 314
           if (item.id === commentId) {
@@ -328,10 +329,10 @@ class App extends Component {
328 329
       })
329 330
       .catch(error => {
330 331
         if (error.response && error.response.data && error.response.data.msg) {
331
-          this.message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
332
+          this.error(lang[error.response.data.msg] || ERROR_DEFAULT);
332 333
           return;
333 334
         }
334
-        this.message.error(lang[error.message] || ERROR_DEFAULT);
335
+        this.error(lang[error.message] || ERROR_DEFAULT);
335 336
       })
336 337
       .finally(() => {
337 338
         this.handleChangeLoading("sReplyFavor", false);
@@ -351,10 +352,10 @@ class App extends Component {
351 352
       })
352 353
       .catch(error => {
353 354
         if (error.response && error.response.data && error.response.data.msg) {
354
-          this.message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
355
+          this.error(lang[error.response.data.msg] || ERROR_DEFAULT);
355 356
           return;
356 357
         }
357
-        this.message.error(lang[error.message] || ERROR_DEFAULT);
358
+        this.error(lang[error.message] || ERROR_DEFAULT);
358 359
       })
359 360
       .finally(() => {
360 361
         this.handleChangeLoading("sOssSts", false);
@@ -401,7 +402,8 @@ App.propTypes = {
401 402
   showAlertComment: PropTypes.bool, // 评论成功之后,是否通过 Antd 的 Message 组件进行提示
402 403
   showAlertReply: PropTypes.bool, // 回复成功之后,是否通过 Antd 的 Message 组件进行提示
403 404
   showAlertFavor: PropTypes.bool, // 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示
404
-  showError: PropTypes.bool // 是否使用Antd的Message组件提示错误信息
405
+  showError: PropTypes.bool, // 是否使用Antd的Message组件提示错误信息
406
+  onError: PropTypes.func // 错误回调, 出错了会被调用
405 407
 };
406 408
 
407 409
 App.defaultProps = {

+ 5
- 1
src/components/Editor/Upload.js Zobrazit soubor

@@ -88,8 +88,12 @@ class App extends React.Component {
88 88
           this.props.onUpload({ path: data.name, uid: file.uid });
89 89
         })
90 90
         .catch(e => {
91
+          const msg = e.message || ERROR_DEFAULT;
91 92
           if (this.props.showError) {
92
-            message.error(e.message || ERROR_DEFAULT);
93
+            message.error(msg);
94
+          }
95
+          if (this.props.onError) {
96
+            this.props.onError(msg);
93 97
           }
94 98
           info.onError(e);
95 99
         });

+ 3
- 1
src/components/Editor/index.js Zobrazit soubor

@@ -249,6 +249,7 @@ class Editor extends React.Component {
249 249
                         maxUpload={maxUpload}
250 250
                         fileList={this.state.fileList}
251 251
                         showError={this.props.showError}
252
+                        onError={this.props.onError}
252 253
                       />
253 254
                     </div>
254 255
                   }
@@ -331,7 +332,8 @@ Editor.propTypes = {
331 332
   button: PropTypes.node,
332 333
   emojiToolIcon: PropTypes.node,
333 334
   imageToolIcon: PropTypes.node,
334
-  showError: PropTypes.bool
335
+  showError: PropTypes.bool,
336
+  onError: PropTypes.func
335 337
 };
336 338
 
337 339
 Editor.defaultProps = {

+ 7
- 1
src/index.js Zobrazit soubor

@@ -41,13 +41,19 @@ class Index extends Component {
41 41
         showAlertReply
42 42
         showAlertFavor
43 43
         showError={false}
44
+        onError={msg => {
45
+          console.log(`-----------${msg}`);
46
+        }}
44 47
       >
45 48
         <Editor
46 49
           maxUpload={4}
47
-          showError={false}
48 50
           beforeSubmit={() => {
49 51
             return true;
50 52
           }}
53
+          showError={false}
54
+          onError={msg => {
55
+            console.log(`-----------${msg}`);
56
+          }}
51 57
         />
52 58
       </App>
53 59
     );