calendar_thing.coffee

RD = React.DOM

class @ThingSearchResults extends React.Component
  @defaultProps =
    things: []

  @propTypes:
    select_handler: React.PropTypes.func
    deselect_handler: React.PropTypes.func

  constructor: (props)->
    super props
    @state =
      things: @props.things
      selected_thing: null

  click_handler: (search_thing, evt)=>
    last_selected = @state.selected_thing
    if last_selected
      # unselect old selected thing
      @setState selected_thing: null
      last_selected.setState selected: false

      @props.deselect_handler?(this, last_selected, evt)
    else
      # set new selected thing
      @setState selected_thing: search_thing
      search_thing.setState selected: true

      @props.select_handler?(this, search_thing, evt)

  selected_thing: ->
    @state.selected_thing

  render: ->
    # haml, I miss you.
    if @state.things.length == 0
      RD.table {className: 'tables'},
        RD.thead {},
          RD.tr {},
            RD.th {}, "No results. Type the word you're looking for in the search field."
    else
      RD.table {className: 'tables adaptive'},
        RD.thead {},
          RD.tr {},
            RD.th {colSpan: 2}, "Click on a thing here, then click on a slot in the calendar."

        RD.tbody {},
          for thing in @state.things
            React.createElement ThingSearchResult, key: thing.id, thing: thing, click_handler: @click_handler