@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
110 lines (109 loc) • 3.75 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "itemNo"];
import "core-js/modules/web.dom-collections.iterator.js";
import React from 'react';
import Button from '../Button';
import Anchor from '../Anchor';
import IconPrimary from '../icon-primary/IconPrimary';
import P from '../../elements/P';
import homeIcon from '../../icons/home';
import { useMediaQuery } from '../../shared';
import Context from '../../shared/Context';
import { extendPropsWithContext, filterProps } from '../../shared/component-helper';
const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
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 _extendPropsWithConte = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
{
text,
href,
icon,
onClick,
variant,
skeleton,
itemNo
} = _extendPropsWithConte,
props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
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 === null || theme === void 0 ? void 0 : 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