@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 = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("../Button.js"));
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 _index = require("../../shared/index.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _BreadcrumbItemContext = _interopRequireDefault(require("./BreadcrumbItemContext.js"));
var _useIsomorphicLayoutEffect = require("../../shared/helpers/useIsomorphicLayoutEffect.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 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.default.useContext(_Context.default);
  const breadcrumbItemContext = _react.default.useContext(_BreadcrumbItemContext.default);
  const {
    theme,
    translation: {
      Breadcrumb: {
        homeText
      }
    }
  } = context;
  const {
    text,
    href,
    icon,
    onClick,
    variant,
    skeleton,
    itemNo: itemNoProp,
    ...props
  } = (0, _componentHelper.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 = (0, _index.useMediaQuery)({
    matchOnSSR: true,
    when: {
      max: 'medium'
    }
  });
  const [currentIcon, setCurrentIcon] = _react.default.useState('chevron_left');
  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
    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' ? _home.default : currentIcon;
  return (0, _jsxRuntime.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' ? (0, _jsxRuntime.jsx)(_Button.default, {
      variant: "tertiary",
      href: href,
      icon: iconToUse,
      iconPosition: "left",
      onClick: onClick,
      text: currentText,
      skeleton: skeleton,
      ...props
    }) : (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