ldx-widgets/src/components/info_modal.coffee

widgets

React = require 'react'
PropTypes = require 'prop-types'
createClass = require 'create-react-class'
_ = require 'lodash'

animationMixin = require '../mixins/animation_mixin'
PvrInfoItem = React.createFactory(require './pvr_info_item')


{div, button} = React.DOM

###
Info Modal 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 modal header

@props.headerClass
  optional class for modal header

@props.className
  optional class for whole modal. default is 'modal info-modal'. 'modal info-modal' class should be 
  included if a custom class is passed, i.e., className: 'modal info-modal custom-class'

###


InfoModal = createClass
  
  displayName: 'InfoModal'

  mixins: [animationMixin]

  enterStateStart:
    scale: 0.9
  enterStateEnd:
    scale: 1
  enterEasing: 'easeOutBounce'
  enterDuration: 600

  propTypes:
    close: PropTypes.func.isRequired 

  getDefaultProps: ->
    {
      height: 'auto'
      items: []
      itemHeight: 35
      styleMixin: {}
      headerTitle: null
      headerClass: ''
      className: 'modal info-modal'
    }
  
  render: ->
    {items, height, width, itemHeight, styleMixin, className, headerTitle, headerClass, close} = @props
    {scale} = @state
    style = {}

    className = className if className?

    # if items
    if items?
      height = items.length * itemHeight + (items.length - 1) if height is 'auto'
    # if header
    if headerTitle?
      height += 44    
   

    _.assign style, styleMixin

    style.height = height + 45
    style.width = width if width

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

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

    div {
      className: className
      style: style
    }, [
        div {
          key: 'header'
          className: "modal-header"
        }, [
          div {
            className: 'title'
            key: 'title'
          }, headerTitle if headerTitle?
          button {
            className: 'done prmy'
            key: 'done'
            onClick: close
          }, t 'Done'
        ]
        div {
          key: 'inner-rows'
          className: 'inner-rows'
        }, itemRows
      ]
     

module.exports = InfoModal