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:
parent
1d334d2a76
commit
17d4c47857
44
ui/src/components/pagination/index.js
Normal file
44
ui/src/components/pagination/index.js
Normal 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;
|
53
ui/src/components/pagination/readme.md
Normal file
53
ui/src/components/pagination/readme.md
Normal 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>«</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>«</span>
|
||||
<span>Previous</span>
|
||||
</a>
|
||||
<a>1</a>
|
||||
<a active>2</a>
|
||||
<a>3</a>
|
||||
</Pagination>
|
||||
);
|
||||
}
|
||||
```
|
55
ui/src/components/pagination/style.css
Normal file
55
ui/src/components/pagination/style.css
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -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')
|
||||
};
|
||||
|
@ -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')
|
||||
};
|
||||
|
@ -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);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user