import '../vendor/gridforms.css'

import React, {cloneElement, Children, PropTypes} from 'react'

let classNames = (...args) => args.filter(cn => !!cn).join(' ')

export let GridForm = ({children, className, component: Component, ...props}) =>
  <Component {...props} className={classNames('grid-form', className)}>
    {children}
  </Component>

GridForm.propTypes = {
  component: PropTypes.any
}

GridForm.defaultProps = {
  component: 'form'
}

export let Fieldset = ({children, legend, ...props}) =>
  <fieldset {...props}>
    {legend && <legend>{legend}</legend>}
    {children}
  </fieldset>

Fieldset.propTypes = {
  name: PropTypes.string.isRequired
}

export let Row = ({children, className}) => {
  let span = 0
  Children.forEach(children, child => span += Number(child.props.span))
  return <div data-row-span={span} className={className}>
    {children}
  </div>
}

export let Field = ({children, className, span}) =>
 <div data-field-span={span} className={className}>
   {children}
 </div>

Field.propTypes = {
  span: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ])
}

Field.defaultProps = {
  span: '1'
}

import '../vendor/gridforms.css'

import React, {cloneElement, Children, PropTypes} from 'react'

let classNames = (...args) => args.filter(cn => !!cn).join(' ')

export let GridForm = React.createClass({
  getDefaultProps() {
    return {
      component: 'form'
    }
  },
  render() {
    let {children, className, component: Component, ...props} = this.props
    return <Component {...props} className={classNames('grid-form', className)}>
      {children}
    </Component>
  }
})

export let Fieldset = React.createClass({
  render() {
    let {children, legend, ...props} = this.props
    return <fieldset {...props}>
      {legend && <legend>{legend}</legend>}
      {children}
    </fieldset>
  }
})

export let Row = React.createClass({
  render() {
    let {children, className} = this.props
    let span = 0
    Children.forEach(children, child => span += Number(child.props.span))
    return <div data-row-span={span} className={className}>
      {children}
    </div>
  }
})

export let Field = React.createClass({
  propTypes: {
    span: PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.string
    ])
  },
  getDefaultProps() {
    return {
      span: 1
    }
  },
  render() {
    let {children, className, span} = this.props
   return <div data-field-span={span} className={className}>
     {children}
   </div>
  }
})

Use a regular React component impl until hot reloading issues are resolved
Use a regular React component impl until hot reloading issues are resolved

Hot reloading a function component curently blows any state within it away
