@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 _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
var _Icon = require("./Icon.styles");
var _styledComponents = require("styled-components");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Icon = ({
  className,
  color,
  icons,
  isDisabled,
  onClick,
  onDoubleClick,
  onMouseDown,
  tabIndex,
  size = 15,
  shouldStopPropagation,
  shouldEnableKeyboardHighlighting
}) => {
  const theme = (0, _styledComponents.useTheme)();
  const colorScheme = (0, _ColorSchemeProvider.useColorScheme)();
  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.shouldEnableKeyboardHighlighting) ?? false;
  const isClickable = typeof onClick === 'function' && !isDisabled;
  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlightingEffective && isClickable);
  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);
    }
  };
  const handleKeyDown = event => {
    if (!isClickable) {
      return;
    }
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      handleClick(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, {
    tabIndex: shouldEnableKeyboardHighlightingEffective && isClickable ? tabIndex ?? 0 : tabIndex,
    className: wrapperClasses,
    $isDisabled: isDisabled,
    onClick: isClickable ? handleClick : undefined,
    $isOnClick: isClickable,
    onDoubleClick: typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined,
    onMouseDown: typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined,
    onKeyDown: shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined,
    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
    $size: size,
    role: isClickable ? 'button' : undefined
  }, icons.map(icon => {
    const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
    const iconStyle = `${(theme === null || theme === void 0 ? void 0 : theme.iconStyle) ?? 'fa-regular'} `;
    const themedIcon = icon === null || icon === void 0 ? void 0 : icon.replace(/^fa\s/, iconStyle);
    const iconClasses = (0, _clsx.default)(themedIcon, {
      '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