ldx-widgets/src/components/ios_toggle_switch.coffee

widgets

React = require 'react'

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

IOSToggleSwitch = React.createClass
  
  displayName: 'IOSToggleSwitch'
  
  render: ->
    {checked, handleChange} = @props

    div {
      key: 'ios-toggle-switch'
      className: 'ios-toggle-switch'
      onClick: handleChange  # Need to put click event here because checkbox is hidden and does not get fired
    }, [
      input {
        key: 'input-switch'
        type: 'checkbox'
        name: 'ios-toggle-switch'
        checked: checked
        className: 'ios-toggle-switch-checkbox'
        onChange: handleChange  # Also need onChange here even though it doesn't get fired because browser will complain otherwise
      }
      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'
        }
      ]
    ]


module.exports = IOSToggleSwitch