diff --git a/ui/src/components/pagination/index.js b/ui/src/components/pagination/index.js index 8cdd6f87..78054618 100644 --- a/ui/src/components/pagination/index.js +++ b/ui/src/components/pagination/index.js @@ -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 ( -
  • + {child} -
  • + ); }); return ( - ); }; @@ -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; diff --git a/ui/src/index.js b/ui/src/index.js index d5488664..1b05e09b 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -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') }; diff --git a/ui/stories/index.js b/ui/stories/index.js index 9f4ae944..314f4d0e 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -13,6 +13,7 @@ const { Row, Column, Avatar, + Pagination, RangeSlider, Select, Tabs, @@ -144,6 +145,20 @@ storiesOf('Radio', module) )); + +storiesOf('Pagination', module) + .add('Default', () => ( + + + « + Previous + + 1 + 2 + 3 + + )); + storiesOf('RangeSlider', module) .add('Default', () => (