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-01-09 20:58:30 +02:00
|
|
|
const View = require('./view');
|
2017-01-09 14:13:12 +02:00
|
|
|
|
|
|
|
const {
|
|
|
|
default: styled
|
|
|
|
} = Styled;
|
|
|
|
|
2017-01-11 16:13:58 +02:00
|
|
|
const xs = (props) => props.collapsed
|
|
|
|
? 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-01-09 20:58:30 +02:00
|
|
|
module.exports = transferProps([
|
|
|
|
'collapsed',
|
|
|
|
'headed',
|
|
|
|
'fromHeader'
|
|
|
|
], (props) => {
|
|
|
|
const meta = (
|
|
|
|
<Column
|
|
|
|
name='list-item-meta'
|
|
|
|
xs={xs(props)}
|
|
|
|
{...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>
|
|
|
|
);
|
|
|
|
});
|