ldx-widgets/src/components/toggle_button_array.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'
PropTypes = require 'prop-types'
ReactDOM = require 'react-dom'
ToggleButton = React.createFactory(require './toggle_button')

{div, button} = React.DOM

ToggleButtonArray = createClass
  
  displayName: 'ToggleButtonArray'

  propTypes:
    options: PropTypes.array.isRequired
    positionClass: PropTypes.string
    useTabs: PropTypes.bool
    compact: PropTypes.bool
    isInPopover: PropTypes.bool

  contextTypes:
    setTabErrorAnchors: PropTypes.func

  getInitialState: ->
    activeTab: @props.value
    isInPopover: no

  componentDidMount: ->
    
    anchors = {}
    anchors[refName] = ReactDOM.findDOMNode(ref.refs.errorAnchor) for refName, ref of @refs
    
    @context.setTabErrorAnchors
      anchors: anchors
      add: yes

  componentWillUnmount: ->
    
    anchors = {}
    anchors[refName] = ReactDOM.findDOMNode(ref.refs.errorAnchor) for refName, ref of @refs
    
    @context.setTabErrorAnchors 
      anchors: anchors
      add: no
  
  render: ->
    {options, value, compact, positionClass, useTabs, isInPopover} = @props

    className = 'toggle-array'
    className += ' compact' if compact
    className += " #{positionClass}" if positionClass?

    buttons = []
    buttons.push(
      ToggleButton {
        key: index
        ref: option.tabId
        useTabs: useTabs
        setFormData: @setFormData
        option: option
        options: options
        selected: option.tabId is value
        isInPopover: isInPopover or no
      }
    ) for option, index in options

    div {
      className: className
    }, buttons

  setFormData: (activeTab) ->
    @setState {activeTab}, ->
      @props.onChange?(activeTab, @props.detail)

  getValue: -> @state.activeTab


module.exports = ToggleButtonArray