ldx-widgets/src/components/select_pvr_option.coffee

widgets

React = require 'react'
createClass = require 'create-react-class'

{div} = require 'react-dom-factories'

###&
  @general
  Individual options and sub-options for SelectPvr

  @props.children - [Array] - Optional
  Options contained underneath a section header. Header will assume collapse/expand duties.

  @props.noWrapOptions - [Boolean] - Optional
  option to turn off text wrapping on the menu's options

  @props.optionHeight - [Number] - Optional
  the height of the options in the list

  @props.canDeselect - [Boolean] - Optional
  option to de-select the selected option - will allow us call handle click for the selected option
&###

SelectPvrOption = createClass
  
  displayName: 'SelectPvrOption'

  getDefaultProps: ->
     {
      optionHeight: 0
      hasSubLabel: no
      isSelected: no
      noWrapOptions: no
      option:
        isSubHeader: no
        isIndented: no
        disabled: no
      children: []
    }

  render: ->
    {option, isSelected, optionHeight, hasSubLabel, noWrapOptions, children, subOptionsHeight, isOpen} = @props
    {isSubHeader, isIndented, info, id, value, subLabel, label, customClass, disabled} = option
    subOptItems = []

    className = 'select-pvr-option'
    className += ' is-selected' if isSelected
    className += ' no-wrap' if noWrapOptions
    className += ' is-disabled' if disabled
    className += ' is-sub-header' if isSubHeader
    className += ' is-indented' if isIndented
    className += ' has-sub-options' if children.length
    className += ' sub-options-open' if isOpen
    className += " #{customClass}" if customClass?

    subOptionsToggleClass = 'sub-options'
    subOptionsToggleClass += ' is-closed' unless isOpen

    if hasSubLabel
      className += ' has-sublabel' 
      lh = optionHeight / 2
    else
      lh = optionHeight

    labelClass = 'label'
    labelClass += ' has-info' if info?

    optionKey = id or value

    optionHandler = @handleChange if not isSubHeader
    optionHandler = @handleToggleSubOptions if children.length
    
    div {
      key: optionKey
      className: className
      onClick: optionHandler
    }, [
      div {
        key: 'label'
        className: 'main-label'
        style:
          height: optionHeight
          lineHeight: "#{lh}px"
      }, [
        div {
          key: 'info'
          className: 'info'
        }, info if info?
        div {
          key: 'label'
          className: labelClass
        }, label if label?
        div {
          key: 'sub-label'
          className: 'sub-label'
        }, subLabel if subLabel?
      ]
      div {
        key: 'subOptions'
        className: subOptionsToggleClass
        style:
          height: if isOpen then subOptionsHeight else 0
      }, children if children.length
    ]

  handleChange: (e) -> 
    e.stopPropagation()
    {handleChange, option, isSelected, canDeselect} = @props
    {disabled} = option
    
    handleChange?(option) unless (isSelected and not canDeselect) or disabled

  handleToggleSubOptions: (e) ->
    e.stopPropagation()
    {children} = @props
    adjust = 0

    for ch in children
      adjust += ch.props.optionHeight + 1
      
    opt = if @props.isOpen then null else @props.option
    adjust = if opt? then adjust else 0

    @props.setOpenSubOptions(opt, adjust)

module.exports = SelectPvrOption