@gravity-ui/uikit
Version:
Gravity UI base styling and components
28 lines (27 loc) • 1.66 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { filterDOMProps } from "../utils/filterDOMProps.js";
import { AvatarIcon } from "./AvatarIcon/index.js";
import { AvatarImage } from "./AvatarImage/index.js";
import { AvatarText } from "./AvatarText/index.js";
import { DEFAULT_AVATAR_SIZE, bAvatar } from "./constants.js";
import "./Avatar.css";
export const Avatar = React.forwardRef((props, ref) => {
const { size = DEFAULT_AVATAR_SIZE, theme = 'normal', view = 'filled', backgroundColor, borderColor, title, className, style: styleProp, qa, } = props;
const style = { backgroundColor, color: borderColor, ...styleProp };
const renderContent = () => {
if ('imgUrl' in props && props.imgUrl) {
return (_jsx(AvatarImage, { imgUrl: props.imgUrl, fallbackImgUrl: props.fallbackImgUrl, sizes: props.sizes, srcSet: props.srcSet, alt: props.alt || title, loading: props.loading, withImageBorder: props.withImageBorder, size: size }));
}
if ('icon' in props && props.icon) {
return _jsx(AvatarIcon, { icon: props.icon, color: props.color, size: size });
}
if ('text' in props && props.text) {
return _jsx(AvatarText, { text: props.text, color: props.color, size: size });
}
return null;
};
return (_jsx("div", { className: bAvatar({ size, theme, view, 'with-border': Boolean(borderColor) }, className), title: title, role: "img", style: style, "data-qa": qa, ref: ref, ...filterDOMProps(props, { labelable: true }), children: renderContent() }));
});
Avatar.displayName = 'Avatar';
//# sourceMappingURL=Avatar.js.map