2017-01-09 14:13:12 +02:00
|
|
|
const Column = require('../column');
|
|
|
|
const React = require('react');
|
|
|
|
const Row = require('../row');
|
2017-01-09 20:58:30 +02:00
|
|
|
const Styled = require('styled-components');
|
2017-01-16 21:43:11 +02:00
|
|
|
const transferProps = require('../../shared/transfer-props');
|
2017-02-15 03:19:26 +02:00
|
|
|
const composers = require('../../shared/composers');
|
2017-01-09 20:58:30 +02:00
|
|
|
const View = require('./view');
|
2017-01-09 14:13:12 +02:00
|
|
|
|
|
|
|
const {
|
|
|
|
default: styled
|
|
|
|
} = Styled;
|
|
|
|
|
2017-02-15 03:19:26 +02:00
|
|
|
const {
|
|
|
|
Baseline
|
|
|
|
} = composers;
|
|
|
|
|
2017-02-03 17:21:57 +02:00
|
|
|
const md = (props) => props.collapsed
|
2017-01-11 16:13:58 +02:00
|
|
|
? 12
|
|
|
|
: 6;
|
|
|
|
|
|
|
|
const display = (props) => !props.collapsed
|
|
|
|
? 'block'
|
|
|
|
: 'flex';
|
2017-01-09 14:13:12 +02:00
|
|
|
|
|
|
|
const InnerRow = styled(Row)`
|
2017-01-11 16:13:58 +02:00
|
|
|
display: ${display};
|
2017-01-09 14:13:12 +02:00
|
|
|
height: 100%;
|
|
|
|
`;
|
|
|
|
|
2017-02-15 03:19:26 +02:00
|
|
|
const Meta = transferProps([
|
2017-01-09 20:58:30 +02:00
|
|
|
'collapsed',
|
|
|
|
'headed',
|
|
|
|
'fromHeader'
|
|
|
|
], (props) => {
|
|
|
|
const meta = (
|
|
|
|
<Column
|
2017-02-03 17:21:57 +02:00
|
|
|
md={md(props)}
|
2017-01-09 20:58:30 +02:00
|
|
|
name='list-item-meta'
|
2017-02-03 17:21:57 +02:00
|
|
|
xs={12}
|
2017-01-09 20:58:30 +02:00
|
|
|
{...props}
|
|
|
|
>
|
2017-01-11 16:13:58 +02:00
|
|
|
<InnerRow collapsed={props.collapsed}>
|
2017-01-09 20:58:30 +02:00
|
|
|
{props.children}
|
|
|
|
</InnerRow>
|
|
|
|
</Column>
|
|
|
|
);
|
|
|
|
|
|
|
|
return !props.fromHeader ? meta : (
|
|
|
|
<View collapsed fromHeader>
|
|
|
|
{meta}
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
});
|
2017-02-15 03:19:26 +02:00
|
|
|
|
|
|
|
module.exports = Baseline(
|
|
|
|
Meta
|
|
|
|
);
|