joyent-portal/packages/ui-toolkit/src/card/meta.js

62 lines
1.2 KiB
JavaScript
Raw Normal View History

import { Row, Col } from 'react-styled-flexboxgrid';
2017-02-27 17:41:08 +02:00
import { Subscriber } from 'react-broadcast';
import Baseline from '../baseline';
import is from 'styled-is';
import PropTypes from 'prop-types';
import View from './view';
import React from 'react';
2017-02-15 03:19:26 +02:00
const InnerRow = Row.extend`
display: block;
2017-01-09 14:13:12 +02:00
height: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
${is('collapsed')`
width: 100%;
display: flex;
`};
2017-01-09 14:13:12 +02:00
`;
const Meta = ({ children, ...rest }) => {
2017-02-27 17:41:08 +02:00
const render = ({
collapsed = false,
fromHeader = false,
headed = false
}) => {
const meta = (
<Col
name="card-meta"
2017-02-27 17:41:08 +02:00
xs={collapsed ? 12 : 6}
collapsed={collapsed}
fromHeader={fromHeader}
headed={headed}
{...rest}
2017-02-27 17:41:08 +02:00
>
2017-08-28 22:21:08 +03:00
<InnerRow collapsed={collapsed}>{children}</InnerRow>
</Col>
2017-02-27 17:41:08 +02:00
);
2017-01-09 20:58:30 +02:00
2017-08-28 22:21:08 +03:00
return fromHeader ? (
<View collapsed fromHeader>
{meta}
</View>
) : (
meta
);
2017-02-27 17:41:08 +02:00
};
2017-08-28 22:21:08 +03:00
return <Subscriber channel="card">{render}</Subscriber>;
2017-02-27 17:41:08 +02:00
};
Meta.propTypes = {
children: PropTypes.node,
collapsed: PropTypes.bool,
fromHeader: PropTypes.bool,
headed: PropTypes.bool
2017-02-27 17:41:08 +02:00
};
2017-02-15 03:19:26 +02:00
export default Baseline(Meta);