├── lib
├── paginator.css
├── Paginator.js.map
└── Paginator.js
├── src
├── paginator.css
└── Paginator.jsx
├── .gitignore
├── examples
├── es6
│ └── src
│ │ ├── main.jsx
│ │ └── index.tpl.html
└── es5
│ └── index.html
├── LICENSE
├── package.json
├── webpack.config.js
└── README.md
/lib/paginator.css:
--------------------------------------------------------------------------------
1 | .pagination li a .glyphicon{
2 | line-height: inherit;
3 | }
--------------------------------------------------------------------------------
/src/paginator.css:
--------------------------------------------------------------------------------
1 | .pagination li a .glyphicon{
2 | line-height: inherit;
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 |
20 | # node-waf configuration
21 | .lock-wscript
22 |
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 |
26 | # Dependency directory
27 | node_modules
28 |
29 | # Optional npm cache directory
30 | .npm
31 |
32 | # Optional REPL history
33 | .node_repl_history
34 |
--------------------------------------------------------------------------------
/examples/es6/src/main.jsx:
--------------------------------------------------------------------------------
1 | import Paginator from '../../../src/Paginator.jsx';
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 |
5 | const App = React.createClass({
6 | pages:{
7 | current: 10,
8 | total: 1000
9 | },
10 | pageClick(page){
11 | console.log("I should do something regarding page "+page);
12 | },
13 | render(){
14 | return(
15 |
16 | )
17 | }
18 | });
19 |
20 | ReactDOM.render(, document.getElementById('the_paginator'));
21 |
--------------------------------------------------------------------------------
/examples/es6/src/index.tpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Reacomponents - Paginator ES5
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Fabio Oliveira Costa
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/examples/es5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Reacomponents - Paginator ES5
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
30 |
31 |
--------------------------------------------------------------------------------
/src/Paginator.jsx:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 |
5 | const Paginator = React.createClass({
6 | getDefaultProps(){
7 | return {
8 | max: 10,
9 | current: 1
10 | }
11 | },
12 |
13 | render(){
14 | let current = this.props.current;
15 | let total = this.props.total;
16 | let max = this.props.max;
17 |
18 | let start = Math.max(current - Math.round(max/2) ,1);
19 |
20 | let end = Math.min((start+max)-1,total);
21 | if(end - start < max) {
22 | start = Math.max(1,end - (max)-1);
23 | }
24 | let hasLess = null;
25 | let previous = null;
26 | if(start != 1){
27 | hasLess = (
28 | ...
29 | );
30 | previous = (
31 |
32 |
33 | this.props.onPage(current-1)}>
34 |
35 |
36 | );
37 | }
38 | let hasMore =null;
39 | let next = null;
40 | if(end...
43 | );
44 | next = (
45 |
46 |
47 | this.props.onPage(current+1)}>
48 |
49 |
50 | );
51 | }
52 | let getLinks= (start,end)=>{
53 | const links = [];
54 | for(let i=start;i<=end;i++){
55 | let className = i==current?'active':'';
56 | links.push(this.props.onPage(i)}>{i});
57 | }
58 | return links;
59 | };
60 | return(
61 |
62 |
63 | {previous}
64 | {hasLess}
65 | {getLinks(start,end)}
66 | {hasMore}
67 | {next}
68 |
69 |
\n
\n {previous}\n {hasLess}\n {getLinks(start,end)}\n {hasMore}\n {next}\n
\n