@gravity-ui/uikit
Version:
Gravity UI base styling and components
55 lines (54 loc) • 3.42 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Xmark } from '@gravity-ui/icons';
import { ClipboardIcon } from "../ClipboardIcon/index.js";
import { CopyToClipboard } from "../CopyToClipboard/index.js";
import { Icon } from "../Icon/index.js";
import { block } from "../utils/cn.js";
import { LabelQa } from "./constants.js";
import "./Label.css";
const b = block('label');
const sizeMap = {
xs: { copyIconSize: 12, closeIconSize: 12 },
s: { copyIconSize: 14, closeIconSize: 14 },
m: { copyIconSize: 16, closeIconSize: 16 },
};
export const Label = React.forwardRef(function Label(props, ref) {
const { type = 'default', theme = 'normal', size = 'xs', title, icon, children, onCloseClick, className, disabled, copyText, closeButtonLabel, copyButtonLabel, interactive = false, value, onCopy, onClick, qa, } = props;
const hasContent = Boolean(children !== '' && React.Children.count(children) > 0);
const typeClose = type === 'close' && hasContent;
const typeCopy = type === 'copy' && hasContent;
const hasOnClick = typeof onClick === 'function';
const hasCopy = Boolean(typeCopy && copyText);
const isInteractive = (hasOnClick || hasCopy || interactive) && !disabled;
const { copyIconSize, closeIconSize } = sizeMap[size];
const startIcon = icon && (_jsx("div", { className: b('addon', { side: hasContent ? 'start' : undefined, type: 'icon' }), children: icon }));
const content = hasContent && (_jsxs("div", { className: b('text'), children: [_jsx("div", { className: b('content'), children: children }), Boolean(value) && (_jsxs("div", { className: b('value'), children: [_jsx("div", { className: b('separator'), children: ":" }), _jsx("div", { className: b('key'), children: value })] }))] }));
const renderLabel = (status) => {
let actionButton;
if (typeCopy) {
actionButton = (_jsx("button", { type: "button", "aria-label": copyButtonLabel || undefined, onClick: hasOnClick ? onClick : undefined, disabled: disabled, className: b('addon', {
side: 'end',
type: 'button',
}), "data-qa": LabelQa.copyButton, children: _jsx(ClipboardIcon, { status: status || 'pending', size: copyIconSize }) }));
}
else if (typeClose) {
actionButton = (_jsx("button", { type: "button", onClick: onCloseClick, "aria-label": closeButtonLabel || undefined, disabled: disabled, className: b('addon', {
side: 'end',
type: 'button',
}), "data-qa": LabelQa.closeButton, children: _jsx(Icon, { size: closeIconSize, data: Xmark }) }));
}
return (_jsxs("div", { ref: ref, className: b({
theme,
size,
interactive: isInteractive,
disabled,
}, className), title: title, "data-qa": qa, children: [startIcon, hasOnClick ? (_jsx("button", { disabled: disabled, type: "button", onClick: onClick, className: b('main-button'), "data-qa": LabelQa.mainButton, children: content })) : (content), actionButton] }));
};
if (hasCopy && copyText && !hasOnClick) {
return (_jsx(CopyToClipboard, { text: copyText, onCopy: onCopy, timeout: 1000, children: (status) => renderLabel(status) }));
}
return renderLabel();
});
//# sourceMappingURL=Label.js.map