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

widgets

React = require 'react'
_ = require 'lodash'
CheckboxInput = React.createFactory(require '../checkbox_input')
iOSToggle = React.createFactory(require '../ios_toggle_switch')
{makeGuid} = require '../../utils'

{div, label} = React.DOM

###
Select Props

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

@props.checkboxLabel - OPTIONAL - string
  The value of the label that will display to the right of the checkbox

@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.checkboxColumnClass - OPTIONAL - string
  optional class that will be added to the checkbox column

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

GridFormCheckBox = React.createClass
  displayName: 'GridFormCheckBox'

  getDefaultProps: ->
    labelColumnClass: 'col-3-12'
    checkboxColumnClass: 'col-9-12' 
    className: 'grid grid-pad'
    formLabel: null
    useIOSToggle: no

  componentWillMount: ->
    @id = makeGuid()

  render: ->
    {formLabel, checkboxLabel, className, labelColumnClass, checkboxColumnClass, isFieldRequired, useIOSToggle} = @props

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

    # if checkboxLabel then label will be on the right side of the checkbox and label
    checkboxProps.wrapperLabel = checkboxLabel or ''

    # if formLabel then the label will be on the left and will have label & checkbox as a normal form row
    # label in left column and checkbox in right column
    if formLabel?
      labelClass = 'form-label'
      if isFieldRequired then labelClass += ' is-required'

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

    
      checkboxProps.className = 'checkbox-input row-height'

    if useIOSToggle
      control = iOSToggle checkboxProps
    else
      control = CheckboxInput checkboxProps

    div {
      className: className
    }, [
      labelField if formLabel?
      div {
        key: 'select-field'
        className: checkboxColumnClass
      }, control
    ]

  getValue: ->
    @refs.checkbox.getValue()

module.exports = GridFormCheckBox