├── .gitignore
├── README.md
├── bower.json
├── index.js
├── index.jsx
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # Compiled binary addons (http://nodejs.org/api/addons.html)
20 | build/Release
21 | 
22 | # Dependency directory
23 | # Commenting this out is preferred by some people, see
24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
25 | node_modules
26 | bower_components
27 | 
28 | # Users Environment Variables
29 | .lock-wscript
30 | 
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | react-paginate
 2 | ===============
 3 | 
 4 | A pagination component for ReactJS using Twitter Bootstrap markup
 5 | 
 6 | Example: http://jsfiddle.net/kb3gN/8460/
 7 | 
 8 | ### Install
 9 | 
10 | Via Bower:
11 | ```
12 | bower install react-paginate
13 | ```
14 | 
15 | Via NPM
16 | ```
17 | npm install react-paginate-component
18 | ```
19 | 
20 | ### Usage
21 | 
22 | ```js
23 | var Paginate = require('react-paginate'); // in Node: react-paginate-component
24 | 
25 | var App = React.createClass({
26 | 	getInitialState: function() {
27 | 		return {
28 | 			items: [...]
29 | 		}
30 | 	},
31 | 	onChangePage: function(page) {
32 | 		return request(url, {page: page}).then(function(items) {
33 | 			this.setState({items: items});
34 | 		}.bind(this));
35 | 	},
36 | 	render: function() {
37 | 		return (
38 | 			<div>
39 | 				<h1>My App</h1>
40 | 				// Print items here
41 | 				<Paginator max={5} onChange={this.onChangePage}/>
42 | 			</div>
43 | 		);
44 | 	}
45 | });
46 | ```
47 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-paginate",
 3 |   "main": "index.js",
 4 |   "version": "0.0.3",
 5 |   "homepage": "https://github.com/eliseumds/react-paginate",
 6 |   "authors": [
 7 |     "Eliseu Monar <eliseumds@gmail.com>"
 8 |   ],
 9 |   "description": "A ReactJS pagination component",
