@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
18 lines • 2.22 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Dot } from '../../components/dot/dot';
import { Link } from '../../components/link/link';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { pickAriaProps } from '../../utils/aria/aria';
import { ButtonType } from '../button/types/type';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { AvatarDotStyled, AvatarLinkStyled, AvatarStyled } from './avatar.styled';
import { AvatarBackgroundColor, AvatarContentType } from './types/content';
export const AvatarStandAloneComponent = ({ contentType, backgroundColor = AvatarBackgroundColor.COLOR_DEFAULT, image, onClick, styles, dataTestId = 'avatar', maxLengthInitials = 2, ...props }, ref) => {
const ariaProps = pickAriaProps(props);
const drawContent = () => (_jsxs(_Fragment, { children: [props.dot?.number && (_jsx(AvatarDotStyled, { children: _jsx(Dot, { ...props.dot }) })), contentType === AvatarContentType.WITH_ICON && (_jsx(ElementOrIcon, { color: styles?.containerBackgroundColor?.[backgroundColor]?.contentColor, customIconStyles: styles?.avatar, ...props.icon })), contentType === AvatarContentType.WITH_INITIALS && (_jsx(Text, { "aria-hidden": true, color: styles?.containerBackgroundColor?.[backgroundColor]?.contentColor, component: TextComponentType.SPAN, customTypography: styles?.initials, ...props.initials, children: props.initials?.content?.substring(0, maxLengthInitials) }))] }));
return props.link ? (_jsx(AvatarLinkStyled, { ref: ref, backgroundColor: backgroundColor, "data-testid": dataTestId, image: image, styles: styles, children: _jsx(Link, { "aria-label": props['aria-label'], ...props.link, children: drawContent() }) })) : (_jsx(AvatarStyled, { ref: ref, as: onClick ? 'button' : 'div', backgroundColor: backgroundColor, "data-testid": dataTestId, image: image, styles: styles, type: onClick && ButtonType.BUTTON, onClick: onClick, ...ariaProps, children: drawContent() }));
};
export const AvatarStandAlone = React.forwardRef(AvatarStandAloneComponent);
//# sourceMappingURL=avatarStandAlone.js.map