ldx-widgets/src/components/toggle_button.coffee

widgets

React = require 'react'
PropTypes = require 'prop-types'
createClass = require 'create-react-class'
_ = require 'lodash'
{div, button} = React.DOM

TOGGLE_BTN_HEIGHT = 28
TOGGLE_TAB_HEIGHT = 37

ToggleButton = createClass
  
  displayName: 'ToggleButton'

  propTypes:
    isInPopover: PropTypes.bool.isRequired
    option: PropTypes.shape(
      label: PropTypes.string.isRequired
      tabId: PropTypes.oneOfType([
        PropTypes.string
        PropTypes.number
      ]).isRequired
      validationMsg: PropTypes.string
      title: PropTypes.string
    ).isRequired
    selected: PropTypes.bool.isRequired
    options: PropTypes.arrayOf(PropTypes.object)
    useTabs: PropTypes.bool.isRequired
    setFormData: PropTypes.func.isRequired

  contextTypes:
    toggleValidationError: PropTypes.func
    getValidationStatus: PropTypes.func

  render: ->
    {option, selected, options, useTabs} = @props
    {disabled, title, label, tabId} = option
    {getValidationStatus} = @context

    {error, forceShowAllErrors} = getValidationStatus(tabId)

    className = 'toggle-button-wrapper'
    className += ' invalid' if error? and forceShowAllErrors

    buttonClassName = if useTabs then 'toggle-tab' else 'toggle-button'
    buttonClassName += ' is-selected' if selected      

    width = 'auto'
    height = TOGGLE_BTN_HEIGHT

    if useTabs
      width = "#{100 / options.length}%"
      height = TOGGLE_TAB_HEIGHT

    div {
      className: className
      style: {width, height}
    }, [
      button {
        key: 'btn'
        className: buttonClassName
        onClick: @setFormData
        disabled: disabled
        title: title
      }, label
      div {
        className: 'field-errors-show'
        key: 'textInputErrorsShow'
        ref: 'errorAnchor'
        onMouseOver: @handleErrorMouseOver
        onMouseOut: @handleErrorMouseOut
      }
    ]

  setFormData: ->
    {option, setFormData} = @props
    
    setFormData option.tabId


  handleErrorMouseOver: ->
    {isInPopover, option} = @props
    @context.toggleValidationError 
      groupId: option.tabId
      status: on
      isInPopover: isInPopover

  handleErrorMouseOut: ->
    {isInPopover, option} = @props
    @context.toggleValidationError 
      groupId: option.tabId
      status: off
      isInPopover: isInPopover


module.exports = ToggleButton