Skip to content

Commit fdc5c45

Browse files
mking-clarieddywashere
mking-clari
authored and
eddywashere
committed
feat(Pagination): add Pagination component (#108)
1 parent 776c8a0 commit fdc5c45

15 files changed

Lines changed: 519 additions & 0 deletions

‎docs/lib/Components/PaginationPage.jsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
2+
import React from 'react';
3+
import { PrismCode } from 'react-prism';
4+
import Helmet from 'react-helmet';
5+
6+
import PaginationExample from '../examples/Pagination';
7+
const PaginationExampleSource = require('!!raw!../examples/Pagination.jsx');
8+
9+
import PaginationStateExample from '../examples/PaginationState';
10+
const PaginationStateExampleSource = require('!!raw!../examples/PaginationState.jsx');
11+
12+
import PaginationSizingLargeExample from '../examples/PaginationSizingLarge';
13+
const PaginationSizingLargeExampleSource = require('!!raw!../examples/PaginationSizingLarge.jsx');
14+
15+
import PaginationSizingSmallExample from '../examples/PaginationSizingSmall';
16+
const PaginationSizingSmallExampleSource = require('!!raw!../examples/PaginationSizingSmall.jsx');
17+
18+
export default class PaginationPage extends React.Component {
19+
render() {
20+
return (
21+
<div>
22+
<Helmet title="Pagination" />
23+
<h3>Pagination</h3>
24+
<div className="docs-example">
25+
<PaginationExample />
26+
</div>
27+
<pre>
28+
<PrismCode className="language-jsx">
29+
{PaginationExampleSource}
30+
</PrismCode>
31+
</pre>
32+
<h4>Properties</h4>
33+
<pre>
34+
<PrismCode className="language-jsx">
35+
{`Pagination.propTypes = {
36+
children: PropTypes.node,
37+
className: PropTypes.string,
38+
size: PropTypes.string,
39+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
40+
}`}
41+
</PrismCode>
42+
</pre>
43+
<h3>Disabled and active states</h3>
44+
<div className="docs-example">
45+
<PaginationStateExample />
46+
</div>
47+
<pre>
48+
<PrismCode className="language-jsx">
49+
{PaginationStateExampleSource}
50+
</PrismCode>
51+
</pre>
52+
<h3>Sizing</h3>
53+
<div className="docs-example">
54+
<PaginationSizingLargeExample />
55+
</div>
56+
<pre>
57+
<PrismCode className="language-jsx">
58+
{PaginationSizingLargeExampleSource}
59+
</PrismCode>
60+
</pre>
61+
<div className="docs-example">
62+
<PaginationSizingSmallExample />
63+
</div>
64+
<pre>
65+
<PrismCode className="language-jsx">
66+
{PaginationSizingSmallExampleSource}
67+
</PrismCode>
68+
</pre>
69+
</div>
70+
);
71+
}
72+
}

‎docs/lib/Components/index.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,10 @@ class Components extends React.Component {
9191
name: 'Media',
9292
to: '/components/media/'
9393
},
94+
{
95+
name: 'Pagination',
96+
to: '/components/pagination/'
97+
},
9498
]
9599
};
96100
}

‎docs/lib/examples/Pagination.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Pagination>
8+
<PaginationItem>
9+
<PaginationLink previous href="#" />
10+
</PaginationItem>
11+
<PaginationItem>
12+
<PaginationLink href="#">
13+
1
14+
</PaginationLink>
15+
</PaginationItem>
16+
<PaginationItem>
17+
<PaginationLink href="#">
18+
2
19+
</PaginationLink>
20+
</PaginationItem>
21+
<PaginationItem>
22+
<PaginationLink href="#">
23+
3
24+
</PaginationLink>
25+
</PaginationItem>
26+
<PaginationItem>
27+
<PaginationLink href="#">
28+
4
29+
</PaginationLink>
30+
</PaginationItem>
31+
<PaginationItem>
32+
<PaginationLink href="#">
33+
5
34+
</PaginationLink>
35+
</PaginationItem>
36+
<PaginationItem>
37+
<PaginationLink next href="#" />
38+
</PaginationItem>
39+
</Pagination>
40+
);
41+
}
42+
}

‎docs/lib/examples/PaginationSizingLarge.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Pagination size="lg">
8+
<PaginationItem>
9+
<PaginationLink previous href="#" />
10+
</PaginationItem>
11+
<PaginationItem>
12+
<PaginationLink href="#">
13+
1
14+
</PaginationLink>
15+
</PaginationItem>
16+
<PaginationItem>
17+
<PaginationLink href="#">
18+
2
19+
</PaginationLink>
20+
</PaginationItem>
21+
<PaginationItem>
22+
<PaginationLink href="#">
23+
3
24+
</PaginationLink>
25+
</PaginationItem>
26+
<PaginationItem>
27+
<PaginationLink next href="#" />
28+
</PaginationItem>
29+
</Pagination>
30+
);
31+
}
32+
}

