import React from 'react';
import { Broadcast, Subscriber } from 'joy-react-broadcast';
import PropTypes from 'prop-types';
import is, { isNot, isOr } from 'styled-is';
import remcalc from 'remcalc';
import Baseline from '../baseline';
import Card, { BaseCard } from './card';
const BaseHeader = BaseCard.extend`
flex-direction: row;
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
${is('parentCollapsed')`
margin: ${remcalc(-1)};
box-shadow: none;
`};
${isOr('tertiary', 'transparent')`
box-shadow: none;
background-color: transparent;
border-width: 0;
margin: 0;
`};
${isNot('secondary', 'tertiary')`
${is('transparent')`
color: ${props => props.theme.text};
`};
`};
${is('disabled')`
color: ${props => props.theme.text};
border-color: ${props => props.theme.grey};
box-shadow: none;
`};
button {
margin-bottom: 0;
margin-top: 0;
}
`;
const BaseBox = BaseCard.extend`
width: ${remcalc(49)};
min-width: ${remcalc(49)};
height: ${remcalc(46)};
display: flex;
flex: 0 0 ${remcalc(49)};
flex-direction: column;
justify-content: center;
align-items: center;
transition: background-color 0ms ease;
background-color: transparent;
border-width: 0;
border-radius: 0;
box-shadow: none;
${is('border')`
border-right-width: ${props => (props.border === 'right' ? remcalc(1) : 0)};
border-left-width: ${props => (props.border === 'left' ? remcalc(1) : 0)};
`};
${is('actionable', 'secondary')`
&:hover {
background-color: ${props => props.theme.primaryHover};
}
`};
${is('disabled')`
color: ${props => props.theme.text};
border-color: ${props => props.theme.grey};
box-shadow: none;
&:hover {
background-color: transparent;
}
`};
`;
const BaseMeta = BaseCard.extend`
height: ${remcalc(47)};
width: auto;
min-width: auto;
padding: 0 ${remcalc(12)};
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: center;
align-items: stretch;
align-conent: stretch;
background-color: transparent;
border-width: 0;
box-shadow: none;
`;
export const Box = ({ children, border, actionable, ...rest }) => {
const render = ({ secondary, transparent, parentCollapsed, ...value }) => {
// if parent is collapsed, show border
// if parent is not collapsed, only if this is secondary and not transparent
const showBorder = parentCollapsed || (secondary && !transparent);
const newBorder = showBorder && border;
return (
{children}
);
};
return {render};
};
Box.propTypes = {
...Card.propTypes,
children: PropTypes.node,
border: PropTypes.oneOf(['left', 'right'])
};
Box.defaultProps = {
...Card.defaultProps,
children: null,
border: null
};
export const Meta = ({ children, ...rest }) => (
{value => (
{children}
)}
);
const Header = ({ children, transparent, shadow, ...rest }) => {
const render = ({ secondary, tertiary, collapsed, ...value }) => {
const parentPrimary = !secondary && !tertiary;
// if transparent and parent is secondary, keep seconday
// if parent is secondary, keep being secondary or
// if parent is primary, become secondary
const isSecondary = transparent ? secondary : secondary || parentPrimary;
// if parent is primary, don't become transparent
const isTransparent = transparent || secondary || tertiary;
const newValue = {
...value,
parentCollapsed: collapsed,
secondary: isSecondary,
tertiary,
transparent: isTransparent,
collapsed: true,
shadow: Boolean(shadow)
};
return (
{children}
);
};
return {render};
};
Header.propTypes = {
children: PropTypes.node
};
Header.defaultProps = {
children: null
};
export default Baseline(Header);