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

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var React = require('react');
var clsx = require('clsx');
var reactUiCore = require('@appbuckets/react-ui-core');
var reactFontawesome = require('@fortawesome/react-fontawesome');
var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
var customHook = require('../utils/customHook.js');
require('../BucketTheme/BucketTheme.js');
var BucketContext = require('../BucketTheme/BucketContext.js');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);
var clsx__default = /*#__PURE__*/ _interopDefaultLegacy(clsx);

/* --------
 * Component Render
 * -------- */
var Icon = React__namespace.memo(function (receivedProps) {
  var props = BucketContext.useWithDefaultProps('icon', receivedProps);
  var _a = customHook.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 = tslib.__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 = tslib.__read(customHook.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__default['default'](
    '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__namespace.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__namespace.createElement(
    Container,
    tslib.__assign({}, containerProps),
    React__namespace.createElement(reactFontawesome.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 = reactUiCore.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 fontawesomeSvgCore.library.add.apply(
    fontawesomeSvgCore.library,
    tslib.__spreadArray([], tslib.__read(definitions), false)
  );
};

module.exports = Icon;