semantic-ui-react/dist/commonjs/elements/Button/Button.js

The official Semantic-UI-React integration.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _isNil2 = require('lodash/isNil');

var _isNil3 = _interopRequireDefault(_isNil2);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _lib = require('../../lib');

var _Icon = require('../Icon/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _Label = require('../Label/Label');

var _Label2 = _interopRequireDefault(_Label);

var _ButtonContent = require('./ButtonContent');

var _ButtonContent2 = _interopRequireDefault(_ButtonContent);

var _ButtonGroup = require('./ButtonGroup');

var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup);

var _ButtonOr = require('./ButtonOr');

var _ButtonOr2 = _interopRequireDefault(_ButtonOr);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var debug = (0, _lib.makeDebugger)('button');

/**
 * A Button indicates a possible user action.
 * @see Form
 * @see Icon
 * @see Label
 */

var Button = function (_Component) {
  (0, _inherits3.default)(Button, _Component);

  function Button() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, Button);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.computeElementType = function () {
      var _this$props = _this.props,
          attached = _this$props.attached,
          label = _this$props.label;


      if (!(0, _isNil3.default)(attached) || !(0, _isNil3.default)(label)) return 'div';
    }, _this.computeTabIndex = function (ElementType) {
      var _this$props2 = _this.props,
          disabled = _this$props2.disabled,
          tabIndex = _this$props2.tabIndex;


      if (!(0, _isNil3.default)(tabIndex)) return tabIndex;
      if (disabled) return -1;
      if (ElementType === 'div') return 0;
    }, _this.handleClick = function (e) {
      var _this$props3 = _this.props,
          disabled = _this$props3.disabled,
          onClick = _this$props3.onClick;


      if (disabled) {
        e.preventDefault();
        return;
      }

      if (onClick) onClick(e, _this.props);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(Button, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          active = _props.active,
          animated = _props.animated,
          attached = _props.attached,
          basic = _props.basic,
          children = _props.children,
          circular = _props.circular,
          className = _props.className,
          color = _props.color,
          compact = _props.compact,
          content = _props.content,
          disabled = _props.disabled,
          floated = _props.floated,
          fluid = _props.fluid,
          icon = _props.icon,
          inverted = _props.inverted,
          label = _props.label,
          labelPosition = _props.labelPosition,
          loading = _props.loading,
          negative = _props.negative,
          positive = _props.positive,
          primary = _props.primary,
          secondary = _props.secondary,
          size = _props.size,
          toggle = _props.toggle;


      var baseClasses = (0, _classnames2.default)(color, size, (0, _lib.useKeyOnly)(active, 'active'), (0, _lib.useKeyOnly)(basic, 'basic'), (0, _lib.useKeyOnly)(circular, 'circular'), (0, _lib.useKeyOnly)(compact, 'compact'), (0, _lib.useKeyOnly)(fluid, 'fluid'), (0, _lib.useKeyOnly)(icon === true || icon && (labelPosition || !children && !content), 'icon'), (0, _lib.useKeyOnly)(inverted, 'inverted'), (0, _lib.useKeyOnly)(loading, 'loading'), (0, _lib.useKeyOnly)(negative, 'negative'), (0, _lib.useKeyOnly)(positive, 'positive'), (0, _lib.useKeyOnly)(primary, 'primary'), (0, _lib.useKeyOnly)(secondary, 'secondary'), (0, _lib.useKeyOnly)(toggle, 'toggle'), (0, _lib.useKeyOrValueAndKey)(animated, 'animated'), (0, _lib.useKeyOrValueAndKey)(attached, 'attached'));
      var labeledClasses = (0, _classnames2.default)((0, _lib.useKeyOrValueAndKey)(labelPosition || !!label, 'labeled'));
      var wrapperClasses = (0, _classnames2.default)((0, _lib.useKeyOnly)(disabled, 'disabled'), (0, _lib.useValueAndKey)(floated, 'floated'));

      var rest = (0, _lib.getUnhandledProps)(Button, this.props);
      var ElementType = (0, _lib.getElementType)(Button, this.props, this.computeElementType);
      var tabIndex = this.computeTabIndex(ElementType);

      if (!(0, _isNil3.default)(children)) {
        var _classes = (0, _classnames2.default)('ui', baseClasses, wrapperClasses, labeledClasses, 'button', className);
        debug('render children:', { classes: _classes });

        return _react2.default.createElement(
          ElementType,
          (0, _extends3.default)({}, rest, { className: _classes, tabIndex: tabIndex, onClick: this.handleClick }),
          children
        );
      }

      var labelElement = _Label2.default.create(label, {
        basic: true,
        pointing: labelPosition === 'left' ? 'right' : 'left'
      });

      if (labelElement) {
        var _classes2 = (0, _classnames2.default)('ui', baseClasses, 'button', className);
        var containerClasses = (0, _classnames2.default)('ui', labeledClasses, 'button', className, wrapperClasses);

        debug('render label:', { classes: _classes2, containerClasses: containerClasses }, this.props);

        return _react2.default.createElement(
          ElementType,
          (0, _extends3.default)({}, rest, { className: containerClasses, onClick: this.handleClick }),
          labelPosition === 'left' && labelElement,
          _react2.default.createElement(
            'button',
            { className: _classes2, tabIndex: tabIndex },
            _Icon2.default.create(icon),
            ' ',
            content
          ),
          (labelPosition === 'right' || !labelPosition) && labelElement
        );
      }

      if (!(0, _isNil3.default)(icon) && (0, _isNil3.default)(label)) {
        var _classes3 = (0, _classnames2.default)('ui', labeledClasses, baseClasses, 'button', className, wrapperClasses);
        debug('render icon && !label:', { classes: _classes3 });

        return _react2.default.createElement(
          ElementType,
          (0, _extends3.default)({}, rest, { className: _classes3, tabIndex: tabIndex, onClick: this.handleClick }),
          _Icon2.default.create(icon),
          ' ',
          content
        );
      }

      var classes = (0, _classnames2.default)('ui', labeledClasses, baseClasses, 'button', className, wrapperClasses);
      debug('render default:', { classes: classes });

      return _react2.default.createElement(
        ElementType,
        (0, _extends3.default)({}, rest, { className: classes, tabIndex: tabIndex, onClick: this.handleClick }),
        content
      );
    }
  }]);
  return Button;
}(_react.Component);

