@gravity-ui/uikit
Version:
Gravity UI base styling and components
63 lines (62 loc) • 3.03 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Envelope, Xmark } from '@gravity-ui/icons';
import { Avatar } from "../Avatar/index.js";
import { Icon } from "../Icon/index.js";
import { block } from "../utils/cn.js";
import { BORDER_COLOR, COMPACT_SIZES, DEFAULT_USER_LABEL_SIZE, ICON_SIZES } from "./constants.js";
import i18n from "./i18n/index.js";
import "./UserLabel.css";
const b = block('user-label');
export const UserLabel = React.forwardRef(
// eslint-disable-next-line complexity
({ type = 'person', view = 'outlined', size = DEFAULT_USER_LABEL_SIZE, avatar, text, description, onClick, onCloseClick, className, style, qa, }, ref) => {
const clickable = Boolean(onClick);
const closeable = Boolean(onCloseClick);
const MainComponent = clickable ? 'button' : 'div';
let avatarView = null;
let avatarProps;
if (typeof avatar === 'string') {
avatarProps = { imgUrl: avatar };
}
else if (avatar && !React.isValidElement(avatar)) {
if (('imgUrl' in avatar && avatar.imgUrl) ||
('icon' in avatar && avatar.icon) ||
('text' in avatar && avatar.text)) {
avatarProps = avatar;
}
else if (typeof text === 'string') {
avatarProps = { text, borderColor: BORDER_COLOR, ...avatar };
}
}
else if (!avatar && typeof text === 'string') {
avatarProps = { text, borderColor: BORDER_COLOR };
}
switch (type) {
case 'email':
avatarView = _jsx(Avatar, { icon: Envelope, ...avatarProps, size: size });
break;
case 'empty':
avatarView = null;
break;
case 'person':
default:
if (React.isValidElement(avatar)) {
avatarView = avatar;
}
else if (avatarProps) {
avatarView = _jsx(Avatar, { ...avatarProps, size: size });
}
break;
}
const showDescription = Boolean(description && !COMPACT_SIZES.has(size));
return (_jsxs("div", { className: b({
view,
size,
empty: !avatarView,
clickable,
closeable,
}, className), style: style, "data-qa": qa, ref: ref, children: [_jsxs(MainComponent, { className: b('main'), type: clickable ? 'button' : undefined, onClick: onClick, children: [avatarView ? _jsx("div", { className: b('avatar'), children: avatarView }) : null, _jsxs("div", { className: b('info'), children: [_jsx("span", { className: b('text'), children: text }), showDescription ? (_jsx("span", { className: b('description'), children: description })) : null] })] }), onCloseClick ? (_jsx("button", { className: b('close'), type: "button", "aria-label": i18n('label_remove-button'), onClick: onCloseClick, children: _jsx(Icon, { className: b('close-icon'), data: Xmark, size: ICON_SIZES[size] }) })) : null] }));
});
UserLabel.displayName = 'UserLabel';
//# sourceMappingURL=UserLabel.js.map