@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 _useIsomorphicLayoutEffect = require("../../shared/helpers/useIsomorphicLayoutEffect.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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 {
    theme,
    translation: {
      Breadcrumb: {
        homeText
      }
    }
  } = context;
  const {
    text,
    href,
    icon,
    onClick,
    variant,
    skeleton,
    itemNo,
    ...props
  } = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem);
  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 _react.default.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.default.createElement(_Button.default, _extends({
    variant: "tertiary",
    href: href,
    icon: iconToUse,
    icon_position: "left",
    on_click: onClick,
    text: currentText,
    skeleton: skeleton
  }, props)) : _react.default.createElement(_react.default.Fragment, null, variant !== 'home' && _react.default.createElement(_IconPrimary.default, {
    icon: iconToUse,
    className: "dnb-breadcrumb__item__span__icon"
  }), _react.default.createElement(_Anchor.default, _extends({
    href: href,
    onClick: onClick,
    icon: variant === 'home' ? iconToUse : null,
    skeleton: skeleton
  }, props), currentText)) : _react.default.createElement("span", _extends({
    className: "dnb-breadcrumb__item__span"
  }, (0, _componentHelper.filterProps)(props, key => !key.includes('-'))), _react.default.createElement(_IconPrimary.default, {
    icon: iconToUse,
    className: "dnb-breadcrumb__item__span__icon"
  }), _react.default.createElement(_P.default, {
    space: "0"
  }, currentText)));
};
BreadcrumbItem._supportsSpacingProps = true;
var _default = exports.default = BreadcrumbItem;
//# sourceMappingURL=BreadcrumbItem.js.map