react-paginate - npm Package Compare versions

Comparing version 0.1.14 to 0.1.15

gulpfile.js

 'use strict';
 
+var fs         = require('fs');
+var path       = require('path');
+var util       = require('util');
 var gulp       = require('gulp');
@@ -9,3 +12,34 @@ var browserify = require('browserify');
 var uglify     = require('gulp-uglify');
+var nodemon    = require('gulp-nodemon');
 
+var CONFIG = {
+  sample: {
+    files: {
+      data: path.join(__dirname, 'sample', 'data.json'),
+      assets: [
+        'sample/**/*.html',
+        'sample/**/*.css',
+        'sample/**/*.js'
+      ]
+    }
+  }
+};
+
+gulp.task('generate:data', function(cb) {
+
+  var comments = [];
+
+  for (var i = 0; i < 200; i++) {
+    comments.push({
+      username : util.format('user-%s', i),
+      comment  : util.format('This is the comment #%d', i)
+    });
+  }
+
+  fs.writeFileSync(CONFIG.sample.files.data, JSON.stringify(comments, null, 2));
+
+  return cb();
+
+});
+
 gulp.task('watch', function() {
@@ -36,2 +70,13 @@ gulp.watch('./react_components/*.js', ['app', 'sample']);
 
+gulp.task('server:watch', function () {
+  nodemon({script: 'server.js'})
+    .on('restart', 'server:reload');
+});
+
+gulp.task('server:reload', function() {
+  gulp.watch('./react_components/*.js', ['app', 'sample']);
+  gulp.watch('./sample/sample.jsx', ['sample']);
+});
+
+gulp.task('serve', ['app', 'sample', 'generate:data', 'server:watch']);
 gulp.task('default', ['app', 'sample']);

package.json

 {
   "name": "react-paginate",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "A ReactJS component that creates a pagination.",
@@ -28,8 +28,12 @@ "main": "./react_components/index.js",
     "browserify": "~6.0.3",
+    "express": "^4.12.1",
     "gulp": "~3.8.8",
+    "gulp-nodemon": "^1.0.5",
     "gulp-uglify": "^1.1.0",
     "jest-cli": "^0.2.2",
+    "jquery": "^2.1.3",
     "react": "~0.12.2",
     "react-tools": "~0.12.2",
     "reactify": "1.0.0",
+    "serve-static": "^1.9.1",
     "vinyl-buffer": "^1.0.0",
@@ -46,2 +50,3 @@ "vinyl-source-stream": "~1.0.0",
   "scripts": {
+    "preinstall": "bower i",
     "test": "jest"
@@ -48,0 +53,0 @@ },

react_components/index.js

@@ -0,1 +1,3 @@
+'use strict';
+
 module.exports = require('./PaginationBoxView');

react_components/PageView.js

@@ -10,7 +10,9 @@ /** @jsx React.DOM */
     if (this.props.selected) {
-      var cssClass = 'selected';
+      var cssClass = this.props.activeClass || 'selected';
     }
-    return <li className={cssClass}>
-        <a href="" {...this.props}>{this.props.children}</a>
-      </li>
+    return (
+        <li className={cssClass}>
+            <a href="" {...this.props}>{this.props.children}</a>
+        </li>
+    );
   }
@@ -17,0 +19,0 @@ });

react_components/PaginationBoxView.js

