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

87 lines
1.6 KiB
JavaScript
Raw Normal View History

2017-02-27 17:41:08 +02:00
import { Subscriber } from 'react-broadcast';
import isString from 'lodash.isstring';
import { Baseline, typography } from '../../shared/composers';
import { colors } from '../../shared/constants';
import { remcalc, is } from '../../shared/functions';
import styled from 'styled-components';
import React from 'react';
2017-01-09 14:13:12 +02:00
const Container = styled.div`
font-size: ${remcalc(15)};
2017-01-09 14:13:12 +02:00
line-height: 1.5;
color: ${colors.base.secondary};
2017-01-09 14:13:12 +02:00
${typography.medium}
2017-02-27 17:41:08 +02:00
2017-01-09 14:13:12 +02:00
display: flex;
flex-direction: row;
justify-content: flex-start;
2017-01-09 14:13:12 +02:00
flex-grow: 2;
width: 100%;
2017-01-09 14:13:12 +02:00
padding: ${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)};
2017-01-09 14:13:12 +02:00
2017-02-27 17:41:08 +02:00
${is('fromHeader')`
color: ${colors.base.white};
`};
${is('collapsed')`
flex-grow: 0;
flex-direction: column;
width: auto;
justify-content: center;
padding: 0 ${remcalc(18)};
`};
`;
2017-01-09 14:13:12 +02:00
const Span = styled.span`
display: inline-block;
2017-01-09 14:13:12 +02:00
flex-direction: column;
justify-content: center;
${is('collapsed')`
display: flex;
`};
2017-01-09 14:13:12 +02:00
`;
const Title = ({
children,
...props
}) => {
const _children = !isString(children) ? children : (
<Span>{children}</Span>
2017-01-09 14:13:12 +02:00
);
2017-02-27 17:41:08 +02:00
const render = ({
collapsed = false,
fromHeader = false
}) => (
2017-01-09 14:13:12 +02:00
<Container
collapsed={collapsed}
2017-02-27 17:41:08 +02:00
fromHeader={fromHeader}
2017-01-09 14:13:12 +02:00
name='list-item-title'
2017-02-27 17:41:08 +02:00
xs={collapsed ? 6 : 12}
2017-01-09 14:13:12 +02:00
{...props}
>
{_children}
</Container>
);
2017-02-27 17:41:08 +02:00
return (
<Subscriber channel='list-item'>
{render}
</Subscriber>
);
2017-01-09 14:13:12 +02:00
};
Title.propTypes = {
children: React.PropTypes.node,
2017-02-27 17:41:08 +02:00
collapsed: React.PropTypes.bool,
fromHeader: React.PropTypes.bool
2017-01-09 14:13:12 +02:00
};
export default Baseline(
2017-02-15 03:19:26 +02:00
Title
);