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

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

"use strict";

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

var _loaderSize;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

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

var _Spinner2 = _interopRequireDefault(_Spinner);

var _withForwardedRef = require("../../modules/withForwardedRef");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var SIZE = {
  SMALL: 'small',
  REGULAR: 'regular',
  LARGE: 'large'
};
var VARIATION = {
  PLAIN: 'plain',
  INVERTED: 'inverted',
  DANGER: 'danger'
};
var loaderSize = (_loaderSize = {}, _loaderSize[SIZE.SMALL] = 15, _loaderSize[SIZE.REGULAR] = 20, _loaderSize[SIZE.LARGE] = 25, _loaderSize);
var propTypes = {
  /** Button size  */
  size: _propTypes2.default.oneOf(Object.values(SIZE)),

  /** Button prominence variation */
  variation: _propTypes2.default.oneOf(Object.values(VARIATION)),

  /** [DEPRECATED] If you are using just an Icon component inside, use this as true */
  icon: _propTypes2.default.bool,

  /** Loading state */
  isLoading: _propTypes2.default.bool,

  /** @ignore For internal use
   * Sets reduced paddings in order to keep the button squareish if it
   * only has an icon  */
  iconOnly: _propTypes2.default.bool,

  /** (Button spec attribute) */
  id: _propTypes2.default.string,

  /** Data attribute */
  testId: _propTypes2.default.string,

  /** (Button spec attribute) */
  autoFocus: _propTypes2.default.bool,

  /** (Button spec attribute) */
  autoComplete: _propTypes2.default.string,

  /** (Button spec attribute) */
  disabled: _propTypes2.default.bool,

  /** @ignore Forwarded Ref */
  forwardedRef: _withForwardedRef.refShape,

  /** (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,

  /** URL for link mode. Converts the button internally to a link. */
  href: _propTypes2.default.string,

  /** 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,

  /** onFocus event */
  onFocus: _propTypes2.default.func,

  /** onBlur event */
  onBlur: _propTypes2.default.func,

  /** Link spec */
  target: _propTypes2.default.string,

  /** Link spec */
  rel: _propTypes2.default.string,

  /** Link spec */
  referrerPolicy: _propTypes2.default.string,

  /** Link spec */
  download: _propTypes2.default.string,

  /** Disables label wrapping */
  noWrap: _propTypes2.default.bool
};

var ButtonPlain = function ButtonPlain(props) {
  var handleClick = function handleClick(event) {
    !props.disabled && !props.isLoading && props.onClick && props.onClick(event);
  };

  (0, _react.useEffect)(function () {
    if (props.icon) {
      console.warn('Button: The prop "icon" of the "Button" component has been deprecated, and will be removed in a future version. Please use the component "ButtonWithIcon" instead');
    }
  }, [props.icon]);
  var size = props.size,
      variation = props.variation,
      children = props.children,
      icon = props.icon,
      isLoading = props.isLoading,
      href = props.href,
      target = props.target,
      rel = props.rel,
      referrerPolicy = props.referrerPolicy,
      download = props.download,
      noWrap = props.noWrap;
  var disabled = props.disabled || isLoading;
  var iconOnly = icon || props.iconOnly;
  var horizontalPadding = iconOnly ? 1 : 2;
  var horizontalCompensation = "nr" + horizontalPadding + " nl" + horizontalPadding + " ";
  var classes = (0, _classnames2.default)('vtex-button bw1 ba fw5 v-mid relative pa0 br2 bn', horizontalCompensation, {
    't-action--small': size === SIZE.SMALL,
    't-action': size === SIZE.REGULAR,
    't-action--large': size === SIZE.LARGE
  }, {
    'icon-button dib': iconOnly
  }, {
    'bg-transparent b--transparent c-disabled': disabled,
    'bg-transparent b--transparent c-action-primary hover-b--transparent hover-bg-action-secondary hover-b--action-secondary': !disabled && variation === VARIATION.PLAIN,
    'bg-transparent b--transparent c-on-base--inverted': !disabled && variation === VARIATION.INVERTED,
    'bg-transparent b--transparent c-danger hover-bg-danger--faded hover-b--danger--faded': !disabled && variation === VARIATION.DANGER
  }, {
    pointer: !disabled
  }, {
    'inline-flex items-center no-underline': href
  });
  var labelClasses = (0, _classnames2.default)('flex items-center justify-center h-100 pv1 ttn ', "ph" + horizontalPadding, {
    nowrap: noWrap
  });
  var style = {};

  if (iconOnly) {
    style.fontSize = 0;
  }

  var linkModeProps = {
    target: target,
    rel: rel,
    referrerPolicy: referrerPolicy,
    download: download
  };
  var Element = href ? 'a' : 'button';
  return _react2.default.createElement(Element, _extends({
    id: props.id,
    "data-testid": props.testId,
    autoFocus: iconOnly ? undefined : props.autoFocus,
    disabled: iconOnly ? undefined : props.disabled,
    name: iconOnly ? undefined : props.name,
    value: iconOnly ? undefined : props.value,
    tabIndex: 0,
    className: classes,
    href: href,
    onClick: handleClick,
    onMouseEnter: props.onMouseEnter,
    onMouseLeave: props.onMouseLeave,
    onMouseOver: props.onMouseOver,
    onMouseOut: props.onMouseOut,
    onMouseUp: props.onMouseUp,
    onMouseDown: props.onMouseDown,
    onFocus: props.onFocus,
    onBlur: props.onBlur,
    ref: props.forwardedRef,
    style: style // Button-mode exclusive props
    ,
    type: href ? undefined : props.type // Link-mode exclusive props

  }, href && linkModeProps), isLoading ? _react2.default.createElement(_react.Fragment, null, _react2.default.createElement("span", {
    className: "top-0 left-0 w-100 h-100 absolute flex justify-center items-center"
  }, _react2.default.createElement(_Spinner2.default, {
    secondary: variation === VARIATION.DANGER,
    size: loaderSize[size]
  })), _react2.default.createElement("span", {
    className: labelClasses + " o-0"
  }, children)) : _react2.default.createElement("div", {
    className: labelClasses
  }, children));
};

ButtonPlain.defaultProps = {
  size: SIZE.REGULAR,
  variation: VARIATION.PLAIN,
  disabled: false,
  autoFocus: false,
  icon: false,
  type: 'button',
  isLoading: false
};
ButtonPlain.propTypes = propTypes;
exports.default = (0, _withForwardedRef.withForwardedRef)(ButtonPlain);