10 |   "moduleType": [
11 |     "amd",
12 |     "globals",
13 |     "node"
14 |   ],
15 |   "keywords": [
16 |     "reactjs",
17 |     "react",
18 |     "js",
19 |     "paginator",
20 |     "pagination",
21 |     "paginate"
22 |   ],
23 |   "license": "GNU GPL v2.0",
24 |   "ignore": [
25 |     "**/.*",
26 |     "node_modules",
27 |     "bower_components",
28 |     "test",
29 |     "tests"
30 |   ],
31 |   "dependencies": {
32 |     "react": "~0.12.1"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | (function (root, factory) {
  2 |     if (typeof define === 'function' && define.amd) {
  3 |         define(['react'], factory);
  4 |     } else if (typeof exports === 'object') {
  5 |         module.exports = factory(require('react'));
  6 |     } else {
  7 |         root.ReactPaginate = factory(root.React);
  8 |     }
  9 | }(this, function(React) {
 10 |     return React.createClass({
 11 |         propTypes: {
 12 |             max: React.PropTypes.number.isRequired,
 13 |             maxVisible: React.PropTypes.number,
 14 |             onChange: React.PropTypes.func.isRequired
 15 |         },
 16 |         componentDidUpdate: function(prevProps, prevState) {
 17 |             if (prevState.currentPage !== this.state.currentPage) {
 18 |                 this.props.onChange(this.state.currentPage);
 19 |             }
 20 |         },
 21 |         getDefaultProps: function() {
 22 |             return {
 23 |                 maxVisible: 5
 24 |             };
 25 |         },
 26 |         getInitialState: function() {
 27 |             return {
 28 |                 currentPage: 1,
 29 |                 items: []
 30 |             };
 31 |         },
 32 |         goTo: function(page, e) {
 33 |             if (e) {
 34 |               e.preventDefault();
 35 |             }
 36 | 
 37 |             this.setState({currentPage: page});
 38 |         },
 39 | 
 40 |         onClickNext: function(e) {
 41 |             e.preventDefault();
 42 | 
 43 |             var page = this.state.currentPage;
 44 | 
 45 |             if (page < this.props.max) {
 46 |                 this.goTo(page + 1);
 47 |             }
 48 |         },
 49 |         onClickPrev: function(e) {
 50 |             e.preventDefault();
 51 | 
 52 |             if (this.state.currentPage > 1) {
 53 |                 this.goTo(this.state.currentPage - 1);
 54 |             }
 55 |         },
 56 |         render: function() {
 57 |             var className = this.props.className || '',
 58 |                 p = this.props,
 59 |                 s = this.state,
 60 |                 skip = 0;
 61 | 
 62 |             if (s.currentPage > p.maxVisible - 1 && s.currentPage < p.max) {
 63 |                 skip = s.currentPage - p.maxVisible + 1;
 64 |             } else if (s.currentPage === p.max) {
 65 |                 skip = s.currentPage - p.maxVisible;
 66 |             }
 67 | 
 68 |             var iterator = Array.apply(null, Array(p.maxVisible)).map(function(v, i) {
 69 |                 return skip + i + 1;
 70 |             });
 71 | 
 72 |             return (
 73 |                 React.createElement("nav", null,
 74 |                     React.createElement("ul", {className: 'pagination ' + className},
 75 |                         React.createElement("li", {className: s.currentPage === 1 ? 'disabled' : ''},
 76 |                             React.createElement("a", {href: "#", onClick: this.onClickPrev},
 77 |                                 React.createElement("span", {'aria-hidden': "true"}, "«"),
 78 |                                 React.createElement("span", {className: "sr-only"}, "Prev")
 79 |                             )
 80 |                         ),
 81 |                         iterator.map(function(page) {
 82 |                             return (
 83 |                                 React.createElement("li", {key: page,
 84 |                                     onClick: this.goTo.bind(this, page),
 85 |                                     className: s.currentPage === page ? 'active' : ''},
 86 |                                     React.createElement("a", {href: "#"}, page)
 87 |                                 )
 88 |                             );
 89 |                         }, this),
 90 |                         React.createElement("li", {className: s.currentPage === p.max ? 'disabled' : ''},
 91 |                             React.createElement("a", {href: "#", onClick: this.onClickNext},
 92 |                                 React.createElement("span", {'aria-hidden': "true"}, "»"),
 93 |                                 React.createElement("span", {className: "sr-only"}, "Next")
 94 |                             )
 95 |                         )
 96 |                     )
 97 |                 )
 98 |             );
 99 |         }
100 |     });
101 | }));
102 | 


--------------------------------------------------------------------------------
/index.jsx:
--------------------------------------------------------------------------------
  1 | (function (root, factory) {
  2 |     if (typeof define === 'function' && define.amd) {
  3 |         define(['react'], factory);
  4 |     } else if (typeof exports === 'object') {
  5 |         module.exports = factory(require('react'));
  6 |     } else {
  7 |         root.ReactPaginate = factory(root.React);
  8 |     }
  9 | }(this, function(React) {
 10 |     return React.createClass({
 11 |         propTypes: {
 12 |             max: React.PropTypes.number.isRequired,
 13 |             maxVisible: React.PropTypes.number,
 14 |             onChange: React.PropTypes.func.isRequired
 15 |         },
 16 |         componentDidUpdate: function(prevProps, prevState) {
 17 |             if (prevState.currentPage !== this.state.currentPage) {
 18 |                 this.props.onChange(this.state.currentPage);
 19 |             }
 20 |         },
 21 |         getDefaultProps: function() {
 22 |             return {
 23 |                 maxVisible: 5
 24 |             };
 25 |         },
 26 |         getInitialState: function() {
 27 |             return {
 28 |                 currentPage: 1,
 29 |                 items: []
 30 |             };
 31 |         },
 32 |         goTo: function(page, e) {
 33 |             if (e) {
 34 |               e.preventDefault();
 35 |             }
 36 | 
 37 |             this.setState({currentPage: page});
 38 |         },
 39 | 
 40 |         onClickNext: function(e) {
 41 |             e.preventDefault();
 42 | 
 43 |             var page = this.state.currentPage;
 44 | 
 45 |             if (page < this.props.max) {
 46 |                 this.goTo(page + 1);
 47 |             }
 48 |         },
 49 |         onClickPrev: function(e) {
 50 |             e.preventDefault();
 51 | 
 52 |             if (this.state.currentPage > 1) {
 53 |                 this.goTo(this.state.currentPage - 1);
 54 |             }
 55 |         },
 56 |         render: function() {
 57 |             var className = this.props.className || '',
 58 |                 p = this.props,
 59 |                 s = this.state,
 60 |                 skip = 0;
 61 | 
 62 |             if (s.currentPage > p.maxVisible - 1 && s.currentPage < p.max) {
 63 |                 skip = s.currentPage - p.maxVisible + 1;
 64 |             } else if (s.currentPage === p.max) {
 65 |                 skip = s.currentPage - p.maxVisible;
 66 |             }
 67 | 
 68 |             var iterator = Array.apply(null, Array(p.maxVisible)).map(function(v, i) {
 69 |                 return skip + i + 1;
 70 |             });
 71 | 
 72 |             return (
 73 |                 <nav>
 74 |                     <ul className={'pagination ' + className}>
 75 |                         <li className={s.currentPage === 1 ? 'disabled' : ''}>
 76 |                             <a href="#" onClick={this.onClickPrev}>
 77 |                                 <span aria-hidden="true">&laquo;</span>
 78 |                                 <span className="sr-only">Prev</span>
 79 |                             </a>
 80 |                         </li>
 81 |                         {iterator.map(function(page) {
 82 |                             return (
 83 |                                 <li key={page}
 84 |                                     onClick={this.goTo.bind(this, page)}
 85 |                                     className={s.currentPage === page ? 'active' : ''}>
 86 |                                     <a href="#">{page}</a>
 87 |                                 </li>
 88 |                             );
 89 |                         }, this)}
 90 |                         <li className={s.currentPage === p.max ? 'disabled' : ''}>
 91 |                             <a href="#" onClick={this.onClickNext}>
 92 |                                 <span aria-hidden="true">&raquo;</span>
 93 |                                 <span className="sr-only">Next</span>
 94 |                             </a>
 95 |                         </li>
 96 |                     </ul>
 97 |                 </nav>
 98 |             );
 99 |         }
100 |     });
101 | }));
102 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-paginate-component",
 3 |   "version": "0.0.3",
 4 |   "description": "A ReactJS pagination component",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/eliseumds/react-paginate.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "reactjs",
16 |     "js",
17 |     "pagination",
18 |     "paginator",
19 |     "paginate"
20 |   ],
21 |   "author": "Eliseu Monar <eliseumds@gmail.com>",
22 |   "license": "GNU GPL v2.0",
23 |   "bugs": {
24 |     "url": "https://github.com/eliseumds/react-paginate/issues"
25 |   },
26 |   "homepage": "https://github.com/eliseumds/react-paginate",
27 |   "dependencies": {
28 |     "react": "^0.12.1"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------