react-paginate - npm Package Compare versions

Comparing version 0.1.11 to 0.1.12

__tests__/PaginationBoxView-test.js

@@ -42,5 +42,5 @@ /** @jsx React.DOM */
         it('test click on a page item', function() {
-            var list = TestUtils.findRenderedComponentWithType(pagination, PaginationListView);
+            TestUtils.findRenderedComponentWithType(pagination, PaginationListView);
 
-            var pageItem = pagination.getDOMNode().querySelector("li:nth-child(3)");
+            var pageItem = pagination.getDOMNode().querySelector("li:nth-child(3)").querySelector("a");
 
@@ -47,0 +47,0 @@ TestUtils.Simulate.click(pageItem);

package.json

 {
   "name": "react-paginate",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "A ReactJS component that create a pagination.",
@@ -16,3 +16,5 @@ "main": "./react_components/index.js",
   ],
-  "author": "Adèle Delamarche",
+  "author": {
+    "name": "Adèle Delamarche"
+  },
   "license": "BSD-2-Clause",
@@ -23,14 +25,17 @@ "bugs": {
   "dependencies": {
-    "react": "~0.11.2",
     "underscore": "^1.7.0"
   },
   "devDependencies": {
+    "browserify": "~6.0.3",
     "gulp": "~3.8.8",
-    "browserify": "~6.0.3",
+    "jest-cli": "^0.2.2",
+    "react-tools": "~0.12.2",
+    "reactify": "1.0.0",
     "vinyl-source-stream": "~1.0.0",
-    "reactify": "~0.14.0",
-    "watchify": "~2.0.0",
-    "jest-cli": "~0.1.18",
-    "react-tools": "~0.11.2"
+    "watchify": "~2.1",
+    "react": "~0.12.2"
   },
+  "peerDependencies": {
+
+  },
   "browserify": {
@@ -48,4 +53,7 @@ "transform": [
       "<rootDir>/node_modules/react"
+    ],
+    "testPathDirs": [
+      "<rootDir>/__tests__"
     ]
   }
 }

react_components/PageView.js

@@ -12,7 +12,5 @@ /** @jsx React.DOM */
     }
-    return this.transferPropsTo(
-      <li className={cssClass}>
-        <a href="">{this.props.children}</a>
+    return <li className={cssClass}>
+        <a href="" {...this.props}>{this.props.children}</a>
       </li>
-    );
   }
@@ -19,0 +17,0 @@ });

react_components/PaginationBoxView.js

@@ -13,6 +13,7 @@ /** @jsx React.DOM */
     marginPagesDisplayed: React.PropTypes.number.isRequired,
-    previousLabel: React.PropTypes.renderable,
-    nextLabel: React.PropTypes.renderable,
-    breakLabel: React.PropTypes.renderable,
-    clickCallback: React.PropTypes.func
+    previousLabel: React.PropTypes.node,
+    nextLabel: React.PropTypes.node,
+    breakLabel: React.PropTypes.node,
+    clickCallback: React.PropTypes.func,
+    initialSelected: React.PropTypes.number
   },
@@ -30,23 +31,24 @@ getDefaultProps: function() {
   getInitialState: function() {
-    return {selected: 1};
+    return {selected: this.props.initialSelected ? this.props.initialSelected :1};
   },
-  handlePageSelected: function(index) {
-    this.setState({selected: index});
+  handlePageSelected: function(index, event) {
+    event.preventDefault();
+    if (this.state.selected !== index) {
+      this.setState({selected: index});
 
-    if (typeof(this.props.clickCallback) !== "undefined" && typeof(this.props.clickCallback) === "function")
+      if (typeof(this.props.clickCallback) !== "undefined" && typeof(this.props.clickCallback) === "function")
         this.props.clickCallback({selected: index});
-
-    return false;
+    }
   },
-  handlePreviousPage: function() {
+  handlePreviousPage: function(event) {
+    event.preventDefault();
     if (this.state.selected > 1) {
-      this.handlePageSelected(this.state.selected - 1);
+      this.handlePageSelected(this.state.selected - 1, event);
     }
-    return false;
   },
-  handleNextPage: function() {
+  handleNextPage: function(event) {
+    event.preventDefault();
     if (this.state.selected < this.props.pageNum) {
-      this.handlePageSelected(this.state.selected + 1);
+      this.handlePageSelected(this.state.selected + 1, event);
     }
-    return false;
   },
@@ -53,0 +55,0 @@ render: function() {

react_components/PaginationListView.js

@@ -12,8 +12,8 @@ /** @jsx React.DOM */
     if (this.props.pageNum <= this.props.pageRangeDisplayed) {
-      items = _.range(1, this.props.pageNum + 1).map(function(page, index) {
+      items = _.range(1, this.props.pageNum + 1).map(function(page) {
         return (
           <PageView
-            onClick={this.props.onPageSelected.bind(null, index)}
-            selected={this.props.selected === index}
-            key={index}>
+            onClick={this.props.onPageSelected.bind(null, page)}
+            selected={this.props.selected === page}
+            key={page}>
             {page}
@@ -36,6 +36,5 @@ </PageView>
 
-      var items = [],
-          index = 1;
+      var items = [];
 
-      for (index = 1; index < this.props.pageNum + 1; index++) {
+      for (var index = 1; index < this.props.pageNum + 1; index++) {
         var pageView = (
@@ -42,0 +41,0 @@ <PageView

README.md

@@ -7,3 +7,12 @@ react-paginate
 
+By installing this component and writing only a little bit of CSS you can obtain this :
 
+<img src="./docs/img/pagination2.png" alt="Pagination sample 2" />
+
+or
+
+<img src="./docs/img/pagination1.png" alt="Pagination sample 1" />
+
+
+
 Getting started:
@@ -35,66 +44,65 @@ ---------------------
 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} />
+    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>
-    );
-  }
+                <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={5} />
+                </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>
-    );
-  }
+    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} />,
+    <MyComponent url={'http://www.my-api-url.com/objects'}
+                       perPage={10} />,
     container
@@ -101,0 +109,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

3485948

increased by0.45%

Dependency count

1

decreased by-50%

Number of package files

17

increased by13.33%

Number of lines in readme file

112

increased by7.69%

Worsened metrics

Dev dependency count

8

increased by14.29%

Dependency changes

• - Removedreact@~0.11.2

• - Removedamdefine@1.0.1(transitive)

• - Removedbase62@0.1.1(transitive)

• - Removedenvify@2.0.1(transitive)

• - Removedesprima-fb@3001.1.0-dev-harmony-fb(transitive)

• - Removedjstransform@3.0.0(transitive)

• - Removedobject-keys@0.4.0(transitive)

• - Removedreact@0.11.2(transitive)

• - Removedsource-map@0.1.31(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedxtend@2.1.2(transitive)