flex.jsx

import React from 'react'
import styled from 'styled-components'

function flex(name, defaultValue) {
  return (props) => {
    let value = props[name]
    if (!value && typeof defaultValue === 'undefined') return ''
    if (!value) value = defaultValue
    return `flex-${name}: ${value};`
  }
}

function Flex(props) {
  const { className, children } = props
  return <div className={className}>{children}</div>
}

export default styled(Flex)`
  display: flex;

  ${flex('direction')}
  ${flex('basis')}

  > * { ${flex('grow')} }

  height: 100%;
  width: 100%;
`