1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

implement <Pagination> component (fixes #54)

This commit is contained in:
Sérgio Ramos 2016-10-31 18:59:12 +00:00
parent 1d334d2a76
commit 17d4c47857
6 changed files with 162 additions and 2 deletions

View File

@ -0,0 +1,44 @@
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
const Pagination = ({
children,
className,
label
}) => {
const cn = classNames(
className,
styles.pagination
);
const pages = React.Children.map(children, (child) => {
const cn = classNames(
child.props.className,
child.props.active ? styles.active : '',
styles.li
);
return (
<li className={cn}>
{child}
</li>
);
});
return (
<nav aria-label={label} className={cn}>
<ul className={styles.ul}>
{pages}
</ul>
</nav>
);
};
Pagination.propTypes = {
children: React.PropTypes.node,
className: React.PropTypes.string,
label: React.PropTypes.string
};
module.exports = Pagination;

View File

@ -0,0 +1,53 @@
# `<P >`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Pagination = require('./index.js');
const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Pagination>
<a>
<span>&laquo;</span>
<span>Previous</span>
</a>
<a>1</a>
<a active>2</a>
<a>3</a>
</Pagination>
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Radio = require('ui/radio');
module.exports = () => {
return (
<Pagination>
<a>
<span>&laquo;</span>
<span>Previous</span>
</a>
<a>1</a>
<a active>2</a>
<a>3</a>
</Pagination>
);
}
```

View File

@ -0,0 +1,55 @@
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remCalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.pagination {
display: inline-block;
& .ul {
display: inline;
list-style: none;
& .li {
cursor: pointer;
height: 50px;
min-width: 50px;
padding-left: 15px;
padding-right: 15px;
margin-right: 10px;
border: var(--border-unchecked);
box-shadow: var(--bottom-shaddow);
border-radius: var(--border-radius);
position: relative;
float: left;
display: flex;
justify-content: center;
align-items: center;
&:last-child {
margin-right: inherit;
}
&:not(.active):hover {
border: var(--border-checked);
}
& a:hover {
text-decoration: none
}
&.active {
cursor: default;
}
}
}
}

View File

@ -20,7 +20,8 @@ module.exports = {
Checkbox: require('./components/checkbox/readme.md'),
Tab: require('./components/tab/readme.md'),
Tabs: require('./components/tabs/readme.md'),
Widget: require('./components/widget/readme.md')
Widget: require('./components/widget/readme.md'),
Pagination: require('./components/pagination/readme.md')
},
FAQ: require('./faq.md')
};

View File

@ -14,5 +14,6 @@ module.exports = {
Radio: require('./components/radio'),
RadioGroup: require('./components/radio-group'),
Select: require('./components/select'),
Widget: require('./components/widget')
Widget: require('./components/widget'),
Pagination: require('./components/pagination')
};

View File

@ -107,3 +107,9 @@ test('renders <Select> without exploding', (t) => {
const wrapper = shallow(<Select />);
t.deepEqual(wrapper.length, 1);
});
test('renders <Pagination> without exploding', (t) => {
const Pagination = require('../src/components/pagination');
const wrapper = shallow(<Pagination />);
t.deepEqual(wrapper.length, 1);
});