@gravity-ui/uikit
Version:
Gravity UI base styling and components
85 lines (84 loc) • 3.58 kB
JavaScript
'use client';
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BreadcrumbsItem = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const ListItemView_1 = require("../lab/ListItemView/ListItemView.js");
const filterDOMProps_1 = require("../utils/filterDOMProps.js");
const BreadcrumbsDropdownMenu_1 = require("./BreadcrumbsDropdownMenu.js");
const utils_1 = require("./utils.js");
function BreadcrumbsItem(props, ref) {
const domProps = (0, filterDOMProps_1.filterDOMProps)(props, { labelable: true });
const { href, hrefLang, target, rel, download, ping, referrerPolicy, children, __disabled: disabled, __current: current, __onAction: onAction, __index: index, ...restProps } = props;
const handleAction = (event) => {
if (disabled) {
event.preventDefault();
return;
}
if (typeof restProps.onClick === 'function') {
restProps.onClick(event);
}
if (typeof onAction === 'function') {
onAction();
}
};
const linkProps = {
onClick: handleAction,
'aria-disabled': disabled ? true : undefined,
};
if (href) {
linkProps.href = href;
linkProps.hrefLang = hrefLang;
linkProps.target = target;
linkProps.rel = target === '_blank' && !rel ? 'noopener noreferrer' : rel;
linkProps.download = download;
linkProps.ping = ping;
linkProps.referrerPolicy = referrerPolicy;
linkProps.tabIndex = disabled ? -1 : undefined;
}
else {
linkProps.role = 'link';
linkProps.tabIndex = disabled ? undefined : 0;
linkProps.onKeyDown = (event) => {
if (disabled) {
event.preventDefault();
return;
}
if (typeof restProps.onKeyDown === 'function') {
restProps.onKeyDown(event);
}
if (event.key === 'Enter') {
if (typeof onAction === 'function') {
onAction();
}
}
};
}
if (current) {
linkProps['aria-current'] = props['aria-current'] ?? 'page';
}
const Element = href ? 'a' : 'span';
const { isMenu, getItemProps, listItemsRef, activeIndex, popupStyle } = (0, BreadcrumbsDropdownMenu_1.useMenuContext)();
if (isMenu) {
const active = !disabled && activeIndex === index;
return ((0, jsx_runtime_1.jsx)(ListItemView_1.ListItemView, { ...getItemProps({
...restProps,
...domProps,
...linkProps,
role: 'menuitem',
active,
}), ref: (node) => {
listItemsRef.current[index ?? 0] = node;
}, nestedLevel: popupStyle === 'staircase' ? index : undefined, tabIndex: active ? 0 : -1, active: active, size: "m", className: (0, utils_1.b)('menu-link', props.className), component: Element, disabled: disabled, children: children }));
}
return ((0, jsx_runtime_1.jsx)(Element, { ...restProps, ...domProps, ...linkProps, ref: ref, className: (0, utils_1.b)('link', {
'is-current': current,
'is-disabled': disabled && !current,
}, props.className), children: children }));
}
BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
const _BreadcrumbsItem = React.forwardRef(BreadcrumbsItem);
exports.BreadcrumbsItem = _BreadcrumbsItem;
//# sourceMappingURL=BreadcrumbsItem.js.map