mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
convert pagination
This commit is contained in:
parent
440440217d
commit
9e3f5ff810
@ -1,36 +1,97 @@
|
||||
const classNames = require('classnames');
|
||||
const composers = require('../../shared/composers');
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
baseBox
|
||||
} = composers;
|
||||
|
||||
const {
|
||||
boxes
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
rndId
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled,
|
||||
} = Styled;
|
||||
|
||||
const classNames = {
|
||||
active: rndId()
|
||||
};
|
||||
|
||||
const StyledUl = styled.ul`
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
`;
|
||||
|
||||
const StyledLi = styled.li`
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
float: left;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
min-width: 50px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
position: relative;
|
||||
|
||||
${baseBox()}
|
||||
|
||||
&:last-child {
|
||||
margin-right: inherit;
|
||||
}
|
||||
|
||||
&:not( .${classNames.active} ):hover {
|
||||
border: ${boxes.border.checked};
|
||||
}
|
||||
|
||||
& a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.${classNames.active} {
|
||||
cursor: default;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
const Pagination = ({
|
||||
children,
|
||||
className,
|
||||
label
|
||||
label,
|
||||
style
|
||||
}) => {
|
||||
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.pagination_item
|
||||
);
|
||||
const cn = `
|
||||
${child.props.className}
|
||||
${child.props.active ? classNames.active : ''}
|
||||
`.trim();
|
||||
|
||||
return (
|
||||
<li className={cn}>
|
||||
<StyledLi className={cn}>
|
||||
{child}
|
||||
</li>
|
||||
</StyledLi>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<nav aria-label={label} className={cn}>
|
||||
<ul className={styles.paginatation_list}>
|
||||
<nav
|
||||
aria-label={label}
|
||||
className={className}
|
||||
style={style}
|
||||
>
|
||||
<StyledUl>
|
||||
{pages}
|
||||
</ul>
|
||||
</StyledUl>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
@ -38,7 +99,8 @@ const Pagination = ({
|
||||
Pagination.propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
className: React.PropTypes.string,
|
||||
label: React.PropTypes.string
|
||||
label: React.PropTypes.string,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
module.exports = Pagination;
|
||||
|
@ -18,6 +18,6 @@ module.exports = {
|
||||
// RadioGroup: require('./components/radio-group'),
|
||||
Select: require('./components/select'),
|
||||
Widget: require('./components/widget'),
|
||||
// Pagination: require('./components/pagination'),
|
||||
Pagination: require('./components/pagination'),
|
||||
// Modal: require('./components/modal')
|
||||
};
|
||||
|
@ -13,6 +13,7 @@ const {
|
||||
Row,
|
||||
Column,
|
||||
Avatar,
|
||||
Pagination,
|
||||
RangeSlider,
|
||||
Select,
|
||||
Tabs,
|
||||
@ -144,6 +145,20 @@ storiesOf('Radio', module)
|
||||
<Radio disabled />
|
||||
));
|
||||
|
||||
|
||||
storiesOf('Pagination', module)
|
||||
.add('Default', () => (
|
||||
<Pagination>
|
||||
<a>
|
||||
<span>«</span>
|
||||
<span>Previous</span>
|
||||
</a>
|
||||
<a>1</a>
|
||||
<a active>2</a>
|
||||
<a>3</a>
|
||||
</Pagination>
|
||||
));
|
||||
|
||||
storiesOf('RangeSlider', module)
|
||||
.add('Default', () => (
|
||||
<RangeSlider />
|
||||
|
Loading…
Reference in New Issue
Block a user