ldx-widgets/src/components/grid_form/grid_form_input.coffee

widgets

React = require 'react'
_ = require 'lodash'
TextInput2 = React.createFactory(require '../text_input_2')
Textarea = React.createFactory(require '../textarea')
SelectInput2 = React.createFactory(require '../select_input_2')


{div, label} = React.DOM

###
Select Props

@props.type - OPTIONAL - string
  The value that will determine whether to display a text input or select input - default is text

@props.formLabel - OPTIONAL - string
  The value of the label that will display to the left of the input

@props.className - OPTIONAL - string - default 'grid grid-pad'
  optional class to be added the main div

@props.labelColumnClass - OPTIONAL - string
  optional class that will be added to the label column

@props.inputColumnClass - OPTIONAL - string
  optional class that will be added to the input column

@props.inputTextClass - OPTIONAL - string
  optional class that will be added to the input element

@props.isFieldRequired - OPTIONAL - boolean
  optional boolean that will display the red asterisk if true

@props.fullRow - OPTIONAL - boolean
  optional boolean that will determine whether to display the input in a full row with  or without a label

@props.children - OPTIONAL - array
  optional array of children 
###

GridFormInput = React.createClass
  
  displayName: 'GridFormInput'

  getDefaultProps: ->
    type: 'text'
    labelColumnClass: 'col-3-12'
    inputColumnClass: 'col-9-12' 
    className: 'grid grid-pad'
    fullRow: yes
    formLabel: null
    children: []

  render: ->
    {type, formLabel, className, labelColumnClass, inputColumnClass, inputTextClass, isFieldRequired, fullRow, children} = @props

    if formLabel?
      labelClass = 'form-label'
      if isFieldRequired then labelClass += ' is-required'

      labelField = div {
        key: 'label'
        className: labelColumnClass
      }, label {className: labelClass}, formLabel

    # we do not want to pass the className down as it will mess up the styles
    inputProps = _.omit(_.assign({}, @props, {ref: 'input'}), ['className'])

    # Ensure the input always gets it's required value prop
    inputProps.value = '' unless inputProps.value? 

    switch type 
      when 'textarea' 
        inputProps = _.omit(_.assign({}, @props, {ref: 'textarea'}), ['className', 'type'])
        input = Textarea inputProps
      when 'select'
        input = SelectInput2 inputProps
      else
        input = TextInput2 inputProps

    inputCell = div {
      key: 'input'
      className: inputColumnClass
    }, input

    # This is a full row of a form with a label
    if fullRow and formLabel?
      content = [
        labelField
        inputCell
      ].concat children

      div {
        className: className
      }, content
    # This is a full row w/ out a label
    else if fullRow
      content = [
        inputCell
      ].concat children

      div {
        className: className
      }, content
    # This is a single cell within a row
    else
      inputCell

  getValue: -> 
    {type} = @props
    
    switch type
      when 'textarea' 
        @refs.textarea.getTextareaValue()
      else
        @refs.input.getValue()

module.exports = GridFormInput