@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
106 lines (105 loc) • 3.34 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import Button from "../Button.js";
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 { useMediaQuery } from "../../shared/index.js";
import Context from "../../shared/Context.js";
import { extendPropsWithContext, filterProps } from "../../shared/component-helper.js";
import { useIsomorphicLayoutEffect as useLayoutEffect } from "../../shared/helpers/useIsomorphicLayoutEffect.js";
const defaultProps = {
text: null,
href: null,
icon: null,
onClick: null,
variant: null,
skeleton: null
};
const determineIcon = (variant, isSmallScreen) => {
switch (variant) {
case 'home':
return 'home-icon';
case 'single':
case 'collapse':
return 'chevron_left';
default:
return isSmallScreen ? 'chevron_left' : 'chevron_right';
}
};
const BreadcrumbItem = localProps => {
const context = React.useContext(Context);
const {
theme,
translation: {
Breadcrumb: {
homeText
}
}
} = context;
const {
text,
href,
icon,
onClick,
variant,
skeleton,
itemNo,
...props
} = extendPropsWithContext(localProps, defaultProps, context?.BreadcrumbItem);
const isSmallScreen = useMediaQuery({
matchOnSSR: true,
when: {
max: 'medium'
}
});
const [currentIcon, setCurrentIcon] = React.useState('chevron_left');
useLayoutEffect(() => {
if (!icon) {
setCurrentIcon(determineIcon(variant, isSmallScreen));
} else {
if (variant !== 'home') {
setCurrentIcon(icon !== null && icon !== void 0 ? icon : 'chevron_left');
}
}
}, [icon, isSmallScreen, 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 React.createElement("li", {
className: "dnb-breadcrumb__item",
"aria-current": variant === 'current' ? 'page' : undefined,
style: style
}, isInteractive ? theme?.name === 'sbanken' ? React.createElement(Button, _extends({
variant: "tertiary",
href: href,
icon: iconToUse,
icon_position: "left",
on_click: onClick,
text: currentText,
skeleton: skeleton
}, props)) : React.createElement(React.Fragment, null, variant !== 'home' && React.createElement(IconPrimary, {
icon: iconToUse,
className: "dnb-breadcrumb__item__span__icon"
}), React.createElement(Anchor, _extends({
href: href,
onClick: onClick,
icon: variant === 'home' ? iconToUse : null,
skeleton: skeleton
}, props), currentText)) : React.createElement("span", _extends({
className: "dnb-breadcrumb__item__span"
}, filterProps(props, key => !key.includes('-'))), React.createElement(IconPrimary, {
icon: iconToUse,
className: "dnb-breadcrumb__item__span__icon"
}), React.createElement(P, {
space: "0"
}, currentText)));
};
BreadcrumbItem._supportsSpacingProps = true;
export default BreadcrumbItem;
//# sourceMappingURL=BreadcrumbItem.js.map