@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
83 lines (82 loc) • 2.67 kB
JavaScript
"use client";
import { useContext } from 'react';
import Anchor from "../Anchor.js";
import IconPrimary from "../icon-primary/IconPrimary.js";
import P from "../../elements/P.js";
import homeIcon from "../../icons/home.js";
import Context from "../../shared/Context.js";
import { extendPropsWithContext } from "../../shared/component-helper.js";
import BreadcrumbItemContext from "./BreadcrumbItemContext.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const determineIcon = variant => {
switch (variant) {
case 'home':
return 'home-icon';
case 'single':
return 'chevron_left';
default:
return 'chevron_right';
}
};
const BreadcrumbItem = localProps => {
const context = useContext(Context);
const breadcrumbItemContext = useContext(BreadcrumbItemContext);
const {
translation: {
Breadcrumb: {
homeText
}
}
} = context;
const {
text,
href,
icon,
onClick,
variant,
skeleton,
itemNo: itemNoProp,
...props
} = extendPropsWithContext(localProps, {}, context?.BreadcrumbItem);
const itemNo = itemNoProp !== null && itemNoProp !== void 0 ? itemNoProp : breadcrumbItemContext?.itemNo;
const currentIcon = icon !== null && icon !== void 0 ? icon : determineIcon(variant);
const currentText = text || variant === 'home' && homeText || '';
const isInteractive = (href || onClick || props.to) && variant !== 'current';
const style = {
'--delay': String(itemNo)
};
const iconToUse = variant === 'home' || currentIcon === 'home-icon' ? homeIcon : currentIcon;
return _jsx("li", {
className: "dnb-breadcrumb__item",
"aria-current": variant === 'current' ? 'page' : undefined,
style: style,
children: isInteractive ? _jsxs(_Fragment, {
children: [variant !== 'home' && _jsx(IconPrimary, {
icon: iconToUse,
className: "dnb-breadcrumb__item__span__icon"
}), _jsx(Anchor, {
href: href,
onClick: onClick,
icon: variant === 'home' ? iconToUse : null,
skeleton: skeleton,
...props,
children: currentText
})]
}) : _jsxs("span", {
className: "dnb-breadcrumb__item__span",
children: [_jsx(IconPrimary, {
icon: iconToUse,
className: "dnb-breadcrumb__item__span__icon"
}), _jsx(P, {
space: "0",
children: currentText
})]
})
});
};
withComponentMarkers(BreadcrumbItem, {
_supportsSpacingProps: true
});
export default BreadcrumbItem;
//# sourceMappingURL=BreadcrumbItem.js.map