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

DNB Eufemia Design System UI Library

"use client";

import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
import clsx from 'clsx';
import { createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import { applySpacing } from "../space/SpacingUtils.js";
import Section from "../section/Section.js";
import Button from "../button/Button.js";
import Context from "../../shared/Context.js";
import BreadcrumbItem from "./BreadcrumbItem.js";
import { convertJsxToString, validateDOMAttributes, extendPropsWithContext } from "../../shared/component-helper.js";
import { BreadcrumbMultiple } from "./BreadcrumbMultiple.js";
import { useMedia, useTheme } from "../../shared/index.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const defaultProps = {
  skeleton: false,
  navText: 'Back',
  goBackText: 'Back',
  homeText: 'Home',
  backToText: 'Back to...',
  collapsed: true,
  backgroundColor: 'transparent',
  collapsedStyleType: 'information',
  spacing: false
};
const Breadcrumb = localProps => {
  var _context$translation, _useTheme;
  const context = React.useContext(Context);
  const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 || (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  });
  const {
    className,
    skeleton,
    children: items,
    variant,
    onClick,
    navText,
    goBackText,
    homeText,
    backToText,
    backgroundColor,
    collapsedStyleType,
    collapsed: overrideCollapsed,
    spacing,
    noAnimation,
    data,
    href,
    onToggle,
    ...props
  } = allProps;
  const skeletonClasses = createSkeletonClass('font', skeleton, context);
  const [, forceUpdate] = useReducer(() => ({}), {});
  const isCollapsedRef = useRef(overrideCollapsed);
  const {
    isLarge
  } = useMedia();
  useEffect(() => {
    if (overrideCollapsed !== isCollapsedRef.current) {
      isCollapsedRef.current = overrideCollapsed;
      forceUpdate();
    }
  }, [overrideCollapsed]);
  useEffect(() => {
    if (isLarge && overrideCollapsed !== false) {
      if (isCollapsedRef.current === false) {
        onToggle === null || onToggle === void 0 || onToggle(true);
      }
      isCollapsedRef.current = true;
      forceUpdate();
    }
  }, [isLarge, overrideCollapsed, onToggle]);
  const onClickHandler = useCallback(() => {
    isCollapsedRef.current = !isCollapsedRef.current;
    forceUpdate();
    onToggle === null || onToggle === void 0 || onToggle(isCollapsedRef.current);
  }, [onToggle]);
  const currentVariant = useMemo(() => {
    if (!variant) {
      if (items || data) {
        return 'responsive';
      } else {
        return 'single';
      }
    }
    return variant;
  }, [data, items, variant]);
  validateDOMAttributes(allProps, props);
  const innerSpace = spacing ? spacing === true ? 'small' : spacing : undefined;
  const overrideSbankenSectionColor = ((_useTheme = useTheme()) === null || _useTheme === void 0 ? void 0 : _useTheme.isSbanken) && collapsedStyleType === 'information';
  const navProps = applySpacing(allProps, {
    ...props,
    'aria-label': convertJsxToString(navText),
    className: clsx(`dnb-breadcrumb dnb-breadcrumb--variant-${currentVariant}`, skeletonClasses, className)
  });
  return _jsxs("nav", {
    ...navProps,
    children: [_jsx(Section, {
      className: "dnb-breadcrumb__bar",
      backgroundColor: backgroundColor || 'transparent',
      innerSpace: innerSpace,
      children: currentVariant === 'single' ? _jsx(Button, {
        text: goBackText,
        variant: "tertiary",
        icon: "chevron_left",
        iconPosition: "left",
        onClick: onClick,
        href: href
      }) : _jsxs(_Fragment, {
        children: [currentVariant !== 'multiple' && _jsx(Button, {
          className: "dnb-breadcrumb__toggle",
          text: backToText,
          variant: "tertiary",
          icon: "chevron_left",
          iconPosition: "left",
          onClick: onClick !== null && onClick !== void 0 ? onClick : onClickHandler,
          "aria-expanded": !isCollapsedRef.current
        }), currentVariant !== 'collapse' && _jsx(BreadcrumbMultiple, {
          data: data,
          items: items,
          collapsed: false,
          noAnimation: noAnimation
        })]
      })
    }), (currentVariant === 'collapse' || currentVariant === 'responsive') && _jsx(Section, {
      variant: overrideSbankenSectionColor ? undefined : collapsedStyleType,
      className: "dnb-breadcrumb__collapse",
      backgroundColor: overrideSbankenSectionColor ? 'var(--sb-color-gray-light-2)' : undefined,
      children: _jsx(BreadcrumbMultiple, {
        data: data,
        items: items,
        collapsed: isCollapsedRef.current,
        noAnimation: noAnimation
      })
    })]
  });
};
Breadcrumb.Item = BreadcrumbItem;
export { BreadcrumbItem };
withComponentMarkers(Breadcrumb, {
  _supportsSpacingProps: true
});
export default Breadcrumb;
//# sourceMappingURL=Breadcrumb.js.map