@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;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("../Button"));
var _Anchor = _interopRequireDefault(require("../Anchor"));
var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
var _P = _interopRequireDefault(require("../../elements/P"));
var _home = _interopRequireDefault(require("../../icons/home"));
var _shared = require("../../shared");
var _Context = _interopRequireDefault(require("../../shared/Context"));
var _componentHelper = require("../../shared/component-helper");
const _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "itemNo"];
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); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
const useLayoutEffect = typeof window === 'undefined' ? _react.default.useEffect : _react.default.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.default.useContext(_Context.default);
  const {
    theme,
    translation: {
      Breadcrumb: {
        homeText
      }
    }
  } = context;
  const _extendPropsWithConte = (0, _componentHelper.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 = (0, _shared.useMediaQuery)({
    matchOnSSR: true,
    when: {
      max: 'medium'
    }
  });
  const [currentIcon, setCurrentIcon] = _react.default.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' ? _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