pouncejs/dist/esm/components/Button/Button.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import * as React from 'react';
import AbstractButton from '../AbstractButton';
import useButtonStyles from './useButtonStyles';
import Spinner from '../Spinner';
import Icon from '../Icon';

/**
 * Extends <a href="/#/Box">Box</a>
 *
 * The core re-usable button that you will use in the app.
 */
export var Button = /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'large' : _ref$size,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'solid' : _ref$variant,
      _ref$variantColor = _ref.variantColor,
      variantColor = _ref$variantColor === void 0 ? 'blue-400' : _ref$variantColor,
      _ref$loading = _ref.loading,
      loading = _ref$loading === void 0 ? false : _ref$loading,
      _ref$fullWidth = _ref.fullWidth,
      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
      _ref$iconAlignment = _ref.iconAlignment,
      iconAlignment = _ref$iconAlignment === void 0 ? 'left' : _ref$iconAlignment,
      active = _ref.active,
      icon = _ref.icon,
      children = _ref.children,
      rest = _objectWithoutPropertiesLoose(_ref, ["size", "variant", "variantColor", "loading", "fullWidth", "iconAlignment", "active", "icon", "children"]);

  var styles = useButtonStyles({
    variantColor: variantColor,
    variant: variant,
    size: size
  });
  var iconSize = size === 'large' ? 'medium' : 'small';
  var iconMargin = size === 'large' ? 2 : '6px';
  return /*#__PURE__*/React.createElement(AbstractButton, _extends({
    "aria-pressed": active !== undefined ? active : undefined,
    "data-active": active || undefined,
    width: fullWidth ? '100%' : 'auto'
  }, styles, rest, {
    ref: ref
  }), icon && iconAlignment === 'left' && !loading && /*#__PURE__*/React.createElement(Icon, {
    size: iconSize,
    ml: -1,
    mr: iconMargin,
    type: icon
  }), loading && /*#__PURE__*/React.createElement(Spinner, {
    size: "small",
    mr: 2
  }), children, icon && iconAlignment === 'right' && !loading && /*#__PURE__*/React.createElement(Icon, {
    size: iconSize,
    mr: -1,
    ml: iconMargin,
    type: icon
  }));
});
export default Button;