@dnb/eufemia/components/breadcrumb/BreadcrumbItem.js

DNB Eufemia Design System UI Library

"use client";

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 } from "../../shared/component-helper.js";
import BreadcrumbItemContext from "./BreadcrumbItemContext.js";
import { useIsomorphicLayoutEffect as useLayoutEffect } from "../../shared/helpers/useIsomorphicLayoutEffect.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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 breadcrumbItemContext = React.useContext(BreadcrumbItemContext);
  const {
    theme,
    translation: {
      Breadcrumb: {
        homeText
      }
    }
  } = context;
  const {
    text,
    href,
    icon,
    onClick,
    variant,
    skeleton,
    itemNo: itemNoProp,
    ...props
  } = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem);
  const itemNo = itemNoProp !== null && itemNoProp !== void 0 ? itemNoProp : breadcrumbItemContext === null || breadcrumbItemContext === void 0 ? void 0 : breadcrumbItemContext.itemNo;
  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 _jsx("li", {
    className: "dnb-breadcrumb__item",
    "aria-current": variant === 'current' ? 'page' : undefined,
    style: style,
    children: isInteractive ? (theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken' ? _jsx(Button, {
      variant: "tertiary",
      href: href,
      icon: iconToUse,
      iconPosition: "left",
      onClick: onClick,
      text: currentText,
      skeleton: skeleton,
      ...props
    }) : _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