ldx-widgets/dist/components/info_modal.js

widgets

(function() {
  var InfoModal, PvrInfoItem, React, _, animationMixin, button, div, ref;

  React = require('react');

  _ = require('lodash');

  animationMixin = require('../mixins/animation_mixin');

  PvrInfoItem = React.createFactory(require('./pvr_info_item'));

  ref = React.DOM, div = ref.div, button = ref.button;


  /*
  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 = React.createClass({
    displayName: 'InfoModal',
    mixins: [animationMixin],
    enterStateStart: {
      scale: 0.9
    },
    enterStateEnd: {
      scale: 1
    },
    enterEasing: 'easeOutBounce',
    enterDuration: 600,
    propTypes: {
      close: React.PropTypes.func.isRequired
    },
    getDefaultProps: function() {
      return {
        height: 'auto',
        items: [],
        itemHeight: 35,
        styleMixin: {},
        headerTitle: null,
        headerClass: '',
        className: 'modal info-modal'
      };
    },
    render: function() {
      var className, close, headerClass, headerTitle, height, i, item, itemHeight, itemRows, items, len, ref1, scale, style, styleMixin, width;
      ref1 = this.props, items = ref1.items, height = ref1.height, width = ref1.width, itemHeight = ref1.itemHeight, styleMixin = ref1.styleMixin, className = ref1.className, headerTitle = ref1.headerTitle, headerClass = ref1.headerClass, close = ref1.close;
      scale = this.state.scale;
      style = {};
      if (className != null) {
        className = className;
      }
      if (items != null) {
        if (height === 'auto') {
          height = items.length * itemHeight + (items.length - 1);
        }
      }
      if (headerTitle != null) {
        height += 44;
      }
      _.assign(style, styleMixin);
      style.height = height + 45;
      if (width) {
        style.width = width;
      }
      itemRows = [];
      if (items != null) {
        for (i = 0, len = items.length; i < len; i++) {
          item = items[i];
          itemRows.push(PvrInfoItem({
            hasSubLabel: item.subLabel != null,
            item: item,
            itemHeight: itemHeight,
            key: item.label
          }));
        }
      }
      if (itemRows.length === 0) {
        style.height += itemHeight;
        itemRows = div({
          className: 'no-items'
        }, t('No information to display'));
      }
      return div({
        className: className,
        style: style
      }, [
        div({
          key: 'header',
          className: "modal-header"
        }, [
          headerTitle != null ? div({
            className: 'title',
            key: 'title'
          }, headerTitle) : void 0, button({
            className: 'done prmy',
            key: 'done',
            onClick: close
          }, t('Done'))
        ]), div({
          key: 'inner-rows',
          className: 'inner-rows'
        }, itemRows)
      ]);
    }
  });

  module.exports = InfoModal;

}).call(this);