nice-ui/lib/2-inline-block/Label/LabelRight.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LabelRight = 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 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 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,
    mar: 0,
    whiteSpace: 'nowrap',
    ov: 'hidden',
    textOverflow: 'ellipsis',
    w: '100%',
    flexBasis: '100%',
    d: 'block',
    col: nano_theme_1.theme.g(0.1, 0.8),
});
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 LabelRight = (props) => {
    const [t] = (0, use_t_1.useT)();
    const { width = 40, name, hideName, subtext, grey, lightGrey, 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),
        },
    }));
    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 && (React.createElement("span", { className: nameClass + (grey || lightGrey ? 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))));
};
exports.LabelRight = LabelRight;