Button.defaultProps = {
  as: 'button'
};
Button._meta = {
  name: 'Button',
  type: _lib.META.TYPES.ELEMENT
};
Button.Content = _ButtonContent2.default;
Button.Group = _ButtonGroup2.default;
Button.Or = _ButtonOr2.default;
process.env.NODE_ENV !== "production" ? Button.propTypes = {
  /** An element type to render as (string or function). */
  as: _lib.customPropTypes.as,

  /** A button can show it is currently the active user selection. */
  active: _react.PropTypes.bool,

  /** A button can animate to show hidden content. */
  animated: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.oneOf(['fade', 'vertical'])]),

  /** A button can be attached to the top or bottom of other content. */
  attached: _react.PropTypes.oneOf(['left', 'right', 'top', 'bottom']),

  /** A basic button is less pronounced. */
  basic: _react.PropTypes.bool,

  /** Primary content. */
  children: _lib.customPropTypes.every([_react.PropTypes.node, _lib.customPropTypes.disallow(['label']), _lib.customPropTypes.givenProps({
    icon: _react.PropTypes.oneOfType([_react.PropTypes.string.isRequired, _react.PropTypes.object.isRequired, _react.PropTypes.element.isRequired])
  }, _lib.customPropTypes.disallow(['icon']))]),

  /** Additional classes. */
  className: _react.PropTypes.string,

  /** A button can be circular. */
  circular: _react.PropTypes.bool,

  /** A button can have different colors */
  color: _react.PropTypes.oneOf([].concat((0, _toConsumableArray3.default)(_lib.SUI.COLORS), ['facebook', 'google plus', 'instagram', 'linkedin', 'twitter', 'vk', 'youtube'])),

  /** A button can reduce its padding to fit into tighter spaces. */
  compact: _react.PropTypes.bool,

  /** Shorthand for primary content. */
  content: _lib.customPropTypes.contentShorthand,

  /** A button can show it is currently unable to be interacted with. */
  disabled: _react.PropTypes.bool,

  /** A button can be aligned to the left or right of its container. */
  floated: _react.PropTypes.oneOf(_lib.SUI.FLOATS),

  /** A button can take the width of its container. */
  fluid: _react.PropTypes.bool,

  /** Add an Icon by name, props object, or pass an <Icon />. */
  icon: _lib.customPropTypes.some([_react.PropTypes.bool, _react.PropTypes.string, _react.PropTypes.object, _react.PropTypes.element]),

  /** A button can be formatted to appear on dark backgrounds. */
  inverted: _react.PropTypes.bool,

  /** Add a Label by text, props object, or pass a <Label />. */
  label: _lib.customPropTypes.some([_react.PropTypes.string, _react.PropTypes.object, _react.PropTypes.element]),

  /** A labeled button can format a Label or Icon to appear on the left or right. */
  labelPosition: _react.PropTypes.oneOf(['right', 'left']),

  /** A button can show a loading indicator. */
  loading: _react.PropTypes.bool,

  /** A button can hint towards a negative consequence. */
  negative: _react.PropTypes.bool,

  /**
   * Called after user's click.
   * @param {SyntheticEvent} event - React's original SyntheticEvent.
   * @param {object} data - All props.
   */
  onClick: _react.PropTypes.func,

  /** A button can hint towards a positive consequence. */
  positive: _react.PropTypes.bool,

  /** A button can be formatted to show different levels of emphasis. */
  primary: _react.PropTypes.bool,

  /** A button can be formatted to show different levels of emphasis. */
  secondary: _react.PropTypes.bool,

  /** A button can have different sizes. */
  size: _react.PropTypes.oneOf(_lib.SUI.SIZES),

  /** A button can receive focus. */
  tabIndex: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),

  /** A button can be formatted to toggle on and off. */
  toggle: _react.PropTypes.bool
} : void 0;
Button.handledProps = ['active', 'animated', 'as', 'attached', 'basic', 'children', 'circular', 'className', 'color', 'compact', 'content', 'disabled', 'floated', 'fluid', 'icon', 'inverted', 'label', 'labelPosition', 'loading', 'negative', 'onClick', 'positive', 'primary', 'secondary', 'size', 'tabIndex', 'toggle'];


Button.create = (0, _lib.createShorthandFactory)(Button, function (value) {
  return { content: value };
});

exports.default = Button;