分页器受控模式

CHANGELOG.md

 # CHANGELOG
 
+## 0.5.12
+- [x] 支持两种模式的分页器
+- [x] 分页器支持受控模式
+
 ## 0.5.11
 - [x] 增加链接解析功能
 

README.md

 
 通用评论系统及编辑器
 
-**`version 0.5.11`**
+**`version 0.5.12`**
 
 ```js
 import Comment, { Editor, RenderText } from 'comment';
 ## Comment
 
 
-| 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-页码                                          |
+| 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.             |
+| onPageChange     | function(page) |                                    | false    | 页码发生变化时的回调,注意:分页数据获取还是在组件内部处理的                        |
 
 
 ## Editor

lib/App.css

   margin-bottom: 100px;
 }
 
-.comment .ant-spin-nested-loading>div>.ant-spin .ant-spin-dot {
+.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
   position: fixed;
   top: 45%;
 }
 
 .comment-img {
   max-width: 100%;
-}
+}

lib/App.js

           var newList = list;
           var oldList = _this2.state.list;
 
-          if (pageType === 'more') {
+          if (pageType === "more") {
             if (page > 1) {
               // 删除临时数据
               oldList = oldList.filter(function (o) {
               });
               newList = oldList.concat(newList);
             }
-          } else if (pageType === 'pagination') {
+          } else if (pageType === "pagination") {
             // TODO 滚动到顶部
             window.scrollTo(0, 0);
           }
   showError: _propTypes2.default.bool, // 是否使用Antd的Message组件提示错误信息
   onError: _propTypes2.default.func, // 错误回调, 出错了会被调用
   userId: _propTypes2.default.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
-  pageType: _propTypes2.default.string // 分页类型
+  pageType: _propTypes2.default.string, // 分页类型
+  page: _propTypes2.default.number, // 页码
+  onPageChange: _propTypes2.default.func // 页码变化回调
 };
 
 App.defaultProps = {
   showAlertReply: false,
   showAlertFavor: false,
   showError: true,
-  pageType: "more"
+  pageType: "more",
+  onPageChange: function onPageChange(page) {}
 };
 
 exports.Editor = _Editor2.default;

lib/components/CommentList/index.css

 
 .comment-list-pagination {
   text-align: center;
-}
+}

lib/components/CommentList/index.js

   _createClass(CommentList, [{
     key: "componentWillMount",
     value: function componentWillMount() {
-      this.props.app.sGetComment();
+      this.props.app.sGetComment({ page: this.props.app.page });
     }
   }, {
     key: "renderPagination",
           page = _props$app.page,
           pageType = _props$app.pageType,
           isNoMoreComment = _props$app.isNoMoreComment,
-          sGetComment = _props$app.sGetComment;
+          sGetComment = _props$app.sGetComment,
+          onPageChange = _props$app.onPageChange;
 
-      if (pageType === 'more') {
+      if (pageType === "more") {
         if (!isNoMoreComment && list.length !== total) {
           return _react2.default.createElement(
             "div",
             {
               className: "comment-list-show-more",
               onClick: function onClick() {
-                return sGetComment({ page: page + 1 });
+                sGetComment({ page: page + 1 });
+                onPageChange(page + 1);
               }
             },
             _react2.default.createElement(
         } else {
           return null;
         }
-      } else if (pageType === 'pagination') {
+      } else if (pageType === "pagination") {
         return _react2.default.createElement(
           "div",
           { className: "comment-list-pagination" },
             total: total,
             onChange: function onChange(p) {
               sGetComment({ page: p });
+              onPageChange(p);
             }
           })
         );

lib/components/CommentList/index.js.map

-{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","list","total","page","pageType","isNoMoreComment","length","LIMIT","p","loading","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","id","renderPagination","Component","propTypes"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf;AACD;;;uCAEkB;AAAA,uBAQb,KAAKH,KAAL,CAAWE,GARE;AAAA,UAEfE,IAFe,cAEfA,IAFe;AAAA,UAGfC,KAHe,cAGfA,KAHe;AAAA,UAIfC,IAJe,cAIfA,IAJe;AAAA,UAKfC,QALe,cAKfA,QALe;AAAA,UAMfC,eANe,cAMfA,eANe;AAAA,UAOfL,WAPe,cAOfA,WAPe;;AASjB,UAAII,aAAa,MAAjB,EAAyB;AACvB,YAAI,CAACC,eAAD,IAAoBJ,KAAKK,MAAL,KAAgBJ,KAAxC,EAA+C;AAC7C,iBACE;AAAA;AAAA;AACE,yBAAU,wBADZ;AAEE,uBAAS;AAAA,uBAAMF,YAAY,EAAEG,MAAMA,OAAO,CAAf,EAAZ,CAAN;AAAA;AAFX;AAIE;AAAA;AAAA;AAAA;AAAA;AAJF,WADF;AAQD,SATD,MASO;AACL,iBAAO,IAAP;AACD;AACF,OAbD,MAaO,IAAIC,aAAa,YAAjB,EAA+B;AACpC,eACE;AAAA;AAAA,YAAK,WAAU,yBAAf;AACE;AACE,sBAAUG,eADZ;AAEE,qBAASJ,IAFX;AAGE,mBAAOD,KAHT;AAIE,sBAAU,kBAACM,CAAD,EAAO;AACfR,0BAAY,EAAEG,MAAMK,CAAR,EAAZ;AACD;AANH;AADF,SADF;AAYD;AACF;;;6BAEQ;AAAA,wBAKH,KAAKX,KAAL,CAAWE,GALR;AAAA,UAELE,IAFK,eAELA,IAFK;AAAA,UAGLC,KAHK,eAGLA,KAHK;AAAA,UAILO,OAJK,eAILA,OAJK;;;AAOP,UAAMC,WAAWC,QACfF,QAAQT,WAAR,IAAuBS,QAAQG,aAA/B,IAAgDH,QAAQI,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AACE;AAAA;AAAA;AAAA;AAAQR,iBAAR;AAAA;AAAA,WADF;AAEGD,eAAKa,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CAFH;AAMI,eAAKC,gBAAL;AANJ;AADF,OADF;AAaD;;;;EAvEuBC,gB;;AA0E1BtB,YAAYuB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQvB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport { Spin, Pagination } from \"antd\";\r\nimport Comment from \"../../Comment\";\r\nimport CommentBox from \"../CommentBox\";\r\nimport \"./index.css\";\r\nimport { LIMIT } from \"../../constant\";\r\n\r\nclass CommentList extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {};\r\n  }\r\n\r\n  componentWillMount() {\r\n    this.props.app.sGetComment();\r\n  }\r\n\r\n  renderPagination() {\r\n    const {\r\n      list,\r\n      total,\r\n      page,\r\n      pageType,\r\n      isNoMoreComment,\r\n      sGetComment\r\n    } = this.props.app;\r\n    if (pageType === 'more') {\r\n      if (!isNoMoreComment && list.length !== total) {\r\n        return (\r\n          <div\r\n            className=\"comment-list-show-more\"\r\n            onClick={() => sGetComment({ page: page + 1 })}\r\n          >\r\n            <span>查看更多评论</span>\r\n          </div>\r\n        );\r\n      } else {\r\n        return null;\r\n      }\r\n    } else if (pageType === 'pagination') {\r\n      return (\r\n        <div className=\"comment-list-pagination\">\r\n          <Pagination\r\n            pageSize={LIMIT}\r\n            current={page}\r\n            total={total}\r\n            onChange={(p) => {\r\n              sGetComment({ page: p })\r\n            }}\r\n          />\r\n        </div>\r\n      )\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const {\r\n      list,\r\n      total,\r\n      loading,\r\n    } = this.props.app;\r\n\r\n    const spinning = Boolean(\r\n      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor\r\n    );\r\n    return (\r\n      <div>\r\n        <Spin spinning={spinning}>\r\n          <div>共 {total} 条评论</div>\r\n          {list.map(item => (\r\n            <CommentBox content={item} key={item.id} commentId={item.id} />\r\n          ))}\r\n          {\r\n            this.renderPagination()\r\n          }\r\n        </Spin>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nCommentList.propTypes = {};\r\n\r\nexport default Comment(CommentList);\r\n"]}
+{"version":3,"sources":["../../../src/components/CommentList/index.js"],"names":["CommentList","props","state","app","sGetComment","page","list","total","pageType","isNoMoreComment","onPageChange","length","LIMIT","p","loading","spinning","Boolean","sCommentFavor","sReplyFavor","map","item","id","renderPagination","Component","propTypes"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;AAEA;;;;AACA;;;;AACA;;AACA;;;;;;;;;;IAEMA,W;;;AACJ,uBAAYC,KAAZ,EAAmB;AAAA;;AAAA,0HACXA,KADW;;AAEjB,UAAKC,KAAL,GAAa,EAAb;AAFiB;AAGlB;;;;yCAEoB;AACnB,WAAKD,KAAL,CAAWE,GAAX,CAAeC,WAAf,CAA2B,EAAEC,MAAM,KAAKJ,KAAL,CAAWE,GAAX,CAAeE,IAAvB,EAA3B;AACD;;;uCAEkB;AAAA,uBASb,KAAKJ,KAAL,CAAWE,GATE;AAAA,UAEfG,IAFe,cAEfA,IAFe;AAAA,UAGfC,KAHe,cAGfA,KAHe;AAAA,UAIfF,IAJe,cAIfA,IAJe;AAAA,UAKfG,QALe,cAKfA,QALe;AAAA,UAMfC,eANe,cAMfA,eANe;AAAA,UAOfL,WAPe,cAOfA,WAPe;AAAA,UAQfM,YARe,cAQfA,YARe;;AAUjB,UAAIF,aAAa,MAAjB,EAAyB;AACvB,YAAI,CAACC,eAAD,IAAoBH,KAAKK,MAAL,KAAgBJ,KAAxC,EAA+C;AAC7C,iBACE;AAAA;AAAA;AACE,yBAAU,wBADZ;AAEE,uBAAS,mBAAM;AACbH,4BAAY,EAAEC,MAAMA,OAAO,CAAf,EAAZ;AACAK,6BAAaL,OAAO,CAApB;AACD;AALH;AAQE;AAAA;AAAA;AAAA;AAAA;AARF,WADF;AAYD,SAbD,MAaO;AACL,iBAAO,IAAP;AACD;AACF,OAjBD,MAiBO,IAAIG,aAAa,YAAjB,EAA+B;AACpC,eACE;AAAA;AAAA,YAAK,WAAU,yBAAf;AACE;AACE,sBAAUI,eADZ;AAEE,qBAASP,IAFX;AAGE,mBAAOE,KAHT;AAIE,sBAAU,qBAAK;AACbH,0BAAY,EAAEC,MAAMQ,CAAR,EAAZ;AACAH,2BAAaG,CAAb;AACD;AAPH;AADF,SADF;AAaD;AACF;;;6BAEQ;AAAA,wBAC0B,KAAKZ,KAAL,CAAWE,GADrC;AAAA,UACCG,IADD,eACCA,IADD;AAAA,UACOC,KADP,eACOA,KADP;AAAA,UACcO,OADd,eACcA,OADd;;;AAGP,UAAMC,WAAWC,QACfF,QAAQV,WAAR,IAAuBU,QAAQG,aAA/B,IAAgDH,QAAQI,WADzC,CAAjB;AAGA,aACE;AAAA;AAAA;AACE;AAAA;AAAA,YAAM,UAAUH,QAAhB;AACE;AAAA;AAAA;AAAA;AAAQR,iBAAR;AAAA;AAAA,WADF;AAEGD,eAAKa,GAAL,CAAS;AAAA,mBACR,8BAAC,oBAAD,IAAY,SAASC,IAArB,EAA2B,KAAKA,KAAKC,EAArC,EAAyC,WAAWD,KAAKC,EAAzD,GADQ;AAAA,WAAT,CAFH;AAKG,eAAKC,gBAAL;AALH;AADF,OADF;AAWD;;;;EAvEuBC,gB;;AA0E1BvB,YAAYwB,SAAZ,GAAwB,EAAxB;;kBAEe,uBAAQxB,WAAR,C","file":"index.js","sourcesContent":["import React, { Component } from \"react\";\r\nimport { Spin, Pagination } from \"antd\";\r\nimport Comment from \"../../Comment\";\r\nimport CommentBox from \"../CommentBox\";\r\nimport \"./index.css\";\r\nimport { LIMIT } from \"../../constant\";\r\n\r\nclass CommentList extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {};\r\n  }\r\n\r\n  componentWillMount() {\r\n    this.props.app.sGetComment({ page: this.props.app.page });\r\n  }\r\n\r\n  renderPagination() {\r\n    const {\r\n      list,\r\n      total,\r\n      page,\r\n      pageType,\r\n      isNoMoreComment,\r\n      sGetComment,\r\n      onPageChange,\r\n    } = this.props.app;\r\n    if (pageType === \"more\") {\r\n      if (!isNoMoreComment && list.length !== total) {\r\n        return (\r\n          <div\r\n            className=\"comment-list-show-more\"\r\n            onClick={() => {\r\n              sGetComment({ page: page + 1 })\r\n              onPageChange(page + 1);\r\n            }\r\n            }\r\n          >\r\n            <span>查看更多评论</span>\r\n          </div>\r\n        );\r\n      } else {\r\n        return null;\r\n      }\r\n    } else if (pageType === \"pagination\") {\r\n      return (\r\n        <div className=\"comment-list-pagination\">\r\n          <Pagination\r\n            pageSize={LIMIT}\r\n            current={page}\r\n            total={total}\r\n            onChange={p => {\r\n              sGetComment({ page: p });\r\n              onPageChange(p);\r\n            }}\r\n          />\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const { list, total, loading } = this.props.app;\r\n\r\n    const spinning = Boolean(\r\n      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor\r\n    );\r\n    return (\r\n      <div>\r\n        <Spin spinning={spinning}>\r\n          <div>共 {total} 条评论</div>\r\n          {list.map(item => (\r\n            <CommentBox content={item} key={item.id} commentId={item.id} />\r\n          ))}\r\n          {this.renderPagination()}\r\n        </Spin>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nCommentList.propTypes = {};\r\n\r\nexport default Comment(CommentList);\r\n"]}

lib/components/ContentItem/index.css

     width: 75%;
     margin-left: 10px;
   }
-}
+}

lib/components/ContentItem/index.js

                   rel: "noopener noreferrer",
                   key: index
                 },
-                _react2.default.createElement("img", {
-                  src: item,
-                  alt: item,
-                  className: "comment-img"
-                })
+                _react2.default.createElement("img", { src: item, alt: item, className: "comment-img" })
               );
             })
           ),

lib/index.js

     var _this = _possibleConstructorReturn(this, (Index.__proto__ || Object.getPrototypeOf(Index)).call(this, props));
 
     _this.state = {
+      page: 1,
       value: ""
     };
+    _this.onPageChange = _this.onPageChange.bind(_this);
     _this.handleChangeValue = _this.handleChangeValue.bind(_this);
     _this.handleChangeSubmit = _this.handleChangeSubmit.bind(_this);
     return _this;
   }
 
   _createClass(Index, [{
+    key: "onPageChange",
+    value: function onPageChange(page) {
+      this.setState({
+        page: page
+      });
+    }
+  }, {
     key: "handleChangeValue",
     value: function handleChangeValue(value) {
       this.setState({ value: value });
           showAlertFavor: true,
           showError: false,
           userId: 71299,
-          pageType: "pagination",
+          page: this.state.page,
+          onPageChange: this.onPageChange,
+          pageType: "more",
           onError: function onError(msg, _ref2) {
             var response = _ref2.response;
 

package.json

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

src/App.js

   showError: PropTypes.bool, // 是否使用Antd的Message组件提示错误信息
   onError: PropTypes.func, // 错误回调, 出错了会被调用
   userId: PropTypes.number, // 用户id, comment内部不维护用户id, 调用组件时传递过来, 目前用于判断是否显示删除按钮
-  pageType: PropTypes.string // 分页类型
+  pageType: PropTypes.string, // 分页类型
+  page: PropTypes.number, // 页码
+  onPageChange: PropTypes.func // 页码变化回调
 };
 
 App.defaultProps = {
   showAlertReply: false,
   showAlertFavor: false,
   showError: true,
-  pageType: "more"
+  pageType: "more",
+  onPageChange: page => {}
 };
 
 export { Editor, RenderText };

src/components/CommentList/index.js

   }
 
   componentWillMount() {
-    this.props.app.sGetComment();
+    this.props.app.sGetComment({ page: this.props.app.page });
   }
 
   renderPagination() {
       page,
       pageType,
       isNoMoreComment,
-      sGetComment
+      sGetComment,
+      onPageChange
     } = this.props.app;
     if (pageType === "more") {
       if (!isNoMoreComment && list.length !== total) {
         return (
           <div
             className="comment-list-show-more"
-            onClick={() => sGetComment({ page: page + 1 })}
+            onClick={() => {
+              sGetComment({ page: page + 1 });
+              onPageChange(page + 1);
+            }}
           >
             <span>查看更多评论</span>
           </div>
             total={total}
             onChange={p => {
               sGetComment({ page: p });
+              onPageChange(p);
             }}
           />
         </div>

src/index.js

   constructor(props) {
     super(props);
     this.state = {
+      page: 1,
       value: ""
     };
+    this.onPageChange = this.onPageChange.bind(this);
     this.handleChangeValue = this.handleChangeValue.bind(this);
     this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
   }
 
+  onPageChange(page) {
+    this.setState({
+      page
+    });
+  }
+
   handleChangeValue(value) {
     this.setState({ value });
     console.log("handleChangeValue value: ", value);
         showAlertFavor
         showError={false}
         userId={71299}
-        pageType="pagination"
+        page={this.state.page}
+        onPageChange={this.onPageChange}
+        pageType="more"
         onError={(msg, { response }) => {
           if (response.status === 401) {
             console.log("unlogined");