react-paginate - npm Package Compare versions

Comparing version 0.1.10 to 0.1.11

__tests__/PaginationBoxView-test.js

@@ -28,3 +28,3 @@ /** @jsx React.DOM */
             var pages = pagination.getDOMNode().querySelectorAll("li");
-            expect(pages.length).toEqual(7);
+            expect(pages.length).toEqual(8);
         });
@@ -31,0 +31,0 @@

package.json

 {
   "name": "react-paginate",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "A ReactJS component that create a pagination.",
@@ -5,0 +5,0 @@ "main": "./react_components/index.js",

react_components/PaginationBoxView.js

@@ -29,3 +29,3 @@ /** @jsx React.DOM */
   getInitialState: function() {
-    return {selected: 0};
+    return {selected: 1};
   },
@@ -41,3 +41,3 @@ handlePageSelected: function(index) {
   handlePreviousPage: function() {
-    if (this.state.selected > 0) {
+    if (this.state.selected > 1) {
       this.handlePageSelected(this.state.selected - 1);
@@ -48,3 +48,3 @@ }
   handleNextPage: function() {
-    if (this.state.selected < this.props.pageNum - 1) {
+    if (this.state.selected < this.props.pageNum) {
       this.handlePageSelected(this.state.selected + 1);
@@ -51,0 +51,0 @@ }

react_components/PaginationListView.js

@@ -35,5 +35,6 @@ /** @jsx React.DOM */
 
-      var items = [];
+      var items = [],
+          index = 1;
 
-      for (var index=0; index < this.props.pageNum; index++) {
+      for (index = 1; index < this.props.pageNum + 1; index++) {
         var pageView = (
@@ -44,7 +45,7 @@ <PageView
             key={index}>
-            {index + 1}
+            {index}
             </PageView>
         );
 
-        if (index <= this.props.pageRangeDisplayed) {
+        if (index <= this.props.marginPagesDisplayed) {
           items.push(pageView);
@@ -51,0 +52,0 @@ continue;

README.md

@@ -7,15 +7,98 @@ react-paginate
 
+
 Getting started:
 ---------------------
 
-#### Install:
+##### Install:
 
 `npm install react-paginate`
 
-#### To load the component:
+##### To load the component:
 
 `var ReactPaginate = require("react-paginate");`
 
-#### To run tests:
+##### To run tests:
 
 `npm test`
+
+
+
+Using it into your own project:
+---------------------
+
+```javascript
+var React         = require("react");
+var ReactPaginate = require("react-paginate");
+
+
+var MyComponent = React.createClass({
+  loadObjectsFromServer: function() {
+    $.ajax({
+      url: {this.props.url},
+      dataType: 'json',
+      data: {limit: this.props.perPage, offset: this.state.offset},
+      success: function(data) {
+        this.setState({data: data, pageNum: (data.total_count / data.limit)});
+      }.bind(this),
+      error: function(xhr, status, err) {
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  handlePageClick: function(data) {
+    var selected = data.selected;
+    this.setState({offset: Math.ceil((selected) * this.props.perPage)});
+    this.loadObjectsFromServer();
+  },
+  getInitialState: function() {
+    return {data: [], offset: 0};
+  },
+  componentDidMount: function() {
+    this.loadObjectsFromServer();
+  },
+  render: function() {
+    return (
+      <div className="my-component">
+        <MyComponentList data={this.state.data} />
+
+        <nav id="project-pagination">
+            <ReactPaginate clickCallback={this.handlePageClick}
+                           previousLabel={<span class="prev">Previous</span>}
+                           nextLabel={<span class="prev">Next</span>}
+                           breakLabel={<span class="ellipsis">...</span>}
+                           pageNum={this.state.pageNum}
+                           marginPagesDisplayed={2}
+                           pageRangeDisplayed={2} />
+        </nav>
+      </div>
+    );
+  }
+});
+
+var MyComponentList = React.createClass({
+  render: function() {
+    var items = this.props.data.map(function(item, index) {
+      return (
+        <li>{item.property}</li>
+      );
+    });
+    return (
+      <div className="my-list">
+        <ul>
+          {items}
+        </ul>
+      </div>
+    );
+  }
+});
+
+React.renderComponent(
+    <MyCustomComponent
+        url={'http://my-api-url/objects'}
+        perPage={10} />,
+    container
+);
+
+module.exports = MyComponentList;
+module.exports = MyComponent;
+```

sample/sample.jsx

@@ -14,3 +14,8 @@ /** @jsx React.DOM */
       <nav>
-        <ReactPaginate />
+        <ReactPaginate previousLabel={"previous"}
+                       nextLabel={"next"}
+                       breakLabel={"..."}
+                       pageNum={20}
+                       marginPagesDisplayed={2}
+                       pageRangeDisplayed={5} />
       </nav>
@@ -17,0 +22,0 @@ );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3470202

increased by7.47%

Lines of code

44929

increased by7.47%

Number of lines in readme file

104

increased by395.24%

No dependency changes