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

widgets

React = require 'react'
createClass = require 'create-react-class'
assign = require 'lodash/assign'
omit = require 'lodash/omit'
TextInput2 = React.createFactory(require '../text_input_2')
Textarea = React.createFactory(require '../textarea')
SelectInput2 = React.createFactory(require '../select_input_2')
MultiSelect = React.createFactory(require '../multi_select')
SelectInputCustom = React.createFactory(require '../select_input_custom')


{div, label} = require 'react-dom-factories'

###
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 = 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, value, options, jsonPath} = @props

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

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

    # Clone the props and add a ref
    # Ensure a value is always passed
    # Ensure options is always passed for the select types
    # Do not pass the className down as it will mess up the styles
    additionalProps = 
      ref: 'input'
      value: value or ''

    additionalProps.options = options or [] if type in ['select', 'selectinputcustom', 'multiselect']
    
    inputProps = omit(assign({}, @props, additionalProps), ['className'])

    input = switch type 
      when 'textarea' then Textarea inputProps
      when 'select' then SelectInput2 inputProps
      when 'selectinputcustom' then SelectInputCustom inputProps
      when 'multiselect' then MultiSelect inputProps
      else 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: -> 
    @refs.input.getValue()

module.exports = GridFormInput