joyent-portal/packages/ui-toolkit/src/pagination/index.js

87 lines
1.7 KiB
JavaScript
Raw Normal View History

import React from 'react';
import styled, { 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 Anchor = styled(BaseAnchor)`
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};
`};
`;
const Arrow = styled(BaseArrow)`
${is('right')`
margin-left: ${remcalc(3)};
`};
${is('left')`
margin-right: ${remcalc(3)};
`};
`;
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
left
direction="right"
fill={disabled ? theme.grey : theme.primary}
/>
) : null}
{children}
{next ? (
<Arrow
right
direction="left"
fill={disabled ? theme.grey : theme.primary}
/>
) : null}
</Anchor>
)
);