@gravity-ui/uikit
Version:
Gravity UI base styling and components
67 lines (66 loc) • 3.47 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserLabel = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const Avatar_1 = require("../Avatar/index.js");
const Icon_1 = require("../Icon/index.js");
const cn_1 = require("../utils/cn.js");
const constants_1 = require("./constants.js");
const i18n_1 = tslib_1.__importDefault(require("./i18n/index.js"));
require("./UserLabel.css");
const b = (0, cn_1.block)('user-label');
exports.UserLabel = React.forwardRef(
// eslint-disable-next-line complexity
({ type = 'person', view = 'outlined', size = constants_1.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: constants_1.BORDER_COLOR, ...avatar };
}
}
else if (!avatar && typeof text === 'string') {
avatarProps = { text, borderColor: constants_1.BORDER_COLOR };
}
switch (type) {
case 'email':
avatarView = (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { icon: icons_1.Envelope, ...avatarProps, size: size });
break;
case 'empty':
avatarView = null;
break;
case 'person':
default:
if (React.isValidElement(avatar)) {
avatarView = avatar;
}
else if (avatarProps) {
avatarView = (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { ...avatarProps, size: size });
}
break;
}
const showDescription = Boolean(description && !constants_1.COMPACT_SIZES.has(size));
return ((0, jsx_runtime_1.jsxs)("div", { className: b({
view,
size,
empty: !avatarView,
clickable,
closeable,
}, className), style: style, "data-qa": qa, ref: ref, children: [(0, jsx_runtime_1.jsxs)(MainComponent, { className: b('main'), type: clickable ? 'button' : undefined, onClick: onClick, children: [avatarView ? (0, jsx_runtime_1.jsx)("div", { className: b('avatar'), children: avatarView }) : null, (0, jsx_runtime_1.jsxs)("div", { className: b('info'), children: [(0, jsx_runtime_1.jsx)("span", { className: b('text'), children: text }), showDescription ? ((0, jsx_runtime_1.jsx)("span", { className: b('description'), children: description })) : null] })] }), onCloseClick ? ((0, jsx_runtime_1.jsx)("button", { className: b('close'), type: "button", "aria-label": (0, i18n_1.default)('label_remove-button'), onClick: onCloseClick, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: b('close-icon'), data: icons_1.Xmark, size: constants_1.ICON_SIZES[size] }) })) : null] }));
});
exports.UserLabel.displayName = 'UserLabel';
//# sourceMappingURL=UserLabel.js.map