@gravity-ui/uikit
Version:
Gravity UI base styling and components
28 lines (27 loc) • 1.77 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Avatar } from "../Avatar/index.js";
import { block } from "../utils/cn.js";
import { filterDOMProps } from "../utils/filterDOMProps.js";
import { COMPACT_SIZES, DEFAULT_USER_SIZE, UserQa } from "./constants.js";
import "./User.css";
const b = block('user');
export const User = React.forwardRef((props, ref) => {
const { avatar, name, description, size = DEFAULT_USER_SIZE, className, style, qa } = props;
const nameTitle = typeof name === 'string' ? name : undefined;
const descriptionTitle = typeof description === 'string' ? description : undefined;
let avatarView = null;
if (typeof avatar === 'string') {
avatarView = _jsx(Avatar, { imgUrl: avatar, size: size, title: nameTitle });
}
else if (React.isValidElement(avatar)) {
avatarView = avatar;
}
else if (avatar) {
avatarView = _jsx(Avatar, { ...avatar, size: size, title: avatar.title || nameTitle });
}
const showDescription = Boolean(description && !COMPACT_SIZES.has(size));
return (_jsxs("div", { className: b({ size }, className), style: style, "data-qa": qa, ref: ref, ...filterDOMProps(props, { labelable: true }), children: [avatarView ? _jsx("div", { className: b('avatar'), children: avatarView }) : null, name || showDescription ? (_jsxs("div", { className: b('info'), children: [name ? (_jsx("span", { className: b('name'), title: nameTitle, "data-qa": UserQa.NAME, children: name })) : null, showDescription ? (_jsx("span", { className: b('description'), title: descriptionTitle, "data-qa": UserQa.DESCRIPTION, children: description })) : null] })) : null] }));
});
User.displayName = 'User';
//# sourceMappingURL=User.js.map