app增加onCountChange回调

CHANGELOG.md

 # CHANGELOG
 
+## 1.0.2
+- [x] App增加onCountChange回调
+
 ## 1.0.1
 - [x] App增加business_user_id属性
 

README.md

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

assets/example.html

   </div>
   
   <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
-  <script type="text/javascript" src="./static/js/main.d5cd277c.js"></script>
+  <script type="text/javascript" src="./static/js/main.8d850e35.js"></script>
   <script type="text/javascript" src="example.js"></script>
 </body>
 </html>

lib/App.js

             page: page,
             total: total
           });
+          _this3.props.onCountChange(total);
         } else {
           _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreComment"));
           _this3.setState({
           isTemporary: true // 临时的数据
         }));
         _this5.setState({ list: list, total: total + 1 });
+        _this5.props.onCountChange(total + 1);
       }).catch(this.errorHandler).finally(function () {
         _this5.handleChangeLoading("sCreateComment", false);
       });
         });
         _this6.setState({ list: res, total: total - 1 });
         _this6.props.onDelete(_constant.COMMENT_TYPE.COMMENT);
+        _this6.props.onCountChange(total - 1);
       }).catch(this.errorHandler).finally(function () {
         _this6.handleChangeLoading("sDeleteComment", false);
       });
   onPageChange: _propTypes2.default.func, // 页码变化回调
   onGetMoreBtnClick: _propTypes2.default.func, // 点击查看更多按钮回调
   onDelete: _propTypes2.default.func,
-  locales: _propTypes2.default.string //  传入的语言环境， en-US/zh-CN
+  locales: _propTypes2.default.string, //  传入的语言环境， en-US/zh-CN
+  onCountChange: _propTypes2.default.func // 评论数量变更时的回调
 };
 
 App.defaultProps = {
   limit: _constant.LIMIT,
   onGetMoreBtnClick: function onGetMoreBtnClick() {},
   onPageChange: function onPageChange(page) {},
-  onDelete: function onDelete() {}
+  onDelete: function onDelete() {},
+  onCountChange: function onCountChange() {}
 };
 
 exports.Editor = _Editor2.default;

lib/index.js

   id: "root-comment",
   type: 1,
   businessId: "test",
-  businessUserId: 4
+  businessUserId: 4,
+  userId: 71299,
+  onCountChange: function onCountChange(c) {
+    console.log(c);
+  }
 });
 
 // renderComment({

lib/index.js.map

-{"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"]}
+{"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"]}

package.json

 {
   "name": "comment",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "lib/App.js",
   "description": "通用评论",
   "keywords": [

src/App.js

             page,
             total
           });
+          this.props.onCountChange(total);
         } else {
           message.info(intl.get("message.noMoreComment"));
           this.setState({
           isTemporary: true // 临时的数据
         });
         this.setState({ list, total: total + 1 });
+        this.props.onCountChange(total + 1);
       })
       .catch(this.errorHandler)
       .finally(() => {
         const res = list.filter(item => item.id !== commentId);
         this.setState({ list: res, total: total - 1 });
         this.props.onDelete(COMMENT_TYPE.COMMENT);
+        this.props.onCountChange(total - 1);
       })
       .catch(this.errorHandler)
       .finally(() => {
   onPageChange: PropTypes.func, // 页码变化回调
   onGetMoreBtnClick: PropTypes.func, // 点击查看更多按钮回调
   onDelete: PropTypes.func,
-  locales: PropTypes.string //  传入的语言环境， en-US/zh-CN
+  locales: PropTypes.string, //  传入的语言环境， en-US/zh-CN
+  onCountChange: PropTypes.func // 评论数量变更时的回调
 };
 
 App.defaultProps = {
   limit: LIMIT,
   onGetMoreBtnClick: () => {},
   onPageChange: page => {},
-  onDelete: () => {}
+  onDelete: () => {},
+  onCountChange: () => {}
 };
 
 export { Editor, RenderText };

src/index.js

   id: "root-comment",
   type: 1,
   businessId: "test",
-  businessUserId: 4
+  businessUserId: 4,
+  userId: 71299,
+  onCountChange: c => {
+    console.log(c);
+  }
 });
 
 // renderComment({