joyent-portal/ui/src/components/list/options.js

78 lines
1.3 KiB
JavaScript
Raw Normal View History

2017-01-09 14:13:12 +02:00
const Button = require('../button');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
2017-01-16 21:43:11 +02:00
const transferProps = require('../../shared/transfer-props');
2017-01-09 14:13:12 +02:00
const Styled = require('styled-components');
const {
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled
} = Styled;
2017-01-09 20:58:30 +02:00
const height = (props) => props.collapsed
? remcalc(46)
: remcalc(124);
const borderLeftColor = (props) => !props.fromHeader
? colors.borderSecondary
: colors.borderPrimary;
2017-01-09 14:13:12 +02:00
const Nav = styled.nav`
flex: 0 0 ${remcalc(47)};
2017-01-12 21:04:52 +02:00
border-left: ${remcalc(1)} solid ${borderLeftColor};
2017-01-09 14:13:12 +02:00
`;
const StyledButton = styled(Button)`
border-width: 0;
box-shadow: none;
width: 100%;
height: ${height}; /* 100% doest work on safari */
&:focus {
border-width: 0;
}
&:hover {
border-width: 0;
}
&:active,
&:active:hover,
&:active:focus {
border-width: 0;
}
`;
2017-01-09 20:58:30 +02:00
const Options = transferProps([
'collapsed',
'headed',
'fromHeader'
], (props) => (
<Nav
fromHeader={props.fromHeader}
name='list-item-options'
>
2017-01-09 14:13:12 +02:00
<StyledButton
rect
2017-01-09 20:58:30 +02:00
secondary={!props.fromHeader}
2017-01-09 14:13:12 +02:00
{...props}
>
{props.children}
</StyledButton>
</Nav>
2017-01-09 20:58:30 +02:00
));
2017-01-09 14:13:12 +02:00
Options.propTypes = {
children: React.PropTypes.node
};
module.exports = Options;