‎docs/lib/examples/PaginationSizingSmall.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Pagination size="sm">
8+
<PaginationItem>
9+
<PaginationLink previous href="#" />
10+
</PaginationItem>
11+
<PaginationItem>
12+
<PaginationLink href="#">
13+
1
14+
</PaginationLink>
15+
</PaginationItem>
16+
<PaginationItem>
17+
<PaginationLink href="#">
18+
2
19+
</PaginationLink>
20+
</PaginationItem>
21+
<PaginationItem>
22+
<PaginationLink href="#">
23+
3
24+
</PaginationLink>
25+
</PaginationItem>
26+
<PaginationItem>
27+
<PaginationLink next href="#" />
28+
</PaginationItem>
29+
</Pagination>
30+
);
31+
}
32+
}

‎docs/lib/examples/PaginationState.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Pagination>
8+
<PaginationItem disabled>
9+
<PaginationLink previous href="#" />
10+
</PaginationItem>
11+
<PaginationItem active>
12+
<PaginationLink href="#">
13+
1
14+
</PaginationLink>
15+
</PaginationItem>
16+
<PaginationItem>
17+
<PaginationLink href="#">
18+
2
19+
</PaginationLink>
20+
</PaginationItem>
21+
<PaginationItem>
22+
<PaginationLink href="#">
23+
3
24+
</PaginationLink>
25+
</PaginationItem>
26+
<PaginationItem>
27+
<PaginationLink href="#">
28+
4
29+
</PaginationLink>
30+
</PaginationItem>
31+
<PaginationItem>
32+
<PaginationLink href="#">
33+
5
34+
</PaginationLink>
35+
</PaginationItem>
36+
<PaginationItem>
37+
<PaginationLink next href="#" />
38+
</PaginationItem>
39+
</Pagination>
40+
);
41+
}
42+
}

‎docs/lib/routes.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import MediaPage from './Components/MediaPage';
1919
import ModalsPage from './Components/ModalsPage';
2020
import CardPage from './Components/CardPage';
2121
import TablesPage from './Components/TablesPage';
22+
import PaginationPage from './Components/PaginationPage';
2223
import NotFound from './NotFound';
2324
import Components from './Components';
2425
import UI from './UI';
@@ -46,6 +47,7 @@ const routes = (
4647
<Route path="navs/" component={NavsPage} />
4748
<Route path="navbar/" component={NavbarPage} />
4849
<Route path="media/" component={MediaPage} />
50+
<Route path="pagination/" component={PaginationPage} />
4951
</Route>
5052
<Route path="*" component={NotFound} />
5153
</Route>

‎src/Pagination.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { PropTypes } from 'react';
2+
import classNames from 'classnames';
3+
4+
const propTypes = {
5+
children: PropTypes.node,
6+
className: PropTypes.string,
7+
size: PropTypes.string,
8+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
9+
};
10+
11+
const defaultProps = {
12+
tag: 'ul',
13+
};
14+
15+
const Pagination = (props) => {
16+
const {
17+
className,
18+
size,
19+
tag: Tag,
20+
...attributes,
21+
} = props;
22+
23+
const classes = classNames(
24+
className,
25+
'pagination',
26+
{
27+
[`pagination-${size}`]: !!size,
28+
}
29+
);
30+
31+
return (
32+
<Tag {...attributes} className={classes} />
33+
);
34+
};
35+
36+
Pagination.propTypes = propTypes;
37+
Pagination.defaultProps = defaultProps;
38+
39+
export default Pagination;

‎src/PaginationItem.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { PropTypes } from 'react';
2+
import classNames from 'classnames';
3+
4+
const propTypes = {
5+
active: PropTypes.bool,
6+
children: PropTypes.node,
7+
className: PropTypes.string,
8+
disabled: PropTypes.bool,
9+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
10+
};
11+
12+
const defaultProps = {
13+
tag: 'li',
14+
};
15+
16+
const PaginationItem = (props) => {
17+
const {
18+
active,
19+
className,
20+
disabled,
21+
tag: Tag,
22+
...attributes,
23+
} = props;
24+
25+
const classes = classNames(
26+
className,
27+
'page-item',
28+
{
29+
active,
30+
disabled,
31+
}
32+
);
33+
34+
return (
35+
<Tag {...attributes} className={classes} />
36+
);
37+
};
38+
39+
PaginationItem.propTypes = propTypes;
40+
PaginationItem.defaultProps = defaultProps;
41+
42+
export default PaginationItem;

0 commit comments

Comments
 (0)