@primer/react/lib/Button/ButtonBase.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
require('../sx.js');
var ThemeProvider = require('../ThemeProvider.js');
var types = require('./types.js');
var styles = require('./styles.js');
var useRefObjectAsForwardedRef = require('../hooks/useRefObjectAsForwardedRef.js');
var defaultSxProp = require('../utils/defaultSxProp.js');
var Box = require('../Box/Box.js');
var merge = require('deepmerge');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var merge__default = /*#__PURE__*/_interopDefault(merge);

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
const ButtonBase = /*#__PURE__*/React.forwardRef(({
  children,
  as: Component = 'button',
  sx: sxProp = defaultSxProp.defaultSxProp,
  ...props
}, forwardedRef) => {
  const {
    leadingIcon: LeadingIcon,
    trailingIcon: TrailingIcon,
    trailingAction: TrailingAction,
    icon: Icon,
    variant = 'default',
    size = 'medium',
    alignContent = 'center',
    block = false,
    ...rest
  } = props;
  const innerRef = React__default.default.useRef(null);
  useRefObjectAsForwardedRef.useRefObjectAsForwardedRef(forwardedRef, innerRef);
  const {
    theme
  } = ThemeProvider.useTheme();
  const baseStyles = React.useMemo(() => {
    return merge__default.default.all([styles.getButtonStyles(theme), styles.getVariantStyles(variant, theme)]);
  }, [theme, variant]);
  const sxStyles = React.useMemo(() => {
    return merge__default.default(baseStyles, sxProp);
  }, [baseStyles, sxProp]);
  const iconWrapStyles = {
    display: 'flex',
    pointerEvents: 'none'
  };
  if (process.env.NODE_ENV !== "production") {
    /**
     * The Linter yells because it thinks this conditionally calls an effect,
     * but since this is a compile-time flag and not a runtime conditional
     * this is safe, and ensures the entire effect is kept out of prod builds
     * shaving precious bytes from the output, and avoiding mounting a noop effect
     */
    // eslint-disable-next-line react-hooks/rules-of-hooks
    React__default.default.useEffect(() => {
      if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
        // eslint-disable-next-line no-console
        console.warn('This component should be an instanceof a semantic button or anchor');
      }
    }, [innerRef]);
  }
  return /*#__PURE__*/React__default.default.createElement(types.StyledButton, _extends({
    as: Component,
    sx: sxStyles
  }, rest, {
    ref: innerRef,
    "data-block": block ? 'block' : null,
    "data-size": size === 'small' || size === 'large' ? size : undefined,
    "data-no-visuals": !LeadingIcon && !TrailingIcon && !TrailingAction ? true : undefined
  }), Icon ? /*#__PURE__*/React__default.default.createElement(Icon, null) : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(Box, {
    as: "span",
    "data-component": "buttonContent",
    sx: styles.getAlignContentSize(alignContent)
  }, LeadingIcon && /*#__PURE__*/React__default.default.createElement(Box, {
    as: "span",
    "data-component": "leadingVisual",
    sx: {
      ...iconWrapStyles
    }
  }, /*#__PURE__*/React__default.default.createElement(LeadingIcon, null)), children && /*#__PURE__*/React__default.default.createElement("span", {
    "data-component": "text"
  }, children), TrailingIcon && /*#__PURE__*/React__default.default.createElement(Box, {
    as: "span",
    "data-component": "trailingVisual",
    sx: {
      ...iconWrapStyles
    }
  }, /*#__PURE__*/React__default.default.createElement(TrailingIcon, null))), TrailingAction && /*#__PURE__*/React__default.default.createElement(Box, {
    as: "span",
    "data-component": "trailingAction",
    sx: {
      ...iconWrapStyles
    }
  }, /*#__PURE__*/React__default.default.createElement(TrailingAction, null))));
});

exports.ButtonBase = ButtonBase;