ldx-widgets/src/components/info_pvr.coffee

widgets

React = require 'react'
_ = require 'lodash'

animationMixin = require '../mixins/animation_mixin'

Pvr = React.createFactory(require './pvr')
PvrInfoItem = React.createFactory(require './pvr_info_item')

{div} = React.DOM

###
Info Popover Props

@props.items
  array of objects containing at minimum a label and value attribute
  optionally a subLabel property can be passed

@props.itemHeight
  the height of each item row

@props.styleMixin
  object containing any style properties to mixin with and/or overrride the defaults
  note that width height are passed separately so they can have defaults and auto settings
  passing widt/height in this object could cause issues

@props.headerTitle
  optional title String for popover header

@props.headerClass
  optional class for popover header

@props.pvrProps
  properties germane to PVR wrapper: width, height, anchor, hAdjust, vAdjust, direction

###

InfoPvr = React.createClass
  
  displayName: 'InfoPvr'

  mixins: [animationMixin]

  enterStateStart:
    scale: .9
  enterStateEnd:
    scale: 1
  enterEasing: 'easeOutElastic'
  enterDuration: 600
  
  propTypes:
    close: React.PropTypes.func.isRequired  

  getDefaultProps: ->
    {
      items: []
      itemHeight: 35
      styleMixin: {}
      headerTitle: null
      headerClass: ''
      pvrProps: {}
    }

  render: ->
    {items, itemHeight, styleMixin, headerTitle, headerClass, close} = @props
    {scale} = @state
    style = {}

    pvrProps = _.cloneDeep @props.pvrProps

    @hasHeader = headerTitle?

    unless pvrProps.height?
      pvrProps.height = items.length * itemHeight + (items.length - 1) + 30
    if @hasHeader
      pvrProps.height += 34    

    _.assign style, styleMixin

    style.height = pvrProps.height

    if pvrProps.width
      style.width = pvrProps.width

    itemRows = []
    if items?
      for item in items
        itemRows.push PvrInfoItem {
          hasSubLabel: item.subLabel?
          item: item
          itemHeight: itemHeight
          key: item.key
        }

    if itemRows.length is 0
      itemRows = div {className: 'no-items'}, t 'No information to display'

    pvrProps.scale = scale
    pvrProps.close = close

    pvrProps.element = div {
      key: 'plain-pvr'
      className: 'plain-pvr'
      style: style
    }, [
        if @hasHeader
          div {
            key: 'header'
            className: "header plain-pvr-content-item #{headerClass}"
          }, headerTitle
        
        div {
          key: 'inner-rows'
          className: 'inner-rows'
        }, itemRows
      ]

    Pvr(pvrProps)

    
module.exports = InfoPvr