Browse Source

app增加onCountChange回调

narrowizard 5 years ago
parent
commit
8d549fb870

+ 3
- 0
CHANGELOG.md View File

@@ -1,5 +1,8 @@
1 1
 # CHANGELOG
2 2
 
3
+## 1.0.2
4
+- [x] App增加onCountChange回调
5
+
3 6
 ## 1.0.1
4 7
 - [x] App增加business_user_id属性
5 8
 

+ 24
- 23
README.md View File

@@ -2,7 +2,7 @@
2 2
 
3 3
 通用评论系统及编辑器
4 4
 
5
-**`version 0.5.14`**
5
+**`version 1.0.2`**
6 6
 
7 7
 ```js
8 8
 import Comment, { Editor, RenderText } from 'comment';
@@ -188,28 +188,29 @@ main();
188 188
 - 标记了`deprecated`的配置项表示不推荐使用,并且可能在将来版本中不再受支持。
189 189
 
190 190
 
191
-| props             | type           | default                            | required | description                                       |                          |
192
-|-------------------|----------------|------------------------------------|----------|---------------------------------------------------|--------------------------|
193
-| type              | number         |                                    | true     | 评论的 type                                          |                          |
194
-| businessId        | string         |                                    | true     | 评论的 business id                                   |                          |
195
-| API               | string         | http://api.links123.net/comment/v1 | false    | API 前缀                                            |                          |
196
-| showList          | boolean        | true                               | false    | 是否显示评论列表                                          |                          |
197
-| showEditor        | boolean        | true                               | false    | 是否显示评论输入框                                         |                          |
198
-| showAlertComment  | boolean        | false                              | false    | 评论成功之后,是否通过 Antd 的 Message 组件进行提示                 |                          |
199
-| showAlertReply    | boolean        | false                              | false    | 回复成功之后,是否通过 Antd 的 Message 组件进行提示                 |                          |
200
-| showAlertFavor    | boolean        | false                              | false    | 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示            |                          |
201
-| showError         | boolean        | true                               | false    | 是否使用Antd的Message组件提示错误信息                          |                          |
202
-| onError           | function(msg)  |                                    | false    | 错误回调, 出错了会被调用                                     |                          |
203
-| userId            | number         |                                    | false    | 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮 |                          |
204
-| token             | string         |                                    | false    | [deprecated] token,用于身份认证,非必须。默认使用 cookie         |                          |
205
-| pageType          | string         | more                               | false    | 分页类别, more-加载更多 pagination-页码                     |                          |
206
-| page              | number         |                                    | false    | 页码受控模式,如果传递了此参数,则需要通过onPageChange回调手动维护page.      |                          |
207
-| limit             | number         | 10                                 | false    | 一次加载的评论数量                                         |                          |
208
-| onGetMoreBtnClick | function()     |                                    | false    | 点击查看更多按钮的回调                                       |                          |
209
-| onPageChange      | function(page) |                                    | false    | 页码发生变化时的回调,注意:分页数据获取还是在组件内部处理的                    |                          |
210
-| onDelete          | function(type) |                                    | false    | 评论或回复删除成功后的回调, type: "comment" \                  | "reply" , 用于区分删除的是评论还是回复 |
211
-| locales           | string         | 语言                                 | false    |                                                   |                          |
212
-| businessUserId    | number         |                                    | false    | 评论目标的用户id, 用于发送通知                                 |                          |
191
+| props             | type            | default                            | required | description                                       |                          |
192
+|-------------------|-----------------|------------------------------------|----------|---------------------------------------------------|--------------------------|
193
+| type              | number          |                                    | true     | 评论的 type                                          |                          |
194
+| businessId        | string          |                                    | true     | 评论的 business id                                   |                          |
195
+| API               | string          | http://api.links123.net/comment/v1 | false    | API 前缀                                            |                          |
196
+| showList          | boolean         | true                               | false    | 是否显示评论列表                                          |                          |
197
+| showEditor        | boolean         | true                               | false    | 是否显示评论输入框                                         |                          |
198
+| showAlertComment  | boolean         | false                              | false    | 评论成功之后,是否通过 Antd 的 Message 组件进行提示                 |                          |
199
+| showAlertReply    | boolean         | false                              | false    | 回复成功之后,是否通过 Antd 的 Message 组件进行提示                 |                          |
200
+| showAlertFavor    | boolean         | false                              | false    | 点赞/取消点赞成功之后,是否通过 Antd 的 Message 组件进行提示            |                          |
201
+| showError         | boolean         | true                               | false    | 是否使用Antd的Message组件提示错误信息                          |                          |
202
+| onError           | function(msg)   |                                    | false    | 错误回调, 出错了会被调用                                     |                          |
203
+| userId            | number          |                                    | false    | 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮 |                          |
204
+| token             | string          |                                    | false    | [deprecated] token,用于身份认证,非必须。默认使用 cookie         |                          |
205
+| pageType          | string          | more                               | false    | 分页类别, more-加载更多 pagination-页码                     |                          |
206
+| page              | number          |                                    | false    | 页码受控模式,如果传递了此参数,则需要通过onPageChange回调手动维护page.      |                          |
207
+| limit             | number          | 10                                 | false    | 一次加载的评论数量                                         |                          |
208
+| onGetMoreBtnClick | function()      |                                    | false    | 点击查看更多按钮的回调                                       |                          |
209
+| onPageChange      | function(page)  |                                    | false    | 页码发生变化时的回调,注意:分页数据获取还是在组件内部处理的                    |                          |
210
+| onDelete          | function(type)  |                                    | false    | 评论或回复删除成功后的回调, type: "comment" \                  | "reply" , 用于区分删除的是评论还是回复 |
211
+| locales           | string          | 语言                                 | false    |                                                   |                          |
212
+| businessUserId    | number          |                                    | false    | 评论目标的用户id, 用于发送通知                                 |                          |
213
+| onCountChange     | function(count) |                                    | false    | 评论数量发生变更时的回调(初次获取也会调用)                            |                          |
213 214
 
214 215
 ## Editor
215 216
 

+ 1
- 1
assets/example.html View File

@@ -20,7 +20,7 @@
20 20
   </div>
21 21
   
22 22
   <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
23
-  <script type="text/javascript" src="./static/js/main.d5cd277c.js"></script>
23
+  <script type="text/javascript" src="./static/js/main.8d850e35.js"></script>
24 24
   <script type="text/javascript" src="example.js"></script>
25 25
 </body>
26 26
 </html>

+ 2
- 0
assets/static/js/main.8d850e35.js
File diff suppressed because it is too large
View File


+ 1
- 0
assets/static/js/main.8d850e35.js.map
File diff suppressed because it is too large
View File


+ 0
- 2
assets/static/js/main.d5cd277c.js
File diff suppressed because it is too large
View File


+ 0
- 1
assets/static/js/main.d5cd277c.js.map
File diff suppressed because it is too large
View File


+ 7
- 2
lib/App.js View File

@@ -254,6 +254,7 @@ var App = function (_Component) {
254 254
             page: page,
255 255
             total: total
256 256
           });
257
+          _this3.props.onCountChange(total);
257 258
         } else {
258 259
           _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreComment"));
259 260
           _this3.setState({
@@ -364,6 +365,7 @@ var App = function (_Component) {
364 365
           isTemporary: true // 临时的数据
365 366
         }));
366 367
         _this5.setState({ list: list, total: total + 1 });
368
+        _this5.props.onCountChange(total + 1);
367 369
       }).catch(this.errorHandler).finally(function () {
368 370
         _this5.handleChangeLoading("sCreateComment", false);
369 371
       });
@@ -394,6 +396,7 @@ var App = function (_Component) {
394 396
         });
395 397
         _this6.setState({ list: res, total: total - 1 });
396 398
         _this6.props.onDelete(_constant.COMMENT_TYPE.COMMENT);
399
+        _this6.props.onCountChange(total - 1);
397 400
       }).catch(this.errorHandler).finally(function () {
398 401
         _this6.handleChangeLoading("sDeleteComment", false);
399 402
       });
@@ -630,7 +633,8 @@ App.propTypes = {
630 633
   onPageChange: _propTypes2.default.func, // 页码变化回调
631 634
   onGetMoreBtnClick: _propTypes2.default.func, // 点击查看更多按钮回调
632 635
   onDelete: _propTypes2.default.func,
633
-  locales: _propTypes2.default.string //  传入的语言环境, en-US/zh-CN
636
+  locales: _propTypes2.default.string, //  传入的语言环境, en-US/zh-CN
637
+  onCountChange: _propTypes2.default.func // 评论数量变更时的回调
634 638
 };
635 639
 
636 640
 App.defaultProps = {
@@ -646,7 +650,8 @@ App.defaultProps = {
646 650
   limit: _constant.LIMIT,
647 651
   onGetMoreBtnClick: function onGetMoreBtnClick() {},
648 652
   onPageChange: function onPageChange(page) {},
649
-  onDelete: function onDelete() {}
653
+  onDelete: function onDelete() {},
654
+  onCountChange: function onCountChange() {}
650 655
 };
651 656
 
652 657
 exports.Editor = _Editor2.default;

+ 1
- 1
lib/App.js.map
File diff suppressed because it is too large
View File


+ 5
- 1
lib/index.js View File

@@ -62,7 +62,11 @@ renderComment({
62 62
   id: "root-comment",
63 63
   type: 1,
64 64
   businessId: "test",
65
-  businessUserId: 4
65
+  businessUserId: 4,
66
+  userId: 71299,
67
+  onCountChange: function onCountChange(c) {
68
+    console.log(c);
69
+  }
66 70
 });
67 71
 
68 72
 // renderComment({

+ 1
- 1
lib/index.js.map View File

@@ -1 +1 @@
1
-{"version":3,"sources":["../src/index.js"],"names":["Index","props","editorProps","renderComment","config","id","Error","type","businessId","console","warn","API","ReactDOM","render","document","getElementById","window","businessUserId"],"mappings":";;;;AAAA;;;;AACA;;;;AACA;;;;;;AACA;;AAEA,IAAMA,QAAQ,SAARA,KAAQ;AAAA,SACZ;AAAC,iBAAD;AAAA,eAAK,sBAAL,EAAsB,oBAAtB,EAAqC,oBAArC,EAAoD,eAApD,IAAkEC,KAAlE;AACE,kCAAC,WAAD,aAAQ,WAAW,CAAnB,EAAsB,eAAtB,IAAoCA,MAAMC,WAA1C;AADF,GADY;AAAA,CAAd;;AAMA;;;;;;;;AAQA,SAASC,aAAT,CAAuBC,MAAvB,EAA+B;AAC7B,MAAI,CAACA,OAAOC,EAAZ,EAAgB;AACd,UAAM,IAAIC,KAAJ,CAAU,gBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOG,IAAZ,EAAkB;AAChB,UAAM,IAAID,KAAJ,CAAU,kBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOI,UAAZ,EAAwB;AACtB;AACAJ,WAAOI,UAAP,GAAoB,MAApB;AACAC,YAAQC,IAAR,CAAa,+BAAb;AACD;AACD,MAAI,CAACN,OAAOO,GAAZ,EAAiB;AACf;AACAP,WAAOO,GAAP,GAAa,oCAAb;AACAF,YAAQC,IAAR,CACE,sDADF;AAGD;;AAEDE,qBAASC,MAAT,CAAgB,8BAAC,KAAD,EAAWT,MAAX,CAAhB,EAAuCU,SAASC,cAAT,CAAwBX,OAAOC,EAA/B,CAAvC;AACA;AACD;;AAEDW,OAAOb,aAAP,GAAuBA,aAAvB;;AAEAA,cAAc;AACZE,MAAI,cADQ;AAEZE,QAAM,CAFM;AAGZC,cAAY,MAHA;AAIZS,kBAAgB;AAJJ,CAAd;;AAOA;AACA;AACA;AACA;AACA;AACA","file":"index.js","sourcesContent":["import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport App, { Editor } from \"./App\";\r\n// import registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nconst Index = props => (\r\n  <App showAlertComment showAlertReply showAlertFavor showError {...props}>\r\n    <Editor maxUpload={9} autoFocus {...props.editorProps} />\r\n  </App>\r\n);\r\n\r\n/**\r\n * 渲染评论组件\r\n * @param {object} config 编辑器配置\r\n *  - {string} id 渲染评论的DOM的 ID\r\n *  - {number} type 评论的 type\r\n *  - {string} businessId 评论的 businessId\r\n *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1\r\n */\r\nfunction renderComment(config) {\r\n  if (!config.id) {\r\n    throw new Error(\"id is required\");\r\n  }\r\n  if (!config.type) {\r\n    throw new Error(\"type is required\");\r\n  }\r\n  if (!config.businessId) {\r\n    // throw new Error(\"businessId is required\");\r\n    config.businessId = \"test\";\r\n    console.warn(\"没有传入 businessId 参数,默认使用: test\");\r\n  }\r\n  if (!config.API) {\r\n    // throw new Error(\"API is required\");\r\n    config.API = \"http://api.links123.net/comment/v1\";\r\n    console.warn(\r\n      \"没有传入 API 参数,默认使用: http://api.links123.net/comment/v1\"\r\n    );\r\n  }\r\n\r\n  ReactDOM.render(<Index {...config} />, document.getElementById(config.id));\r\n  // registerServiceWorker();\r\n}\r\n\r\nwindow.renderComment = renderComment;\r\n\r\nrenderComment({\r\n  id: \"root-comment\",\r\n  type: 1,\r\n  businessId: \"test\",\r\n  businessUserId: 4,\r\n});\r\n\r\n// renderComment({\r\n//   id: \"root-comment\",\r\n//   type: 1,\r\n//   businessId: \"test\",\r\n//   API: 'http://api.links123.net/comment/v1',\r\n// });\r\n"]}
1
+{"version":3,"sources":["../src/index.js"],"names":["Index","props","editorProps","renderComment","config","id","Error","type","businessId","console","warn","API","ReactDOM","render","document","getElementById","window","businessUserId","userId","onCountChange","c","log"],"mappings":";;;;AAAA;;;;AACA;;;;AACA;;;;;;AACA;;AAEA,IAAMA,QAAQ,SAARA,KAAQ;AAAA,SACZ;AAAC,iBAAD;AAAA,eAAK,sBAAL,EAAsB,oBAAtB,EAAqC,oBAArC,EAAoD,eAApD,IAAkEC,KAAlE;AACE,kCAAC,WAAD,aAAQ,WAAW,CAAnB,EAAsB,eAAtB,IAAoCA,MAAMC,WAA1C;AADF,GADY;AAAA,CAAd;;AAMA;;;;;;;;AAQA,SAASC,aAAT,CAAuBC,MAAvB,EAA+B;AAC7B,MAAI,CAACA,OAAOC,EAAZ,EAAgB;AACd,UAAM,IAAIC,KAAJ,CAAU,gBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOG,IAAZ,EAAkB;AAChB,UAAM,IAAID,KAAJ,CAAU,kBAAV,CAAN;AACD;AACD,MAAI,CAACF,OAAOI,UAAZ,EAAwB;AACtB;AACAJ,WAAOI,UAAP,GAAoB,MAApB;AACAC,YAAQC,IAAR,CAAa,+BAAb;AACD;AACD,MAAI,CAACN,OAAOO,GAAZ,EAAiB;AACf;AACAP,WAAOO,GAAP,GAAa,oCAAb;AACAF,YAAQC,IAAR,CACE,sDADF;AAGD;;AAEDE,qBAASC,MAAT,CAAgB,8BAAC,KAAD,EAAWT,MAAX,CAAhB,EAAuCU,SAASC,cAAT,CAAwBX,OAAOC,EAA/B,CAAvC;AACA;AACD;;AAEDW,OAAOb,aAAP,GAAuBA,aAAvB;;AAEAA,cAAc;AACZE,MAAI,cADQ;AAEZE,QAAM,CAFM;AAGZC,cAAY,MAHA;AAIZS,kBAAgB,CAJJ;AAKZC,UAAQ,KALI;AAMZC,iBAAe,uBAACC,CAAD,EAAO;AAAEX,YAAQY,GAAR,CAAYD,CAAZ;AAAgB;AAN5B,CAAd;;AASA;AACA;AACA;AACA;AACA;AACA","file":"index.js","sourcesContent":["import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport App, { Editor } from \"./App\";\r\n// import registerServiceWorker from \"./registerServiceWorker\";\r\n\r\nconst Index = props => (\r\n  <App showAlertComment showAlertReply showAlertFavor showError {...props}>\r\n    <Editor maxUpload={9} autoFocus {...props.editorProps} />\r\n  </App>\r\n);\r\n\r\n/**\r\n * 渲染评论组件\r\n * @param {object} config 编辑器配置\r\n *  - {string} id 渲染评论的DOM的 ID\r\n *  - {number} type 评论的 type\r\n *  - {string} businessId 评论的 businessId\r\n *  - {string} API, API 前缀, 默认 http://api.links123.net/comment/v1\r\n */\r\nfunction renderComment(config) {\r\n  if (!config.id) {\r\n    throw new Error(\"id is required\");\r\n  }\r\n  if (!config.type) {\r\n    throw new Error(\"type is required\");\r\n  }\r\n  if (!config.businessId) {\r\n    // throw new Error(\"businessId is required\");\r\n    config.businessId = \"test\";\r\n    console.warn(\"没有传入 businessId 参数,默认使用: test\");\r\n  }\r\n  if (!config.API) {\r\n    // throw new Error(\"API is required\");\r\n    config.API = \"http://api.links123.net/comment/v1\";\r\n    console.warn(\r\n      \"没有传入 API 参数,默认使用: http://api.links123.net/comment/v1\"\r\n    );\r\n  }\r\n\r\n  ReactDOM.render(<Index {...config} />, document.getElementById(config.id));\r\n  // registerServiceWorker();\r\n}\r\n\r\nwindow.renderComment = renderComment;\r\n\r\nrenderComment({\r\n  id: \"root-comment\",\r\n  type: 1,\r\n  businessId: \"test\",\r\n  businessUserId: 4,\r\n  userId: 71299,\r\n  onCountChange: (c) => { console.log(c) }\r\n});\r\n\r\n// renderComment({\r\n//   id: \"root-comment\",\r\n//   type: 1,\r\n//   businessId: \"test\",\r\n//   API: 'http://api.links123.net/comment/v1',\r\n// });\r\n"]}

+ 1
- 1
package.json View File

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

+ 7
- 2
src/App.js View File

@@ -158,6 +158,7 @@ class App extends Component {
158 158
             page,
159 159
             total
160 160
           });
161
+          this.props.onCountChange(total);
161 162
         } else {
162 163
           message.info(intl.get("message.noMoreComment"));
163 164
           this.setState({
@@ -245,6 +246,7 @@ class App extends Component {
245 246
           isTemporary: true // 临时的数据
246 247
         });
247 248
         this.setState({ list, total: total + 1 });
249
+        this.props.onCountChange(total + 1);
248 250
       })
249 251
       .catch(this.errorHandler)
250 252
       .finally(() => {
@@ -267,6 +269,7 @@ class App extends Component {
267 269
         const res = list.filter(item => item.id !== commentId);
268 270
         this.setState({ list: res, total: total - 1 });
269 271
         this.props.onDelete(COMMENT_TYPE.COMMENT);
272
+        this.props.onCountChange(total - 1);
270 273
       })
271 274
       .catch(this.errorHandler)
272 275
       .finally(() => {
@@ -498,7 +501,8 @@ App.propTypes = {
498 501
   onPageChange: PropTypes.func, // 页码变化回调
499 502
   onGetMoreBtnClick: PropTypes.func, // 点击查看更多按钮回调
500 503
   onDelete: PropTypes.func,
501
-  locales: PropTypes.string //  传入的语言环境, en-US/zh-CN
504
+  locales: PropTypes.string, //  传入的语言环境, en-US/zh-CN
505
+  onCountChange: PropTypes.func // 评论数量变更时的回调
502 506
 };
503 507
 
504 508
 App.defaultProps = {
@@ -514,7 +518,8 @@ App.defaultProps = {
514 518
   limit: LIMIT,
515 519
   onGetMoreBtnClick: () => {},
516 520
   onPageChange: page => {},
517
-  onDelete: () => {}
521
+  onDelete: () => {},
522
+  onCountChange: () => {}
518 523
 };
519 524
 
520 525
 export { Editor, RenderText };

+ 5
- 1
src/index.js View File

@@ -47,7 +47,11 @@ renderComment({
47 47
   id: "root-comment",
48 48
   type: 1,
49 49
   businessId: "test",
50
-  businessUserId: 4
50
+  businessUserId: 4,
51
+  userId: 71299,
52
+  onCountChange: c => {
53
+    console.log(c);
54
+  }
51 55
 });
52 56
 
53 57
 // renderComment({