ldx-widgets/dist/components/info_pvr.js

widgets

(function() {
  var InfoPvr, Pvr, PvrInfoItem, React, _, animationMixin, div;

  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.div;


  /*
  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.className
    optional class for whole popover. default is 'plain-pvr'. 'plain-pvr' class should be 
    included if a custom class is passed, i.e., className: 'plain-pvr custom-class'
  
  @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: function() {
      return {
        items: [],
        itemHeight: 35,
        styleMixin: {},
        headerTitle: null,
        headerClass: '',
        pvrProps: {},
        className: 'plain-pvr'
      };
    },
    render: function() {
      var className, close, headerClass, headerTitle, i, item, itemHeight, itemRows, items, len, pvrProps, ref, scale, style, styleMixin;
      ref = this.props, items = ref.items, itemHeight = ref.itemHeight, styleMixin = ref.styleMixin, className = ref.className, headerTitle = ref.headerTitle, headerClass = ref.headerClass, close = ref.close;
      scale = this.state.scale;
      style = {};
      pvrProps = _.cloneDeep(this.props.pvrProps);
      if (className != null) {
        className = className;
      }
      this.hasHeader = headerTitle != null;
      if (pvrProps.height == null) {
        pvrProps.height = items.length * itemHeight + (items.length - 1) + 30;
      }
      if (this.hasHeader) {
        pvrProps.height += 34;
      }
      _.assign(style, styleMixin);
      style.height = pvrProps.height;
      if (pvrProps.width) {
        style.width = pvrProps.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.key
          }));
        }
      }
      if (itemRows.length === 0) {
        itemRows = div({
          className: 'no-items'
        }, t('No information to display'));
      }
      pvrProps.scale = scale;
      pvrProps.close = close;
      pvrProps.element = div({
        key: 'plain-pvr',
        className: className,
        style: style
      }, [
        this.hasHeader ? div({
          key: 'header',
          className: "header plain-pvr-content-item " + headerClass
        }, headerTitle) : void 0, div({
          key: 'inner-rows',
          className: 'inner-rows'
        }, itemRows)
      ]);
      return Pvr(pvrProps);
    }
  });

  module.exports = InfoPvr;

}).call(this);