@@ -9,40 +9,49 @@ /** @jsx React.DOM */
 var PaginationBoxView = React.createClass({
+
   propTypes: {
-    pageNum: React.PropTypes.number.isRequired,
-    pageRangeDisplayed: React.PropTypes.number.isRequired,
-    marginPagesDisplayed: React.PropTypes.number.isRequired,
-    previousLabel: React.PropTypes.node,
-    nextLabel: React.PropTypes.node,
-    breakLabel: React.PropTypes.node,
-    clickCallback: React.PropTypes.func,
-    initialSelected: React.PropTypes.number
+    pageNum              : React.PropTypes.number.isRequired,
+    pageRangeDisplayed   : React.PropTypes.number.isRequired,
+    marginPagesDisplayed : React.PropTypes.number.isRequired,
+    previousLabel        : React.PropTypes.node,
+    nextLabel            : React.PropTypes.node,
+    breakLabel           : React.PropTypes.node,
+    clickCallback        : React.PropTypes.func,
+    initialSelected      : React.PropTypes.number
   },
+
   getDefaultProps: function() {
     return {
-      pageNum: 10,
-      pageRangeDisplayed: 2,
-      marginPagesDisplayed: 3,
-      previousLabel: "Previous",
-      nextLabel: "Next",
-      breakLabel: "..."
+      pageNum              : 10,
+      pageRangeDisplayed   : 2,
+      marginPagesDisplayed : 3,
+      previousLabel        : "Previous",
+      nextLabel            : "Next",
+      breakLabel           : "..."
     };
   },
+
   getInitialState: function() {
-    return {selected: this.props.initialSelected ? this.props.initialSelected :1};
+    return {
+      selected: this.props.initialSelected ? this.props.initialSelected : 1
+    };
   },
-  handlePageSelected: function(index, event) {
+
+  handlePageSelected: function(selected, event) {
     event.preventDefault();
-    if (this.state.selected !== index) {
-      this.setState({selected: index});
 
-      if (typeof(this.props.clickCallback) !== "undefined" && typeof(this.props.clickCallback) === "function")
-        this.props.clickCallback({selected: index});
+    if (this.state.selected === selected) return;
+
+    this.setState({selected: selected});
+
+    if (typeof(this.props.clickCallback) !== "undefined" &&
+        typeof(this.props.clickCallback) === "function") {
+      this.props.clickCallback({selected: selected - 1});
     }
   },
+
   handlePreviousPage: function(event) {
     event.preventDefault();
-    if (this.state.selected > 1) {
-      this.handlePageSelected(this.state.selected - 1, event);
-    }
+    if (this.state.selected > 1) this.handlePageSelected(this.state.selected - 1, event);
   },
+
   handleNextPage: function(event) {
@@ -54,5 +63,6 @@ event.preventDefault();
   },
+
   render: function() {
     return (
-      <ul className="pagination">
+      <ul className={this.props.containerClassName}>
         <li onClick={this.handlePreviousPage} className="previous">
@@ -68,3 +78,5 @@ <a href="">{this.props.previousLabel}</a>
           marginPagesDisplayed={this.props.marginPagesDisplayed}
-          breakLabel = {this.props.breakLabel} />
+          breakLabel={this.props.breakLabel}
+          subContainerClassName={this.props.subContainerClassName}
+          activeClass={this.props.activeClass} />
 
@@ -71,0 +83,0 @@ <li onClick={this.handleNextPage} className="next">

react_components/PaginationListView.js

@@ -17,2 +17,3 @@ /** @jsx React.DOM */
             selected={this.props.selected === index}
+            activeClass={this.props.activeClass}
             key={index}>
@@ -44,2 +45,3 @@ {page}
             selected={this.props.selected === index}
+            activeClass={this.props.activeClass}
             key={index}>
@@ -69,3 +71,3 @@ {index}
     return (
-      <ul className="pages">
+      <ul className={this.props.subContainerClassName}>
         {items}
@@ -72,0 +74,0 @@ </ul>

README.md

@@ -24,2 +24,3 @@ react-paginate
 
+
 ##### To load the component:
@@ -29,2 +30,3 @@
 
+
 ##### To run tests:
@@ -36,79 +38,32 @@
 
-Using it into your own project:
+To run the example:
 ---------------------
 
-```javascript
-var React         = require("react");
-var ReactPaginate = require("react-paginate");
+##### Get the component:
 
+`git clone [e-mail]:AdeleD/react-paginate.git`
 
-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={5} />
-                </nav>
-            </div>
-        );
-    }
-});
+#### Install:
 
-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>
-        );
-    }
-});
+`cd react-paginate`
 
-React.renderComponent(
-    <MyComponent url={'http://www.my-api-url.com/objects'}
-                       perPage={10} />,
-    container
-);
+`make install`
 
-module.exports = MyComponentList;
-module.exports = MyComponent;
-```
+
+#### Start the server:
+
+`make serve`
+
+
+#### See the result:
+
+Open your browser and go to `http://localhost:3000/`
+
+
+
+Using it into your own project:
+---------------------
+
+To know how to use react-paginate into your own projet, you can read the code of the example into the folder : `sample/sample.jsx`.
+You will understand how to make react-paginate work with a list of objects.

sample/sample.jsx

@@ -6,2 +6,3 @@ /** @jsx React.DOM */
 var ReactPaginate = require('./../react_components');
+var $             = require('jquery');
 
@@ -11,13 +12,72 @@ window.React = React;
 
+var CommentList = React.createClass({
+  render: function() {
+    var commentNodes = this.props.data.map(function(comment, index) {
+      return (
+        <div>{comment.comment}</div>
+      );
+    });
+    return (
+      <div id="project-comments" className="commentList">
+        <ul>
+          {commentNodes}
+        </ul>
+      </div>
+    );
+  }
+});
+
 var App = React.createClass({
+
+  loadCommentsFromServer: function() {
+    $.ajax({
+      url      : this.props.url,
+      data     : {limit: this.props.perPage, offset: this.state.offset},
+      dataType : 'json',
+      type     : 'GET',
+
+      success: function(data) {
+        this.setState({data: data.comments, pageNum: (data.meta.total_count / data.meta.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;
+    var offset = Math.ceil(selected * this.props.perPage);
+
+    this.setState({offset: offset}, function() {
+      this.loadCommentsFromServer();
+    }.bind(this));
+
+    this.loadCommentsFromServer();
+  },
+
+  getInitialState: function() {
+    return {data: [], offset: 0};
+  },
+
+  componentDidMount: function() {
+    this.loadCommentsFromServer();
+  },
+
   render: function () {
     return (
-      <nav>
+      <div className="commentBox">
+        <CommentList data={this.state.data} />
         <ReactPaginate previousLabel={"previous"}
                        nextLabel={"next"}
-                       breakLabel={"..."}
-                       pageNum={20}
+                       breakLabel={<li className="break"><a href="">...</a></li>}
+                       pageNum={this.state.pageNum}
                        marginPagesDisplayed={2}
-                       pageRangeDisplayed={5} />
-      </nav>
+                       pageRangeDisplayed={5}
+                       clickCallback={this.handlePageClick}
+                       containerClassName={"pagination"}
+                       subContainerClassName={"pages pagination"}
+                       activeClass={"active"} />
+      </div>
     );
@@ -28,4 +88,6 @@ }
 React.renderComponent(
-  new App(),
+  <App url={'http://localhost:3000/comments'}
+       author={'adele'}
+       perPage={10} />,
   document.getElementById('react-paginate')
 );

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

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

21

increased by23.53%

Number of low quality alerts

3

decreased by-25%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

225789

decreased by-45.06%

Dev dependency count

14

increased by40%

Lines of code

1003

decreased by-32.41%

Number of lines in readme file

67

decreased by-40.18%

Number of high supply chain risk alerts

1

increased byInfinity%

Number of low supply chain risk alerts

6

increased by50%

No dependency changes