import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import { theme } from 'styled-tools' ; import ConditionalWrap from 'conditional-wrap' ; import { BoxProps as ReakitBoxProps } from 'reakit/ts/Box/Box' ; import styled , { css } from '../styled' ; import { Box } from '../primitives' ; import TableBody , { TableBodyProps } from './TableBody' ; import TableCaption , { TableCaptionProps } from './TableCaption' ; import TableCell , { TableCellProps } from './TableCell' ; import TableFoot , { TableFootProps } from './TableFoot' ; import TableHead , { TableHeadProps } from './TableHead' ; import TableHeadCell , { TableHeadCellProps } from './TableHeadCell' ; import TableRow , { TableRowProps } from './TableRow' ; import _Table from './styled' ; const OuterBorder = styled ( Box ) < { isResponsive ? : boolean ; responsiveBreakpoint ? : string ; } > `
  border: 1px solid ${ theme ( 'fannypack.Table.borderColor' ) };
  border-radius: 5px;
  padding: 0.25rem 0.5rem;
  ${ props => props . isResponsive && css `
      @media screen and (max-width: ${ ( props ) => theme ( `fannypack.layout.${ props . responsiveBreakpoint }Breakpoint` ) }px) {
        padding: 0px;
      }
    ` };
` ; export type LocalTableProps = { /** Title of the table to be read by screen readers. */ a11yTitle ? : string ; children : React . ReactNode ; /** Renders an outer border for the table */ hasBorder ? : boolean ; isHoverable ? : boolean ; isResponsive ? : boolean ; isStriped ? : boolean ; isVerticallyCentered ? : boolean ; responsiveBreakpoint ? : string ; } ; export type TableProps = ReakitBoxProps & LocalTableProps ; export type TableComponents = { Body : React . FunctionComponent < TableBodyProps > ; Caption : React . FunctionComponent < TableCaptionProps > ; Cell : React . FunctionComponent < TableCellProps > ; Foot : React . FunctionComponent < TableFootProps > ; Head : React . FunctionComponent < TableHeadProps > ; HeadCell : React . FunctionComponent < TableHeadCellProps > ; Row : React . FunctionComponent < TableRowProps > ; } ; export const Table = ( { a11yTitle , children , hasBorder , isResponsive , responsiveBreakpoint , ... props } ) => ( < ConditionalWrap condition = { hasBorder } wrap = { ( children ) => ( < OuterBorder isResponsive = { isResponsive } responsiveBreakpoint = { responsiveBreakpoint } > { children } < /OuterBorder>)}> < _Table use = "table" aria - label = { a11yTitle } isResponsive = { isResponsive } responsiveBreakpoint = { responsiveBreakpoint } { ... props } > { children } < /_Table> < /ConditionalWrap>); Table . Body = TableBody ; Table . Caption = TableCaption ; Table . Cell = TableCell ; Table . Foot = TableFoot ; Table . Head = TableHead ; Table . HeadCell = TableHeadCell ; Table . Row = TableRow ; export const tablePropTypes = { a11yTitle : PropTypes . string , children : PropTypes . node . isRequired , hasBorder : PropTypes . bool , isHoverable : PropTypes . bool , isResponsive : PropTypes . bool , isStriped : PropTypes . bool , isVerticallyCentered : PropTypes . bool , responsiveBreakpoint : PropTypes . string } ; Table . propTypes = tablePropTypes ; export const tableDefaultProps = { a11yTitle : undefined , hasBorder : false , isHoverable : false , isResponsive : false , isStriped : false , isVerticallyCentered : false , responsiveBreakpoint : 'mobile' } ; Table . defaultProps = tableDefaultProps ; const C = Table ; export default C ;