@chayns-components/core/lib/cjs/components/icon/Icon.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _react = _interopRequireDefault(require("react"));
var _icon = require("../../utils/icon");
var _Icon = require("./Icon.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Icon = ({
  className,
  color,
  icons,
  isDisabled,
  onClick,
  onDoubleClick,
  onMouseDown,
  size = 15,
  shouldStopPropagation
}) => {
  const handleClick = event => {
    if (shouldStopPropagation) {
      event.stopPropagation();
    }
    if (typeof onClick === 'function') {
      onClick(event);
    }
  };
  const handleDoubleClick = event => {
    if (shouldStopPropagation) {
      event.stopPropagation();
    }
    if (typeof onDoubleClick === 'function') {
      onDoubleClick(event);
    }
  };
  let maxStackSizeFactor = 1;
  icons.forEach(icon => {
    const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
    if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
      maxStackSizeFactor = stackSizeFactor;
    }
  });
  const shouldUseStackedIcon = icons.length > 1;
  const wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
  return /*#__PURE__*/_react.default.createElement(_Icon.StyledIconWrapper, {
    className: wrapperClasses,
    $isDisabled: isDisabled,
    onClick: typeof onClick === 'function' && !isDisabled ? handleClick : undefined,
    $isOnClick: typeof onClick === 'function' && !isDisabled,
    onDoubleClick: typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined,
    onMouseDown: typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined,
    $size: size
  }, icons.map(icon => {
    const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);

    // const isIconStyleGiven =
    //     /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
    //
    // const iconStyle = isIconStyleGiven
    //     ? undefined
    //     : (theme?.iconStyle as string) ?? 'fa-regular';

    const iconClasses = (0, _clsx.default)(icon, {
      'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
    });
    return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {
      className: iconClasses,
      $color: icon.includes('fa-inverse') ? 'white' : color,
      $fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,
      $isStacked: shouldUseStackedIcon,
      key: icon,
      $size: size
    });
  }));
};
Icon.displayName = 'Icon';
var _default = exports.default = Icon;
//# sourceMappingURL=Icon.js.map