ldx-widgets/src/components/multi_select_option.coffee

widgets

React = require 'react'

{li, button, div} = React.DOM

MultiSelectOption = React.createClass
  
  displayName: 'MultiSelectOption'

  render: ->
    {option, allowDefault, isActive, isTheDefault, disabled, tabIndex} = @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: 'clear'
        className: 'btn-plus-minus minus left'
        tabIndex: tabIndex
      } if option.isSelected and isActive and not disabled
      button {
        key: 'add'
        className: 'btn-plus-minus plus left'
        tabIndex: tabIndex
      } if not option.isSelected and 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
    ]

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

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

module.exports = MultiSelectOption