@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
91 lines • 3.41 kB
JavaScript
import clsx from 'clsx';
import React from 'react';
import { getStackSizeFactor } from '../../utils/icon';
import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
import { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';
import { useTheme } from 'styled-components';
const Icon = ({
className,
color,
icons,
isDisabled,
onClick,
onDoubleClick,
onMouseDown,
tabIndex,
size = 15,
shouldStopPropagation,
shouldEnableKeyboardHighlighting
}) => {
const theme = useTheme();
const colorScheme = useColorScheme();
const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
const isClickable = typeof onClick === 'function' && !isDisabled;
const shouldShowKeyboardHighlighting = 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 = getStackSizeFactor(icon);
if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
maxStackSizeFactor = stackSizeFactor;
}
});
const shouldUseStackedIcon = icons.length > 1;
const wrapperClasses = clsx('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
return /*#__PURE__*/React.createElement(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 = getStackSizeFactor(icon);
const iconStyle = `${theme?.iconStyle ?? 'fa-regular'} `;
const themedIcon = icon?.replace(/^fa\s/, iconStyle);
const iconClasses = clsx(themedIcon, {
'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
});
return /*#__PURE__*/React.createElement(StyledIconElement, {
className: iconClasses,
$color: icon.includes('fa-inverse') ? 'white' : color,
$fontSize: (stackSizeFactor || 1) / maxStackSizeFactor * size,
$isStacked: shouldUseStackedIcon,
key: icon,
$size: size
});
}));
};
Icon.displayName = 'Icon';
export default Icon;
//# sourceMappingURL=Icon.js.map