nice-ui/lib/2-inline-block/AvatarBlock/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AvatarBlock = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const use_t_1 = require("use-t");
const Code_1 = require("../../1-inline/Code");
const Avatar_1 = require("../../1-inline/Avatar");
const Link_1 = require("../../1-inline/Link");
const { createElement: h } = React;
const blockClass = (0, nano_theme_1.rule)({
    d: 'flex',
    flexWrap: 'nowrap',
    cur: 'pointer',
    bd: 0,
    pad: '5px',
    mar: '-5px',
    bdrad: '4px',
    trs: 'background .12s ease-in 0s',
    userSelect: 'none',
});
const bgHoverWide = (0, nano_theme_1.rule)({
    pad: '10px',
    mar: '-10px',
});
const rightClass = (0, nano_theme_1.rule)({
    w: '100%',
    ov: 'hidden',
    d: 'inline-block',
    flex: '1 1',
});
const nameClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.sans,
    lh: 1.2,
    color: nano_theme_1.theme.color.sem.positive[1],
    mar: 0,
    whiteSpace: 'nowrap',
    ov: 'hidden',
    textOverflow: 'ellipsis',
    w: '100%',
    flexBasis: '100%',
    d: 'block',
    [`.${blockClass.trim()}:hover &`]: {
        color: nano_theme_1.theme.color.sem.positive[2],
    },
});
const subtextClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.ui1.mid,
    lh: 1.3,
    d: 'inline-block',
    mar: 0,
    whiteSpace: 'nowrap',
    ov: 'hidden',
    textOverflow: 'ellipsis',
    color: nano_theme_1.theme.g(0.3),
    [`.${blockClass.trim()}:hover &`]: {
        color: nano_theme_1.theme.g(0.1),
    },
});
const specialFontClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.ui1.mid,
});
const renderRightDefault = (props) => {
    const [t] = (0, use_t_1.useT)();
    const { width = 40, name, hideName, subtext, post, grey, lightGrey, greyText, spacious, onNameClick, onSubtextClick, } = props;
    const subtextDynamicClass = (0, nano_theme_1.useRule)((theme) => ({
        col: theme.g(0.3),
        [`.${blockClass.trim()}:hover &`]: {
            col: theme.g(0.1),
        },
    }));
    const dynamicGreyNameClass = (0, nano_theme_1.useRule)((theme) => ({
        color: theme.g(0.1, 0.8),
        [`.${blockClass.trim()}:hover &`]: {
            color: theme.g(0.1, 1),
        },
    }));
    return (React.createElement("span", { className: rightClass, style: {
            padding: `${width * (subtext ? (spacious ? 0 : 0.085) : width < 32 ? (spacious ? 0.12 : 0.2) : 0.19)}px ${width * 0.2}px 0 ${width * (0.2 + (spacious ? 0.1 : 0))}px`,
            fontSize: width * (subtext ? (spacious ? 0.5 : 0.42) : spacious ? (width < 32 ? 0.65 : 0.53) : 0.5) + 'px',
        } },
        !!name &&
            !hideName &&
            h('span', {
                className: nameClass +
                    (post || grey || lightGrey || greyText ? dynamicGreyNameClass : '') +
                    (grey || lightGrey || greyText ? specialFontClass : ''),
                style: {
                    marginTop: spacious && subtext ? width * -0.05 : undefined,
                },
                onClick: onNameClick,
            }, props.you ? (React.createElement(React.Fragment, null,
                name,
                " ",
                React.createElement(Code_1.Code, { gray: true }, t('you')))) : (name)),
        subtext && (React.createElement("span", { className: subtextClass + subtextDynamicClass, style: {
                fontSize: width * (name && !hideName ? (spacious ? 0.35 : 0.28) : 0.53) + 'px',
                paddingTop: name && !hideName ? 0 : `${width * 0.08}px`,
                opacity: spacious ? 0.7 : undefined,
            }, onClick: onSubtextClick }, subtext))));
};
/**
 * Similar to <Avatar> but also allows to specify username
 * and other info.
 */
const AvatarBlock = (props) => {
    const { id, active, href, src, width = 40, name, emoji, square, rounded, post, title, onClick, onAvatarClick, renderRight = renderRightDefault, color, className = '', isPrivate, isOP, hover, wideHover, icon, grey, lightGrey, transparent, noHover, avatarBottomRight, del, bold, letters, } = props;
    const dynamicBlockClass = (0, nano_theme_1.useRule)((theme) => ({
        '&:hover': {
            bg: theme.g(0.1, 0.04),
        },
        '&:active': {
            bg: theme.g(0.1, 0.08),
        },
    }));
    const Component = href ? Link_1.Link : 'div';
    const avatar = (React.createElement(Avatar_1.Avatar, { id: id, src: src, width: width, name: name, emoji: emoji, square: square, rounded: rounded, post: post, color: color, isPrivate: isPrivate, isOP: isOP, hover: hover, icon: icon, grey: grey, lightGrey: lightGrey, transparent: transparent, bottomRight: avatarBottomRight, del: del, bold: bold, letters: letters, onClick: onAvatarClick, noHover: noHover }));
    return (React.createElement(Component, { a: href ? true : undefined, to: href, className: className + blockClass + (noHover ? '' : dynamicBlockClass) + (wideHover ? bgHoverWide : ''), style: {
            background: active ? nano_theme_1.theme.green(0.06) : undefined,
            height: width || 32,
            cursor: noHover ? 'default' : undefined,
        }, onClick: onClick, title: title },
        avatar,
        renderRight(props)));
};
exports.AvatarBlock = AvatarBlock;