@gravity-ui/uikit
Version:
Gravity UI base styling and components
135 lines (134 loc) • 5.9 kB
JavaScript
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const cn_1 = require("../utils/cn.js");
const common_1 = require("../utils/common.js");
const event_broker_1 = require("../utils/event-broker/index.js");
const isOfType_1 = require("../utils/isOfType.js");
const ButtonIcon_1 = require("./ButtonIcon.js");
require("./Button.css");
function isButtonComponentProps(p) {
return p.component !== undefined;
}
const b = (0, cn_1.block)('button');
const _Button = React.forwardRef(function Button(props, ref) {
const { view = 'normal', size = 'm', pin = 'round-round', selected, disabled = false, loading = false, width, children, extraProps, qa, onClickCapture, ...rest } = props;
const handleClickCapture = React.useCallback((event) => {
event_broker_1.eventBroker.publish({
componentId: 'Button',
eventId: 'click',
domEvent: event,
meta: {
content: event.currentTarget.textContent,
view: view,
},
});
if (onClickCapture) {
onClickCapture(event);
}
}, [view, onClickCapture]);
const commonProps = {
onClickCapture: handleClickCapture,
className: b({
view: view,
size: size,
pin: pin,
selected: selected,
disabled: disabled || loading,
loading: loading,
width: width,
}, rest.className),
'data-qa': qa,
};
if (isButtonComponentProps(props)) {
return React.createElement(props.component, {
...rest,
...extraProps,
...commonProps,
ref: ref,
'aria-disabled': disabled ?? undefined,
}, prepareChildren(children));
}
if (typeof props.href !== 'undefined') {
return ((0, jsx_runtime_1.jsx)("a", { ...rest, ...extraProps, ...commonProps, ref: ref, rel: props.target === '_blank' && !rest.rel ? 'noopener noreferrer' : rest.rel, "aria-disabled": disabled ?? undefined, children: prepareChildren(children) }));
}
return ((0, jsx_runtime_1.jsx)("button", { ...rest, ...extraProps, ...commonProps, ref: ref, type: props.type || 'button', disabled: disabled || loading, "aria-pressed": selected, children: prepareChildren(children) }));
});
exports.Button = Object.assign(_Button, { Icon: ButtonIcon_1.ButtonIcon });
const isButtonIconComponent = (0, isOfType_1.isOfType)(ButtonIcon_1.ButtonIcon);
const isSpan = (0, isOfType_1.isOfType)('span');
const buttonIconClassRe = RegExp(`^${b('icon')}($|\\s+\\w)`);
function prepareChildren(children) {
const items = React.Children.toArray(children);
if (items.length === 1) {
const onlyItem = items[0];
const isButtonIconElement = isButtonIconComponent(onlyItem) ||
(isSpan(onlyItem) && buttonIconClassRe.test(onlyItem.props.className || ''));
if (isButtonIconElement) {
return onlyItem;
}
else if ((0, common_1.isIcon)(onlyItem) || (0, common_1.isSvg)(onlyItem)) {
return (0, jsx_runtime_1.jsx)(exports.Button.Icon, { children: onlyItem }, "icon");
}
else {
return ((0, jsx_runtime_1.jsx)("span", { className: b('text'), children: onlyItem }, "text"));
}
}
else {
let startIcon, endIcon, text;
const content = [];
for (const item of items) {
const isIconElement = (0, common_1.isIcon)(item) || (0, common_1.isSvg)(item);
const isButtonIconElement = isButtonIconComponent(item);
const isRenderedButtonIconElement = isSpan(item) && buttonIconClassRe.test(item.props.className || '');
if (isIconElement || isButtonIconElement || isRenderedButtonIconElement) {
if (!startIcon && content.length === 0) {
const key = 'icon-start';
const side = 'start';
if (isIconElement) {
startIcon = ((0, jsx_runtime_1.jsx)(exports.Button.Icon, { side: side, children: item }, key));
}
else if (isButtonIconElement) {
startIcon = React.cloneElement(item, {
side,
});
}
else {
startIcon = React.cloneElement(item, {
className: b('icon', { side: (0, ButtonIcon_1.getIconSide)(side) }, item.props.className),
});
}
}
else if (!endIcon && content.length !== 0) {
const key = 'icon-end';
const side = 'end';
if (isIconElement) {
endIcon = ((0, jsx_runtime_1.jsx)(exports.Button.Icon, { side: side, children: item }, key));
}
else if (isButtonIconElement) {
endIcon = React.cloneElement(item, {
side,
});
}
else {
endIcon = React.cloneElement(item, {
className: b('icon', { side: (0, ButtonIcon_1.getIconSide)(side) }, item.props.className),
});
}
}
}
else {
content.push(item);
}
}
if (content.length > 0) {
text = ((0, jsx_runtime_1.jsx)("span", { className: b('text'), children: content }, "text"));
}
return [startIcon, endIcon, text];
}
}
//# sourceMappingURL=Button.js.map