ldx-widgets/dist/components/toggle_button.js

widgets

(function() {
  var PropTypes, React, TOGGLE_BTN_HEIGHT, TOGGLE_TAB_HEIGHT, ToggleButton, _, button, createClass, div, ref;

  React = require('react');

  PropTypes = require('prop-types');

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

  _ = require('lodash');

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

  TOGGLE_BTN_HEIGHT = 28;

  TOGGLE_TAB_HEIGHT = 37;

  ToggleButton = createClass({
    displayName: 'ToggleButton',
    propTypes: {
      isInPopover: PropTypes.bool.isRequired,
      option: PropTypes.shape({
        label: PropTypes.string.isRequired,
        tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
        validationMsg: PropTypes.string,
        title: PropTypes.string
      }).isRequired,
      selected: PropTypes.bool.isRequired,
      options: PropTypes.arrayOf(PropTypes.object),
      useTabs: PropTypes.bool.isRequired,
      setFormData: PropTypes.func.isRequired
    },
    contextTypes: {
      toggleValidationError: PropTypes.func,
      getValidationStatus: PropTypes.func
    },
    render: function() {
      var buttonClassName, className, disabled, error, forceShowAllErrors, getValidationStatus, height, label, option, options, ref1, ref2, selected, tabId, title, useTabs, width;
      ref1 = this.props, option = ref1.option, selected = ref1.selected, options = ref1.options, useTabs = ref1.useTabs;
      disabled = option.disabled, title = option.title, label = option.label, tabId = option.tabId;
      getValidationStatus = this.context.getValidationStatus;
      ref2 = getValidationStatus(tabId), error = ref2.error, forceShowAllErrors = ref2.forceShowAllErrors;
      className = 'toggle-button-wrapper';
      if ((error != null) && forceShowAllErrors) {
        className += ' invalid';
      }
      buttonClassName = useTabs ? 'toggle-tab' : 'toggle-button';
      if (selected) {
        buttonClassName += ' is-selected';
      }
      width = 'auto';
      height = TOGGLE_BTN_HEIGHT;
      if (useTabs) {
        width = (100 / options.length) + "%";
        height = TOGGLE_TAB_HEIGHT;
      }
      return div({
        className: className,
        style: {
          width: width,
          height: height
        }
      }, [
        button({
          key: 'btn',
          className: buttonClassName,
          onClick: this.setFormData,
          disabled: disabled,
          title: title
        }, label), div({
          className: 'field-errors-show',
          key: 'textInputErrorsShow',
          ref: 'errorAnchor',
          onMouseOver: this.handleErrorMouseOver,
          onMouseOut: this.handleErrorMouseOut
        })
      ]);
    },
    setFormData: function() {
      var option, ref1, setFormData;
      ref1 = this.props, option = ref1.option, setFormData = ref1.setFormData;
      return setFormData(option.tabId);
    },
    handleErrorMouseOver: function() {
      var isInPopover, option, ref1;
      ref1 = this.props, isInPopover = ref1.isInPopover, option = ref1.option;
      return this.context.toggleValidationError({
        groupId: option.tabId,
        status: true,
        isInPopover: isInPopover
      });
    },
    handleErrorMouseOut: function() {
      var isInPopover, option, ref1;
      ref1 = this.props, isInPopover = ref1.isInPopover, option = ref1.option;
      return this.context.toggleValidationError({
        groupId: option.tabId,
        status: false,
        isInPopover: isInPopover
      });
    }
  });

  module.exports = ToggleButton;

}).call(this);