Magic Input Component

magic_input.js.jsx.coffee

MagicInput = React.createClass

  getInitialState: ->
    value = @getValue()
    if value == ''
      empty = true
    else
      empty = false
    {empty: empty}

  onChange: (e) ->
    state = @props.binding[0].state
    value = e.target.value
    Sonar.changeByArray state, @path(), value
    @props.onChange(e) if @props.onChange
    @props.binding[0].setState state

  path: ->
    @props.binding[1].split('.')

  getValue: ->
    value = @props.binding[0].state
    path = @path()
    i = 0
    while i < path.length
      value = value[path[i]]
      i++
    value

  handleKeyDown: (key) ->
    @props.onKeyDown(key) if @props.onKeyDown
    if key.keyCode == 13
      key.preventDefault()
      @props.onEnter(key) if @props.onEnter

  render: ->
    value = this.getValue()
    input = React.createElement 'input',
      onKeyDown: this.handleKeyDown
      type: 'input'
      onBlur: this.onBlur
      onChange: this.onChange
      value: value