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

Just Another React UI Framework

import { __rest, __read, __assign, __spreadArray } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import { createShorthandFactory } from '@appbuckets/react-ui-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import {
  useSharedClassName,
  useSplitStateClassName,
} from '../utils/customHook.js';
import '../BucketTheme/BucketTheme.js';
import { useWithDefaultProps } from '../BucketTheme/BucketContext.js';

/* --------
 * Component Render
 * -------- */
var Icon = React.memo(function (receivedProps) {
  var props = useWithDefaultProps('icon', receivedProps);
  var _a = useSharedClassName(props),
    className = _a.className,
    _b = _a.rest,
    bordered = _b.bordered,
    disabled = _b.disabled,
    fitted = _b.fitted,
    flip = _b.flip,
    iconStyle = _b.iconStyle,
    inverse = _b.inverse,
    listItem = _b.listItem,
    onClick = _b.onClick,
    mask = _b.mask,
    name = _b.name,
    pulse = _b.pulse,
    rotate = _b.rotate,
    solid = _b.solid,
    spin = _b.spin,
    swapOpacity = _b.swapOpacity,
    transform = _b.transform,
    unspaced = _b.unspaced,
    rawRest = __rest(_b, [
      'bordered',
      'disabled',
      'fitted',
      'flip',
      'iconStyle',
      'inverse',
      'listItem',
      'onClick',
      'mask',
      'name',
      'pulse',
      'rotate',
      'solid',
      'spin',
      'swapOpacity',
      'transform',
      'unspaced',
    ]);
  /** Split state className from rest props */
  var _c = __read(useSplitStateClassName(rawRest), 1),
    stateClasses = _c[0];
  /** Handle click, to disabled it if is disabled */
  var handleClick = function (e) {
    /** If icon has been disabled, prevent click */
    if (disabled) {
      e.preventDefault();
      return;
    }
    /** If the onClick function exists, invoke it */
    if (typeof onClick === 'function') {
      onClick(e, props);
    }
  };
  /** Build icon ClassName */
  var classes = clsx('icon', stateClasses, className, solid, {
    disabled: disabled,
    bordered: bordered,
    unspaced: unspaced,
    clickable: onClick,
  });
  /** Solid icon has a different container */
  var hasFragmentContainer = !solid && !bordered;
  var Container = !hasFragmentContainer ? 'div' : React.Fragment;
  /** Build container props, if React.Fragment, no className is allowed */
  var containerProps = hasFragmentContainer ? {} : { className: classes };
  if (!name) {
    return null;
  }
  /** Draw the element */
  return React.createElement(
    Container,
    __assign({}, containerProps),
    React.createElement(FontAwesomeIcon, {
      fixedWidth: !fitted,
      className: hasFragmentContainer ? classes : undefined,
      icon: [iconStyle || 'fas', name],
      mask: mask,
      spin: spin,
      pulse: pulse,
      flip: flip,
      inverse: inverse,
      listItem: listItem,
      rotation: rotate,
      swapOpacity: swapOpacity,
      transform: transform,
      onClick: handleClick,
      style: rawRest.style,
    })
  );
});
Icon.displayName = 'Icon';
/** Icon could be created using a Shorthand */
Icon.create = createShorthandFactory(Icon, function (name) {
  return { name: name };
});
/** Add FontAwesome Icon Library */
Icon.addToLibrary = function () {
  var definitions = [];
  for (var _i = 0; _i < arguments.length; _i++) {
    definitions[_i] = arguments[_i];
  }
  return library.add.apply(
    library,
    __spreadArray([], __read(definitions), false)
  );
};

export { Icon as default };