@appbuckets/react-ui/esm/Button/Button.js

Just Another React UI Framework

import { __rest, __read, __assign } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import {
  useElementType,
  childrenUtils,
  createShorthandFactory,
} from '@appbuckets/react-ui-core';
import { useRipples } from '../hooks/useRipples.js';
import {
  useSharedClassName,
  useSplitStateClassName,
} from '../utils/customHook.js';
import '../BucketTheme/BucketTheme.js';
import { useWithDefaultProps } from '../BucketTheme/BucketContext.js';
import ButtonGroup from './ButtonGroup.js';
import Icon from '../Icon/Icon.js';
import Popup from '../Popup/Popup.js';

/* --------
 * Component Render
 * -------- */
var Button = function (receivedProps) {
  /** Get component props */
  var props = useWithDefaultProps('button', receivedProps);
  var _a = useSharedClassName(props),
    className = _a.className,
    _b = _a.rest,
    children = _b.children,
    content = _b.content,
    active = _b.active,
    disabled = _b.disabled,
    disableRipple = _b.disableRipple,
    fab = _b.fab,
    fitted = _b.fitted,
    flat = _b.flat,
    full = _b.full,
    icon = _b.icon,
    iconPosition = _b.iconPosition,
    inverted = _b.inverted,
    loading = _b.loading,
    onClick = _b.onClick,
    role = _b.role,
    rounded = _b.rounded,
    userDefinedTabIndex = _b.tabIndex,
    toggle = _b.toggle,
    tooltip = _b.tooltip,
    type = _b.type,
    rawRest = __rest(_b, [
      'children',
      'content',
      'active',
      'disabled',
      'disableRipple',
      'fab',
      'fitted',
      'flat',
      'full',
      'icon',
      'iconPosition',
      'inverted',
      'loading',
      'onClick',
      'role',
      'rounded',
      'tabIndex',
      'toggle',
      'tooltip',
      'type',
    ]);
  /** Get the component element type */
  var ElementType = useElementType(Button, receivedProps, props);
  /** Split state className from rest props */
  var _c = __read(useSplitStateClassName(rawRest), 2),
    stateClasses = _c[0],
    rest = _c[1];
  /** Using ripple */
  var _d = __read(useRipples(), 2),
    showRipple = _d[0],
    buttonRipples = _d[1];
  /**
   * Compute the correct
   * button aria role based on button type
   */
  var ariaRole = React.useMemo(
    function () {
      /** If role is defined, return it */
      if (role != null) {
        return role;
      }
      /** If element is a button, return button */
      if (ElementType === 'button') {
        return 'button';
      }
      /** Else, return null */
      return undefined;
    },
    [role, ElementType]
  );
  /**
   * Compute the right tab index using
   * the disabled prop and/or the original
   * tabIndex property defined by user
   */
  var tabIndex = React.useMemo(
    function () {
      /** If tabIndex has been defined by user return it */
      if (userDefinedTabIndex != null) {
        return userDefinedTabIndex;
      }
      /** If component is disabled, strict tabIndex to -1 */
      if (disabled) {
        return -1;
      }
      /** If the element has been rendered as a 'div' element, return 0 */
      if (ElementType === 'div') {
        return 0;
      }
      /** Fallback to null */
      return undefined;
    },
    [userDefinedTabIndex, disabled, ElementType]
  );
  /** Build an handler for click event */
  var handleClick = function (e) {
    /** If button is disabled, prevent any click */
    if (disabled) {
      e.preventDefault();
      return;
    }
    /** Show the Ripple if is not disable */
    if (!disableRipple) {
      showRipple(e);
    }
    /** If the onClick function exists, invoke it */
    if (typeof onClick === 'function') {
      /** Stop event Propagation */
      e.stopPropagation();
      onClick(e, props);
    }
  };
  /** Build the element class list */
  var classes = clsx(
    {
      fab: fab && !content && !children,
      disabled: disabled,
      fitted: fitted,
      flat: flat,
      inverted: inverted,
      loading: loading,
      rounded: rounded,
      full: full,
      active: active,
      toggle: toggle,
      'with-icon': icon && (children || content),
      'as-icon': icon && !children && !content,
    },
    icon &&
      (children || content) &&
      iconPosition &&
      'icon-on-'.concat(iconPosition),
    stateClasses,
    'button',
    className
  );
  /** Build the Button Element Props */
  var buttonProps = __assign(__assign({}, rest), {
    type: type,
    tabIndex: tabIndex,
    className: classes,
    disabled: (disabled && ElementType === 'button') || undefined,
    role: ariaRole,
    onClick: handleClick,
  });
  /** If there are children render them */
  if (!childrenUtils.isNil(children)) {
    var buttonElementWithChildren = React.createElement(
      ElementType,
      __assign({}, buttonProps),
      children
    );
    return tooltip
      ? React.createElement(Popup, {
          content: tooltip,
          trigger: buttonElementWithChildren,
        })
      : buttonElementWithChildren;
  }
  /** Build the icon if Exists */
  var iconElement = icon && Icon.create(icon, { autoGenerateKey: false });
  /** Else, build the button using shortHand */
  var buttonElement = React.createElement(
    ElementType,
    __assign({}, rest, {
      className: classes,
      disabled: (disabled && ElementType === 'button') || undefined,
      role: ariaRole,
      type: type,
      tabIndex: tabIndex,
      onClick: handleClick,
    }),
    React.createElement(
      'span',
      null,
      iconPosition === 'left' && iconElement,
      content,
      iconPosition === 'right' && iconElement
    ),
    !disableRipple && buttonRipples
  );
  return tooltip
    ? React.createElement(Popup, { content: tooltip, trigger: buttonElement })
    : buttonElement;
};
/** Add the Group */
Button.Group = ButtonGroup;
/** Properly set Display Name */
Button.displayName = 'Button';
/** Create the Shorthand Factory Method */
Button.create = createShorthandFactory(Button, function (content) {
  return { content: content };
});

export { Button as default };