ldx-widgets/src/components/multi_select_option.coffee

widgets

React = require 'react'

{li, button, div} = React.DOM

MultiSelectOption = React.createClass
  
  displayName: 'MultiSelectOption'

  getDefaultProps: ->
    {
      option: {}
      setValues: ->
    }

  render: ->
    {option, allowDefault, isActive, isTheDefault, disabled, tabIndex, onBlur} = @props

    className = 'multiselect-option'
    className += ' is-active' if isActive and option.isSelected

    defaultClass = 'multiselect-default'
    defaultClass += ' is-selected' if isTheDefault

    li {
      className: className
      onClick: if isActive and not disabled then @toggleSelect else ->
    }, [
      button {
        key: 'toggle'
        ref: 'toggleBtn'
        className: if option.isSelected then 'btn-plus-minus minus left' else 'btn-plus-minus plus left'
        tabIndex: tabIndex
        onBlur: @onBlur
      } if isActive and not disabled
      div {
        key: 'label'
        className: 'multiselect-option-label'
        style:
          left: if isActive then 25 else 5
      }, option.label
      button {
        key: 'default'
        className: defaultClass
        onClick: @setAsDefault
        tabIndex: tabIndex
      }, ['default'] if allowDefault and option.isSelected and not disabled
    ]

  onBlur: ->
    {onBlur} = @props
    
    return unless onBlur?
    
    setTimeout ->
      do onBlur
    , 15

  toggleSelect: (e) ->
    e.nativeEvent.stopImmediatePropagation?()
    isSelected = not @props.option.isSelected
    if not isSelected then @props.onRemove(@props.option)
    @props.setValues(@props.option)

  setAsDefault: (e) ->
    e.stopPropagation()
    e.nativeEvent.stopImmediatePropagation?()
    @props.setDefault(@props.option)

module.exports = MultiSelectOption