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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _Anchor = _interopRequireDefault(require("../Anchor.js"));
var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary.js"));
var _P = _interopRequireDefault(require("../../elements/P.js"));
var _home = _interopRequireDefault(require("../../icons/home.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _BreadcrumbItemContext = _interopRequireDefault(require("./BreadcrumbItemContext.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const determineIcon = variant => {
  switch (variant) {
    case 'home':
      return 'home-icon';
    case 'single':
      return 'chevron_left';
    default:
      return 'chevron_right';
  }
};
const BreadcrumbItem = localProps => {
  const context = (0, _react.useContext)(_Context.default);
  const breadcrumbItemContext = (0, _react.useContext)(_BreadcrumbItemContext.default);
  const {
    translation: {
      Breadcrumb: {
        homeText
      }
    }
  } = context;
  const {
    text,
    href,
    icon,
    onClick,
    variant,
    skeleton,
    itemNo: itemNoProp,
    ...props
  } = (0, _componentHelper.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' ? _home.default : currentIcon;
  return (0, _jsxRuntime.jsx)("li", {
    className: "dnb-breadcrumb__item",
    "aria-current": variant === 'current' ? 'page' : undefined,
    style: style,
    children: isInteractive ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [variant !== 'home' && (0, _jsxRuntime.jsx)(_IconPrimary.default, {
        icon: iconToUse,
        className: "dnb-breadcrumb__item__span__icon"
      }), (0, _jsxRuntime.jsx)(_Anchor.default, {
        href: href,
        onClick: onClick,
        icon: variant === 'home' ? iconToUse : null,
        skeleton: skeleton,
        ...props,
        children: currentText
      })]
    }) : (0, _jsxRuntime.jsxs)("span", {
      className: "dnb-breadcrumb__item__span",
      children: [(0, _jsxRuntime.jsx)(_IconPrimary.default, {
        icon: iconToUse,
        className: "dnb-breadcrumb__item__span__icon"
      }), (0, _jsxRuntime.jsx)(_P.default, {
        space: "0",
        children: currentText
      })]
    })
  });
};
(0, _withComponentMarkers.default)(BreadcrumbItem, {
  _supportsSpacingProps: true
});
var _default = exports.default = BreadcrumbItem;
//# sourceMappingURL=BreadcrumbItem.js.map