@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() { _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); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
/* 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 } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { 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;