select-dropdown.cjsx

{PropTypes} = React

Option = React.createClass
  displayName: 'SelectDropdown.Option'
  propTypes:
    selectedContent: PropTypes.node.isRequired
    value: PropTypes.any.isRequired
    children: PropTypes.arrayOf(PropTypes.node).isRequired
    select: PropTypes.func
    isSelected: PropTypes.bool

  render: ->
    classes = classNames(selected: @props.isSelected)

    <li className={classes} key={@props.key}>
      <a
        href='javascript: void 0'
        onClick={@props.select}
      >
        {
          if @props.isSelected
            <span>
              <i className='icon-ok' />
              &nbsp;
            </span>
        }
        {@props.children}
      </a>
    </li>

SelectDropdown = React.createClass
  displayName: 'SelectDropdown'
  propTypes:
    align: PropTypes.oneOf(['left', 'right'])
    className: PropTypes.string
    children: PropTypes.arrayOf(Option).isRequired
    defaultValue: PropTypes.any
    onSelect: PropTypes.func

  # -- Life cycle --

  getInitialState: ->
    value: @props.defaultValue or null

  componentDidUpdate: (prevProps, prevState) ->
    if @props.onSelect and prevState.value isnt @state.value
      @props.onSelect(@state.value)

  # -- Handlers --

  select: (value) ->
    @setState(value: value)

  # -- Rendering --

  getSelectedContent: ->
    value = @state.value
    item = if value? then _.find(@props.children, (item) -> item.props.value is value) else null
    result = if item? then item.props.selectedContent or item.content else null
    return result

  render: ->
    alignment = switch @props.align
      when 'right' then 'pull-right'
      when 'left' then 'pull-left'
      else ''

    className = classNames(
      @props.className,
      'btn-group',
      alignment
    )

    optionsByKey = {}
    @props.children.forEach (option, index) =>
      isSelected = option.props.value is @state.value
      key = option.props.value
      option = React.cloneElement option, {
        isSelected,
        select: @select.bind(@, option.props.value)
      }
      console.warning(
        'WARNING: Two options share the same `value` prop, which is being used a key.'
      ) if optionsByKey[key]
      optionsByKey[key] = option

    options = React.addons.createFragment(optionsByKey)

    <div className={className}>
      <a className='btn dropdown-toggle' href='#' data-toggle='dropdown'>
        {@getSelectedContent()}
        &nbsp;
        <i className='icon-caret-down' />
      </a>
      <ul className='dropdown-menu'>
        {options}
      </ul>
    </div>


Paydirt.Components.SelectDropdown = SelectDropdown
Paydirt.Components.SelectDropdown.Option = Option