Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const classes = useStyles();
const cssClasses = [classes.avatar];
const inlineStyle: CSSProperties = {};
if (size === AvatarSize.Custom) {
inlineStyle.fontSize = customFontSize;
inlineStyle.width = customDisplaySize;
inlineStyle.height = customDisplaySize;
inlineStyle.lineHeight = customDisplaySize;
} else {
cssClasses.push(classes[`size${size}`]);
}
inlineStyle['--sapUiContentNonInteractiveIconColor'] = 'var(--sapContent_ContrastIconColor)';
if (shape === AvatarShape.Circle) {
cssClasses.push(classes.circle);
}
if (image) {
inlineStyle.backgroundImage = `url(${image})`;
}
if (onClick) {
inlineStyle.cursor = 'pointer';
}
if (className) {
cssClasses.push(className);
}
if (style) {
Object.assign(inlineStyle, style);
const renderAvatar = useMemo(() => {
if (avatar) {
return (
<div>
{typeof avatar === 'string' ? (
) : (
avatar
)}
</div>
);
}
return null;
}, [avatar]);
export const defaultStory = () => (
}
priority={select('priority', Priority, Priority.None)}
onClick={action('Notification clicked')}
noShowMoreButton={boolean('noShowMoreButton', false)}
truncate={boolean('truncate', true)}
noCloseButton={boolean('noCloseButton', false)}
onClose={action('Closed')}
/>
);
export const withInitials = () => (
);
withInitials.story = {
className={cssClasses.join(' ')}
style={inlineStyle}
onClick={handleOnClick}
tabIndex={0}
onKeyDown={handleKeyDown}
title={tooltip}
slot={slot}
>
{initials ? initials : children}
);
});
Avatar.defaultProps = {
size: AvatarSize.S,
shape: AvatarShape.Circle,
initials: null,
image: null,
onClick: null,
customDisplaySize: '3rem',
customFontSize: '1.125rem'
};
Avatar.displayName = 'Avatar';
export { Avatar };
export const defaultStory = () => (
}
priority={select('priority', Priority, Priority.None)}
onClick={action('Notification clicked')}
noShowMoreButton={boolean('noShowMoreButton', false)}
autoPriority={boolean('autoPriority', true)}
collapsed={boolean('collapsed', false)}
noCloseButton={boolean('noCloseButton', false)}
truncate={boolean('truncate', true)}
onClose={action('Group closed')}
>