import React from 'react';
import { Broadcast, Subscriber } from 'joy-react-broadcast';
import isBoolean from 'lodash.isboolean';
import styled, { css } from 'styled-components';
import is from 'styled-is';
import remcalc from 'remcalc';
import Baseline from '../baseline';
import * as breakpoints from '../breakpoints';
import { Arrow as ArrowIcon } from '../icons';
const { styled: query } = breakpoints;
const handleBreakpoint = bp => props => {
const num = Number(props[bp]);
const hidden = (isBoolean(props[bp]) && !props[bp]) || num === 0;
const width = remcalc(props[bp]);
if (!hidden && Number.isNaN(num)) {
return null;
}
return `
width: ${width};
display: table-cell;
${hidden &&
`
display: none;
`};
`;
};
const ColumnBorder = css`
${is('hasBorder')`
border-${props => props.hasBorder}-width: ${remcalc(1)} !important;
`};
`;
const Column = css`
border-width: ${remcalc(1)};
border-style: solid;
border-color: ${props => props.theme.grey};
border-spacing: 0;
${is('disabled')`
border-color: ${props => props.theme.grey};
`};
white-space: nowrap;
box-sizing: border-box;
padding: 0 ${remcalc(24)};
height: ${remcalc(60)};
${handleBreakpoint('xs')};
${query.small`
${handleBreakpoint('sm')};
`};
${query.medium`
${handleBreakpoint('md')};
`};
${query.xlargeUp`
${handleBreakpoint('lg')};
`};
${is('actionable')`
cursor: pointer;
user-select: none;
`};
${is('baseline')`
vertical-align: baseline;
`};
${is('sub')`
vertical-align: sub;
`};
${is('text-top')`
vertical-align: text-top;
`};
${is('text-bottom')`
vertical-align: text-bottom;
`};
${is('middle')`
vertical-align: middle;
`};
${is('top')`
vertical-align: top;
`};
${is('bottom')`
vertical-align: bottom;
`};
${is('center')`
text-align: center;
`};
${is('left')`
text-align: left;
`};
${is('right')`
text-align: right;
`};
`;
const BaseTable = styled.table`
overflow: hidden;
border-spacing: 0;
border-collapse: separate;
table-layout: fixed;
width: 100%;
max-width: 100%;
`;
const BaseTfoot = styled.tfoot`
width: 100%;
background: ${props => props.theme.background};
th:first-child {
border-bottom-left-radius: ${remcalc(4)};
}
th:last-child {
border-bottom-right-radius: ${remcalc(4)};
}
th {
border-top-width: 0;
}
`;
const BaseThead = styled.thead`
width: 100%;
background: ${props => props.theme.background};
th:first-child {
border-top-left-radius: ${remcalc(4)};
}
th:last-child {
border-top-right-radius: ${remcalc(4)};
}
`;
const BaseTbody = styled.tbody`
width: 100%;
${is('shadow')`
box-shadow: ${props => props.theme.shadows.bottomShadow};
`};
${is('actionable')`
cursor: pointer;
`};
${is('disabled')`
border-color: ${props => props.theme.grey};
`};
tr:first-child td {
border-top: none;
}
`;
const BaseTh = styled.th`
${Column};
height: ${remcalc(42)};
color: ${props => props.theme.greyLight};
font-weight: 500;
${is('selected')`
color: ${props => props.theme.text};
font-weight: bold;
`};
&:not(:first-child) {
border-left-width: 0;
}
&:not(:last-child) {
border-right-width: 0;
}
${ColumnBorder};
`;
const BaseTd = styled.td`
${Column};
border-bottom-width: 0;
&:not(:first-child) {
border-left-width: 0;
}
&:not(:last-child) {
border-right-width: 0;
}
${is('bold')`
font-weight: bold
`};
${is('selected')`
border-color: ${props => props.theme.primary};
background-color: rgba(59, 70, 204, 0.05);
`};
${ColumnBorder};
`;
const BaseTr = styled.tr`
display: table-row;
color: ${props => props.theme.text};
background-color: ${props => props.theme.white};
box-shadow: 0 ${remcalc(2)} 0 rgba(0, 0, 0, 0.05);
box-sizing: border-box;
&:last-child {
box-shadow: none;
}
${is('selected')`
box-shadow: none;
`};
&:last-child td {
border-bottom-width: ${remcalc(1)};
}
${is('actionable')`
cursor: pointer;
`};
${is('disabled')`
background-color: ${props => props.theme.disabled};
color: ${props => props.theme.text};
cursor: default;
`};
/* override background when thead > tr */
${is('header')`
color: ${props => props.theme.text};
background-color: transparent;
border: none;
box-shadow: none;
`};
`;
/**
* @example ./usage.md
*/
export default Baseline(({ children, ...rest }) => (
{children}
));
const Propagate = ({ children, ...rest }) => (
{({ disabled, header, selected } = {}) => (
{children({ disabled, header, selected, ...rest })}
)}
);
export const Thead = Baseline(({ children, ...rest }) => (
{value => (
{children}
)}
));
export const Tfoot = Baseline(({ children, ...rest }) => (
{value => (
{children}
)}
));
export const Tr = Baseline(({ children, ...rest }) => (
{value => (
{children}
)}
));
export const Th = Baseline(({ children, ...rest }) => (
{({ showSort, sortOrder, header, ...value }) => (
{children}
{!showSort || !header ? null : (
)}
)}
));
export const Tbody = Baseline(({ children, ...rest }) => (
{value => (
{children}
)}
));
export const Td = Baseline(({ children, ...rest }) => (
{value => (
{children}
)}
));