@braineet/ui/dist/esm/components/button/index.js

Braineet design system

var _excluded = ["disabled", "color", "styleType", "type", "children", "size", "icon", "direction", "isLoading", "loadingText", "reverseColor", "title", "shouldFitContainer", "as", "hasShadow"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/* eslint-disable no-nested-ternary */
import React from 'react';
import { blockEvents } from './blockEvents';
import { StyledButton, TextButton, LoadingIcon, IconButton, sizes } from './styles';

/**
 * The `Button` component.
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var disabled = _ref.disabled,
    color = _ref.color,
    styleType = _ref.styleType,
    type = _ref.type,
    children = _ref.children,
    size = _ref.size,
    icon = _ref.icon,
    direction = _ref.direction,
    isLoading = _ref.isLoading,
    loadingText = _ref.loadingText,
    reverseColor = _ref.reverseColor,
    title = _ref.title,
    shouldFitContainer = _ref.shouldFitContainer,
    as = _ref.as,
    hasShadow = _ref.hasShadow,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var globalSize = ['medium', 'large'].includes(size) ? size : 'medium';
  var btnIcon = isLoading ? 'spinner' : icon;
  var a11yProps = isLoading ? {
    'aria-live': 'polite',
    'aria-atomic': true
  } : {};
  return /*#__PURE__*/_jsx(StyledButton, _extends({
    ref: ref,
    disabled: disabled,
    $textColor: color,
    size: globalSize,
    type: type,
    $styleType: styleType,
    $direction: direction,
    $isLoading: isLoading,
    $reverseColor: reverseColor,
    forwardedAs: as,
    $shouldFitContainer: shouldFitContainer,
    $hasShadow: hasShadow
  }, a11yProps, restProps, blockEvents({
    isLoading: isLoading
  }), {
    children: isLoading ? /*#__PURE__*/_jsxs(_Fragment, {
      children: [children && typeof children === 'string' && children !== '' ? /*#__PURE__*/_jsx(TextButton, {
        fontFamily: "display",
        size: sizes[globalSize].text,
        $direction: direction,
        styleType: styleType,
        icon: btnIcon,
        children: loadingText
      }) : /*#__PURE__*/_jsx("span", {
        className: "sr-only",
        children: title
      }), /*#__PURE__*/_jsx(LoadingIcon, {
        $hasText: typeof children === 'string' && children !== '',
        $size: globalSize,
        $direction: direction,
        size: sizes[globalSize].icon,
        "aria-hidden": "true",
        focusable: "false"
      })]
    }) : typeof children === 'string' && children !== '' || typeof btnIcon === 'string' && btnIcon !== '' ? /*#__PURE__*/_jsxs(_Fragment, {
      children: [typeof children === 'string' && children !== '' ? /*#__PURE__*/_jsx(TextButton, {
        fontFamily: "display",
        size: sizes[globalSize].text,
        $direction: direction,
        styleType: styleType,
        icon: btnIcon,
        children: children
      }) : title && /*#__PURE__*/_jsx("span", {
        className: "sr-only",
        children: title
      }), typeof btnIcon === 'string' && btnIcon !== '' && /*#__PURE__*/_jsx(IconButton, {
        name: btnIcon,
        $hasText: typeof children === 'string' && children !== '',
        $size: globalSize,
        $direction: direction,
        size: sizes[globalSize].icon,
        "aria-hidden": "true",
        focusable: "false"
      })]
    }) : children
  }));
});
Button.defaultProps = {
  title: '',
  children: null,
  color: 'brand',
  direction: 'left',
  loadingText: 'Loading...',
  disabled: false,
  hasShadow: true,
  icon: '',
  isLoading: false,
  size: 'medium',
  styleType: 'solid',
  as: 'button',
  type: 'button'
};
export default Button;