React Searchbox in CoffeeScript

gistfile1.coffee

# global $

React = require('react')

class Drawer extends React.Component
  @defaultProps: ->
    payload: null,
    drawerOpened: false

  notFound: ->
    (@props.payload == false) &&
    React.DOM.div
      className: 'c-not_found'
      'Nothing found'

  render: ->
    @props.drawerOpened &&
      React.DOM.div
        className: 'c-search-drawer'
        @notFound()
        @props.payload && React.DOM.div
          dangerouslySetInnerHTML:
            __html: @props.payload

class Icon extends React.Component
  cssStyles:
    default: '_search'
    loading: '_loading'
    opened: '_opened'
    closed: '_closed'

  @defaultProps: ->
    icon: null,
    onClick: null

  iconClass: ->
    console.log(@props)
    @cssStyles[@props.state] || @cssStyles.default

  render: ->
    React.DOM.div
      className: "c-ikon #{this.props.className}"
      onClick: @props.onClick
      React.DOM.div
        className: @iconClass()

 class Form extends React.Component
  @defaultProps: ->
    onSubmit: null,
    placeholder: 'Name or Barcode',
    invalidInput: null

   invalidInput: ->
    @props.invalidInput &&
    React.DOM.div
      className: 'c-search-error'
      '3 letters'

   render: ->
    React.DOM.form
      className: 'c-search-form'
      onSubmit: @props.onSubmit
      React.DOM.div
        className: 'c-search-section'
        @invalidInput()
        React.DOM.input
          className: 'c-search-input'
          type: 'text'
          onChange: @props.onChange
          placeholder: @props.placeholder
      React.DOM.button
        className: 'c-search-button'
        type: 'submit'
        'Search'

 class Search extends React.Component
  constructor: (props) ->
    super props
    @state =
      state: 'default',
      payload: null,
      invalidInput: false,
      inputValue: '',
      drawerOpened: false

  @defaultProps: ->
    placeholder: 'Barcode'

  onIconClick: =>
    if @state.state == 'opened'
      @setState drawerOpened: false
      @setState state: if @state.payload then 'closed' else 'default'
    else if @state.state == 'closed'
      @setState
        state: 'opened',
        drawerOpened: true

  onFormSubmit: (e) =>
    e.preventDefault()
    if (@state.inputValue.length < 3)
      @setState
        invalidInput: true
      e.preventDefault()
    else
      @setState
        state: 'loading'

  onFormChange: (e) =>
    inputValue = e.target.value
    @setState
      inputValue: inputValue
    if(@state.invalidInput && inputValue.length >= 3)
      @setState
        invalidInput: false

   documentFound: (e, payload) =>
    drawerOpened = if payload? then true else false
    state = if drawerOpened then 'opened' else 'default'
    @setState
      state: state,
      payload: payload,
      drawerOpened: drawerOpened

  documentNotFound: =>
    @setState
      state: 'opened'
      payload: false
      drawerOpened: true

  componentDidMount: ->
    $(document).on 'found', @documentFound
    $(document).on 'not_found', @documentNotFound

  componentWillUnmount: ->
    $(document).off 'found'
    $(document).off 'not_found'

  render: ->
    React.DOM.div
      className: "c-search"
      React.createElement Form,
        placeholder: @props.placeholder
        invalidInput: @state.invalidInput
        inputValue: @state.inputValue
        onChange: @onFormChange
        onSubmit: @onFormSubmit
      React.createElement Icon,
        className: "c-search-icon"
        state: @state.state
        onClick: @onIconClick
      React.createElement Drawer,
        payload: @state.payload
        drawerOpened: @state.drawerOpened

module.exports = Search