@vtex/styleguide/lib/Button/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Spinner = require('../Spinner');

var _Spinner2 = _interopRequireDefault(_Spinner);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Button = function (_Component) {
  _inherits(Button, _Component);

  function Button() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, Button);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
      !_this.props.disabled && _this.props.onClick && _this.props.onClick(event);
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(Button, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          size = _props.size,
          block = _props.block,
          variation = _props.variation,
          disabled = _props.disabled,
          icon = _props.icon,
          children = _props.children,
          isLoading = _props.isLoading;

      var Tag = icon ? 'div' : 'button';

      var classes = 'vtex-button bw1 ba fw5 ttu br2 fw4 v-mid relative ';
      var loaderSize = 15;

      classes += icon ? 'icon-button dib ' : '';

      switch (size) {
        case 'small':
          classes += icon ? 'pa3 ' : 'pv3 ph5 ';
          classes += 'f6 ';
          break;
        default:
        case 'regular':
          classes += icon ? 'pa4 ' : 'pv4 ph6 ';
          classes += 'f5 ';
          loaderSize = 20;
          break;
        case 'large':
          classes += icon ? 'pa5 ' : 'pv5 ph7 ';
          classes += 'f4 ';
          loaderSize = 25;
          break;
      }

      switch (variation) {
        default:
        case 'primary':
          {
            if (disabled) {
              classes += 'bg-light-gray b--light-gray gray ';
            } else {
              classes += 'bg-blue b--blue white hover-bg-heavy-blue hover-b--heavy-blue ';
            }
            break;
          }
        case 'secondary':
          {
            if (disabled) {
              classes += 'bg-light-silver silver b--light-silver ';
            } else {
              classes += 'bg-washed-blue b--washed-blue blue hover-bg-light-blue hover-b--light-blue hover-heavy-blue ';
            }
            break;
          }
        case 'tertiary':
          {
            if (disabled) {
              classes += 'bg-transparent b--transparent silver ';
            } else {
              classes += 'bg-transparent b--transparent blue hover-b--transparent hover-heavy-blue ';
            }
            break;
          }
        case 'danger':
          {
            if (disabled) {
              classes += 'bg-light-silver silver b--light-silver ';
            } else {
              classes += 'bg-red b--red white ';
            }
            break;
          }
      }

      if (!disabled) {
        classes += 'pointer ';
      }

      if (block) {
        classes += 'w-100 ';
      }

      return _react2.default.createElement(
        Tag,
        {
          id: this.props.id,
          autoFocus: icon ? undefined : this.props.autoFocus,
          disabled: icon ? undefined : this.props.disabled,
          name: icon ? undefined : this.props.name,
          type: icon ? undefined : this.props.type,
          value: icon ? undefined : this.props.value,
          className: classes,
          onClick: this.handleClick,
          onMouseEnter: this.props.onMouseEnter,
          onMouseLeave: this.props.onMouseLeave,
          onMouseOver: this.props.onMouseOver,
          onMouseOut: this.props.onMouseOut,
          onMouseUp: this.props.onMouseUp,
          onMouseDown: this.props.onMouseDown,
          ref: this.props.ref,
          style: icon ? { fontSize: 0 } : {}
        },
        isLoading ? _react2.default.createElement(
          _react2.default.Fragment,
          null,
          _react2.default.createElement(
            'span',
            {
              className: 'left-0 w-100 absolute flex justify-center items-baseline'
            },
            _react2.default.createElement(_Spinner2.default, {
              secondary: variation === 'primary' || variation === 'danger',
              size: loaderSize
            })
          ),
          _react2.default.createElement(
            'span',
            { style: { opacity: 0 } },
            children
          )
        ) : children
      );
    }
  }]);

  return Button;
}(_react.Component);

Button.defaultProps = {
  size: 'regular',
  block: false,
  variation: 'primary',
  disabled: false,
  autoFocus: false,
  icon: false,
  type: 'button',
  isLoading: false
};

Button.propTypes = {
  /** Button size  */
  size: _propTypes2.default.oneOf(['small', 'regular', 'large']),
  /** Button prominence variation */
  variation: _propTypes2.default.oneOf(['primary', 'secondary', 'tertiary', 'danger']),
  /** Block style */
  block: _propTypes2.default.bool,
  /** Loading state */
  isLoading: _propTypes2.default.bool,
  /** If you are using just an Icon component inside, use this as true */
  icon: _propTypes2.default.bool,
  /** (Button spec attribute) */
  id: _propTypes2.default.string,
  /** (Button spec attribute) */
  autoFocus: _propTypes2.default.bool,
  /** (Button spec attribute) */
  autoComplete: _propTypes2.default.string,
  /** (Button spec attribute) */
  disabled: _propTypes2.default.bool,
  /** (Button spec attribute) */
  name: _propTypes2.default.string,
  /** (Button spec attribute) */
  type: _propTypes2.default.string,
  /** (Button spec attribute) */
  value: _propTypes2.default.string,
  /** Label of the Button */
  children: _propTypes2.default.node.isRequired,
  /** onClick event */
  onClick: _propTypes2.default.func,
  /** onMouseEnter event */
  onMouseEnter: _propTypes2.default.func,
  /** onMouseLeave event */
  onMouseLeave: _propTypes2.default.func,
  /** onMouseOver event */
  onMouseOver: _propTypes2.default.func,
  /** onMouseOut event */
  onMouseOut: _propTypes2.default.func,
  /** onMouseUp event */
  onMouseUp: _propTypes2.default.func,
  /** onMouseDown event */
  onMouseDown: _propTypes2.default.func,
  /** ref function */
  ref: _propTypes2.default.func
};

exports.default = Button;