ldx-widgets/src/components/ios_toggle_switch.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'

{button, input, label, span} = React.DOM

IOSToggleSwitch = createClass
  
  displayName: 'IOSToggleSwitch'

  getDefaultProps: ->
    tabIndex: -1
    disabled: no

  # Transferring props to state is generally an anti-pattern in React
  # However, in most form controls, the native html input stores the value
  # Here, there is no native control, so using state as the temporary holder of the value
  getInitialState: ->
    checked: @props.checked

  # Since checked is tracked by state, update state if checked changes externally
  componentWillReceiveProps: (nextProps) ->
    {checked} = nextProps
    @setState {checked} if checked isnt @state.checked
  
  render: ->
    {tabIndex, disabled} = @props
    {checked} = @state

    className = 'ios-toggle-switch'
    className += ' is-checked' if checked

    button {
      key: 'ios-toggle-switch'
      className: className
      onClick: @handleChange  # Need to put click event here because checkbox is hidden and does not get fired
      tabIndex: tabIndex
      disabled: disabled
    }, [
      label {
        key: 'switch-label'
        className: 'ios-toggle-switch-label'
        htmlFor: 'myios-toggle-switch'
      }, [
        span {
          key: 'switch-inner'
          className: 'ios-toggle-switch-inner'
        }
        span {
          key: 'switch-switch'
          className: 'ios-toggle-switch-switch'
        }
      ]
    ]

  handleChange: ->
    {checked} = @state
    {onChange} = @props
    
    @setState 
      checked: not checked
    , onChange

  getValue: -> @state.checked


module.exports = IOSToggleSwitch