ldx-widgets/dist/components/select_pvr_option.js

widgets

(function() {
  var React, SelectPvrOption, createClass, div;

  React = require('react');

  createClass = require('create-react-class');

  div = React.DOM.div;


  /*&
    @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: function() {
      return {
        optionHeight: 0,
        hasSubLabel: false,
        isSelected: false,
        noWrapOptions: false,
        option: {
          isSubHeader: false,
          isIndented: false,
          disabled: false
        },
        children: []
      };
    },
    render: function() {
      var children, className, customClass, disabled, hasSubLabel, id, info, isIndented, isOpen, isSelected, isSubHeader, label, labelClass, lh, noWrapOptions, option, optionHandler, optionHeight, optionKey, ref, subLabel, subOptItems, subOptionsHeight, subOptionsToggleClass, value;
      ref = this.props, option = ref.option, isSelected = ref.isSelected, optionHeight = ref.optionHeight, hasSubLabel = ref.hasSubLabel, noWrapOptions = ref.noWrapOptions, children = ref.children, subOptionsHeight = ref.subOptionsHeight, isOpen = ref.isOpen;
      isSubHeader = option.isSubHeader, isIndented = option.isIndented, info = option.info, id = option.id, value = option.value, subLabel = option.subLabel, label = option.label, customClass = option.customClass, disabled = option.disabled;
      subOptItems = [];
      className = 'select-pvr-option';
      if (isSelected) {
        className += ' is-selected';
      }
      if (noWrapOptions) {
        className += ' no-wrap';
      }
      if (disabled) {
        className += ' is-disabled';
      }
      if (isSubHeader) {
        className += ' is-sub-header';
      }
      if (isIndented) {
        className += ' is-indented';
      }
      if (children.length) {
        className += ' has-sub-options';
      }
      if (isOpen) {
        className += ' sub-options-open';
      }
      if (customClass != null) {
        className += " " + customClass;
      }
      subOptionsToggleClass = 'sub-options';
      if (!isOpen) {
        subOptionsToggleClass += ' is-closed';
      }
      if (hasSubLabel) {
        className += ' has-sublabel';
        lh = optionHeight / 2;
      } else {
        lh = optionHeight;
      }
      labelClass = 'label';
      if (info != null) {
        labelClass += ' has-info';
      }
      optionKey = id || value;
      if (!isSubHeader) {
        optionHandler = this.handleChange;
      }
      if (children.length) {
        optionHandler = this.handleToggleSubOptions;
      }
      return div({
        key: optionKey,
        className: className,
        onClick: optionHandler
      }, [
        div({
          key: 'label',
          className: 'main-label',
          style: {
            height: optionHeight,
            lineHeight: lh + "px"
          }
        }, [
          info != null ? div({
            key: 'info',
            className: 'info'
          }, info) : void 0, label != null ? div({
            key: 'label',
            className: labelClass
          }, label) : void 0, subLabel != null ? div({
            key: 'sub-label',
            className: 'sub-label'
          }, subLabel) : void 0
        ]), children.length ? div({
          key: 'subOptions',
          className: subOptionsToggleClass,
          style: {
            height: isOpen ? subOptionsHeight : 0
          }
        }, children) : void 0
      ]);
    },
    handleChange: function(e) {
      var canDeselect, disabled, handleChange, isSelected, option, ref;
      e.stopPropagation();
      ref = this.props, handleChange = ref.handleChange, option = ref.option, isSelected = ref.isSelected, canDeselect = ref.canDeselect;
      disabled = option.disabled;
      if (!((isSelected && !canDeselect) || disabled)) {
        return typeof handleChange === "function" ? handleChange(option) : void 0;
      }
    },
    handleToggleSubOptions: function(e) {
      var adjust, ch, children, i, len, opt;
      e.stopPropagation();
      children = this.props.children;
      adjust = 0;
      for (i = 0, len = children.length; i < len; i++) {
        ch = children[i];
        adjust += ch.props.optionHeight + 1;
      }
      opt = this.props.isOpen ? null : this.props.option;
      adjust = opt != null ? adjust : 0;
      return this.props.setOpenSubOptions(opt, adjust);
    }
  });

  module.exports = SelectPvrOption;

}).call(this);