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

Just Another React UI Framework

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

/* --------
 * Component Render
 * -------- */
var HeroButton = function (receivedProps) {
  var props = useWithDefaultProps('heroButton', receivedProps);
  var _a = useSharedClassName(props),
    className = _a.className,
    _b = _a.rest,
    active = _b.active,
    content = _b.content,
    disabled = _b.disabled,
    discreet = _b.discreet,
    icon = _b.icon,
    onClick = _b.onClick,
    subheader = _b.subheader,
    variation = _b.variation,
    rawRest = __rest(_b, [
      'active',
      'content',
      'disabled',
      'discreet',
      'icon',
      'onClick',
      'subheader',
      'variation',
    ]);
  /** Get the component element type */
  var ElementType = useElementType(HeroButton, receivedProps, props);
  /** Split state className from rest props */
  var _c = __read(useSplitStateClassName(rawRest), 2),
    stateClasses = _c[0],
    rest = _c[1];
  /** Handle Buttons Click */
  var handleClick = function (e) {
    /** A disable button could not be clicked */
    if (disabled) {
      e.preventDefault();
      return;
    }
    if (typeof onClick === 'function') {
      e.stopPropagation();
      onClick(e, props);
    }
  };
  /** Build the element class list */
  var classes = clsx(
    {
      active: active,
      disabled: disabled,
      discreet: discreet,
    },
    'hero-button',
    typeof variation === 'number' ? 'variation-'.concat(variation) : undefined,
    stateClasses,
    className
  );
  /** Build Hero Content */
  var headerContent = React.useMemo(
    function () {
      return Header.create(
        {
          content: content,
          subheader: subheader,
        },
        {
          autoGenerateKey: false,
        }
      );
    },
    [content, subheader]
  );
  var iconElement = React.useMemo(
    function () {
      return (
        icon &&
        Icon.create(icon, {
          autoGenerateKey: false,
        })
      );
    },
    [icon]
  );
  return React.createElement(
    ElementType,
    __assign({}, rest, { className: classes, onClick: handleClick }),
    React.createElement(
      'div',
      { className: 'content' },
      headerContent,
      iconElement
    )
  );
};
HeroButton.displayName = 'HeroButton';

export { HeroButton as default };