My First React Component

AudioFileStepSelector.coffee

# My First React Component
# Added to this Gist for posterity.
# Extracted from https://github.com/ministrycentered/transposr/commit/fa616871914ac16b72d0d1b035a08e01e337bd07
# January 08, 2014

{ div, input } = React.DOM

AudioFileStepSelector = React.createClass
  getInitialState: ->
    halfSteps: 2

  incrementHalfSteps: ->
    @_dipsatchHalfStepChange(@state.halfSteps + 1)

  decrementHalfSteps: ->
    @_dipsatchHalfStepChange(@state.halfSteps - 1)

  # Private

  _halfStepRange: [-11..11]

  _dipsatchHalfStepChange: (halfSteps) ->
    if halfSteps in @_halfStepRange
      @setState( halfSteps: halfSteps )

  render: ->
    (input { name: 'song_key', type: 'text', value: @state.halfSteps }, [
      (div { className: 'dec num_button', onClick: @decrementHalfSteps }, ['-']),
      (div { className: 'inc num_button', onClick: @incrementHalfSteps }, ['+']) ])


$(document).on 'ready page:load', ->
  React.renderComponent AudioFileStepSelector({}), document.getElementById('js-audio-steps-selector')