@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
75 lines (73 loc) • 2.43 kB
JavaScript
import clsx from 'clsx';
import React from 'react';
import { getStackSizeFactor } from '../../utils/icon';
import { StyledIcon, StyledIconWrapper } from './Icon.styles';
const Icon = _ref => {
let {
className,
color,
icons,
isDisabled,
onClick,
onDoubleClick,
onMouseDown,
size = 15,
shouldStopPropagation
} = _ref;
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 = 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, {
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 = 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 = clsx(icon, {
'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
});
return /*#__PURE__*/React.createElement(StyledIcon, {
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