75 lines
1.6 KiB
JavaScript
75 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import { withTheme } from 'styled-components';
|
|
import remcalc from 'remcalc';
|
|
import is from 'styled-is';
|
|
|
|
import BaseAnchor from '../anchor';
|
|
import { Tfoot, Tr, Th } from '../table';
|
|
import { Arrow as BaseArrow } from '../icons';
|
|
|
|
const Arrow = BaseArrow.extend`
|
|
margin: ${remcalc(2)} ${remcalc(6)};
|
|
`;
|
|
|
|
const Anchor = BaseAnchor.extend`
|
|
margin-left: ${remcalc(6)};
|
|
margin-right: ${remcalc(6)};
|
|
text-decoration: underline;
|
|
|
|
${is('disabled')`
|
|
text-decoration: none;
|
|
`};
|
|
|
|
${is('active')`
|
|
text-decoration: none;
|
|
`};
|
|
|
|
${is('active')`
|
|
padding: ${remcalc(6)};
|
|
background-color: ${props => props.theme.primary};
|
|
border: ${remcalc(1)} solid ${props => props.theme.primaryActive};
|
|
border-radius: ${remcalc(4)};
|
|
color: ${props => props.theme.white};
|
|
`};
|
|
`;
|
|
|
|
export const TableFoot = ({ children, colSpan, ...rest }) => (
|
|
<Tfoot>
|
|
<Tr {...rest}>
|
|
<Th colSpan={colSpan} hasBorder="bottom" middle center>
|
|
{children}
|
|
</Th>
|
|
</Tr>
|
|
</Tfoot>
|
|
);
|
|
|
|
export const Item = withTheme(
|
|
({
|
|
children,
|
|
next,
|
|
prev,
|
|
disabled,
|
|
to,
|
|
component,
|
|
active,
|
|
theme,
|
|
...rest
|
|
}) => (
|
|
<Anchor
|
|
disabled={disabled}
|
|
active={active}
|
|
component={active ? null : component}
|
|
to={active ? null : to}
|
|
{...rest}
|
|
>
|
|
{prev ? (
|
|
<Arrow direction="right" fill={disabled ? theme.grey : theme.primary} />
|
|
) : null}
|
|
{children}
|
|
{next ? (
|
|
<Arrow direction="left" fill={disabled ? theme.grey : theme.primary} />
|
|
) : null}
|
|
</Anchor>
|
|
)
|
|
);
|