@gravity-ui/uikit
Version:
Gravity UI base styling and components
59 lines (58 loc) • 3.91 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Label = 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 ClipboardIcon_1 = require("../ClipboardIcon/index.js");
const CopyToClipboard_1 = require("../CopyToClipboard/index.js");
const Icon_1 = require("../Icon/index.js");
const cn_1 = require("../utils/cn.js");
const constants_1 = require("./constants.js");
require("./Label.css");
const b = (0, cn_1.block)('label');
const sizeMap = {
xs: { copyIconSize: 12, closeIconSize: 12 },
s: { copyIconSize: 14, closeIconSize: 14 },
m: { copyIconSize: 16, closeIconSize: 16 },
};
exports.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 && ((0, jsx_runtime_1.jsx)("div", { className: b('addon', { side: hasContent ? 'start' : undefined, type: 'icon' }), children: icon }));
const content = hasContent && ((0, jsx_runtime_1.jsxs)("div", { className: b('text'), children: [(0, jsx_runtime_1.jsx)("div", { className: b('content'), children: children }), Boolean(value) && ((0, jsx_runtime_1.jsxs)("div", { className: b('value'), children: [(0, jsx_runtime_1.jsx)("div", { className: b('separator'), children: ":" }), (0, jsx_runtime_1.jsx)("div", { className: b('key'), children: value })] }))] }));
const renderLabel = (status) => {
let actionButton;
if (typeCopy) {
actionButton = ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": copyButtonLabel || undefined, onClick: hasOnClick ? onClick : undefined, disabled: disabled, className: b('addon', {
side: 'end',
type: 'button',
}), "data-qa": constants_1.LabelQa.copyButton, children: (0, jsx_runtime_1.jsx)(ClipboardIcon_1.ClipboardIcon, { status: status || 'pending', size: copyIconSize }) }));
}
else if (typeClose) {
actionButton = ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onCloseClick, "aria-label": closeButtonLabel || undefined, disabled: disabled, className: b('addon', {
side: 'end',
type: 'button',
}), "data-qa": constants_1.LabelQa.closeButton, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: closeIconSize, data: icons_1.Xmark }) }));
}
return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: b({
theme,
size,
interactive: isInteractive,
disabled,
}, className), title: title, "data-qa": qa, children: [startIcon, hasOnClick ? ((0, jsx_runtime_1.jsx)("button", { disabled: disabled, type: "button", onClick: onClick, className: b('main-button'), "data-qa": constants_1.LabelQa.mainButton, children: content })) : (content), actionButton] }));
};
if (hasCopy && copyText && !hasOnClick) {
return ((0, jsx_runtime_1.jsx)(CopyToClipboard_1.CopyToClipboard, { text: copyText, onCopy: onCopy, timeout: 1000, children: (status) => renderLabel(status) }));
}
return renderLabel();
});
//# sourceMappingURL=Label.js.map