ldx-widgets/dist/components/multi_select_option.js

widgets

(function() {
  var MultiSelectOption, React, button, div, li, ref;

  React = require('react');

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

  MultiSelectOption = React.createClass({
    displayName: 'MultiSelectOption',
    getDefaultProps: function() {
      return {
        option: {},
        setValues: function() {}
      };
    },
    render: function() {
      var allowDefault, className, defaultClass, disabled, isActive, isTheDefault, onBlur, option, ref1, tabIndex;
      ref1 = this.props, option = ref1.option, allowDefault = ref1.allowDefault, isActive = ref1.isActive, isTheDefault = ref1.isTheDefault, disabled = ref1.disabled, tabIndex = ref1.tabIndex, onBlur = ref1.onBlur;
      className = 'multiselect-option';
      if (isActive && option.isSelected) {
        className += ' is-active';
      }
      defaultClass = 'multiselect-default';
      if (isTheDefault) {
        defaultClass += ' is-selected';
      }
      return li({
        className: className,
        onClick: isActive && !disabled ? this.toggleSelect : function() {}
      }, [
        isActive && !disabled ? button({
          key: 'toggle',
          ref: 'toggleBtn',
          className: option.isSelected ? 'btn-plus-minus minus left' : 'btn-plus-minus plus left',
          tabIndex: tabIndex,
          onBlur: this.onBlur
        }) : void 0, div({
          key: 'label',
          className: 'multiselect-option-label',
          style: {
            left: isActive ? 25 : 5
          }
        }, option.label), allowDefault && option.isSelected && !disabled ? button({
          key: 'default',
          className: defaultClass,
          onClick: this.setAsDefault,
          tabIndex: tabIndex
        }, ['default']) : void 0
      ]);
    },
    onBlur: function() {
      var onBlur;
      onBlur = this.props.onBlur;
      if (onBlur == null) {
        return;
      }
      return setTimeout(function() {
        return onBlur();
      }, 15);
    },
    toggleSelect: function(e) {
      var base, isSelected;
      if (typeof (base = e.nativeEvent).stopImmediatePropagation === "function") {
        base.stopImmediatePropagation();
      }
      isSelected = !this.props.option.isSelected;
      if (!isSelected) {
        this.props.onRemove(this.props.option);
      }
      return this.props.setValues(this.props.option);
    },
    setAsDefault: function(e) {
      var base;
      e.stopPropagation();
      if (typeof (base = e.nativeEvent).stopImmediatePropagation === "function") {
        base.stopImmediatePropagation();
      }
      return this.props.setDefault(this.props.option);
    }
  });

  module.exports = MultiSelectOption;

}).call(this);