Declaritive Flexible Layouts

layout.ts

import * as React from 'react'
import * as css from 'csstips'
import { style } from 'typestyle'
import { classes } from './utils'
import { CLIENT_RENEG_LIMIT } from 'tls'

const defaultSpacing = 10

export const FlexContainer = props => {
  if (!props.children) {
    console.log('err')
  }
  return (
    <div
      id={props.id}
      className={classes(props.className, style({ ...props.type }))}
      style={{ ...{ display: 'flex' }, ...props.style }}
    >
      {props.children && props.children.map ? (
        props.children.map((child, i) => {
          const spacing = props.spacing !== undefined ? props.spacing : defaultSpacing
          const boxPadding =
            props.type == css.horizontal
              ? css.padding(0, i == props.children.length - 1 ? 0 : spacing, 0, 0)
              : css.padding(0, 0, i == props.children.length - 1 ? 0 : spacing, 0)
          return (
            <Flex key={i} style={{ ...boxPadding }} {...(child || {}).props}>
              {child}
            </Flex>
          )
        })
      ) : (
        <div />
      )}
    </div>
  )
}

export const FlexContainerWrap = props => {
  return <FlexContainer style={{ flexWrap: 'wrap' }}>{props.children}</FlexContainer>
}

export const Flex = props => {
  return (
    <div style={{ ...props.style, flex: (props.style && props.style.flex) || 1 }}>
      {props.children}
    </div>
  )
}

export const Horizontal = props => <FlexContainer {...props} type={css.horizontal} />

export const Vertical = props => <FlexContainer {...props} type={css.vertical} />

export const MaxWidthIsland = props => (
  <div
    className={classes(
      props.className,
      style({
        flexBasis: 'auto',
        flexShrink: 0,
        margin: '0 auto',
        maxWidth: props.width || 960,
        width: '100%'
      })
    )}
    style={props.style}
  >
    {props.children}
  </div>
)

export const CenterCenter = props => (
  <div {...props} className={classes(props.className, style(css.centerCenter))} style={props.style}>
    {props.children}
  </div>
)