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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "noAnimation", "data", "href", "onToggle"];
import "core-js/modules/web.dom-collections.iterator.js";
import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
import classnames from 'classnames';
import { createSkeletonClass } from '../skeleton/SkeletonHelper';
import { createSpacingClasses } from '../space/SpacingHelper';
import Section from '../section/Section';
import Button from '../button/Button';
import Context from '../../shared/Context';
import BreadcrumbItem from './BreadcrumbItem';
import { convertJsxToString, isTrue, validateDOMAttributes, extendPropsWithContext } from '../../shared/component-helper';
import { BreadcrumbMultiple } from './BreadcrumbMultiple';
import { useMedia, useTheme } from '../../shared';
export const defaultProps = {
  skeleton: false,
  navText: 'Back',
  goBackText: 'Back',
  homeText: 'Home',
  backToText: 'Back to...',
  isCollapsed: true,
  styleType: 'transparent',
  collapsedStyleType: 'info',
  spacing: false
};
const Breadcrumb = localProps => {
  var _context$translation, _useTheme;
  const context = React.useContext(Context);
  const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? 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,
      styleType,
      collapsedStyleType,
      isCollapsed: overrideIsCollapsed,
      spacing,
      noAnimation,
      data,
      href,
      onToggle
    } = allProps,
    props = _objectWithoutProperties(allProps, _excluded);
  const skeletonClasses = createSkeletonClass('font', skeleton, context);
  const spacingClasses = createSpacingClasses(props);
  const [, forceUpdate] = useReducer(() => ({}), {});
  const isCollapsedRef = useRef(overrideIsCollapsed);
  const {
    isLarge
  } = useMedia();
  useEffect(() => {
    if (overrideIsCollapsed !== isCollapsedRef.current) {
      isCollapsedRef.current = overrideIsCollapsed;
      forceUpdate();
    }
  }, [overrideIsCollapsed]);
  useEffect(() => {
    if (isLarge && overrideIsCollapsed !== false) {
      if (isCollapsedRef.current === false) {
        onToggle === null || onToggle === void 0 ? void 0 : onToggle(true);
      }
      isCollapsedRef.current = true;
      forceUpdate();
    }
  }, [isLarge, overrideIsCollapsed, onToggle]);
  const onClickHandler = useCallback(() => {
    isCollapsedRef.current = !isCollapsedRef.current;
    forceUpdate();
    onToggle === null || onToggle === void 0 ? 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 = isTrue(spacing) ? 'small' : spacing;
  const overrideSbankenSectionColor = ((_useTheme = useTheme()) === null || _useTheme === void 0 ? void 0 : _useTheme.isSbanken) && collapsedStyleType === 'info';
  return React.createElement("nav", _extends({
    "aria-label": convertJsxToString(navText),
    className: classnames(`dnb-breadcrumb dnb-breadcrumb--variant-${currentVariant}`, skeletonClasses, spacingClasses, className)
  }, props), React.createElement(Section, {
    className: "dnb-breadcrumb__bar",
    style_type: styleType || 'transparent',
    innerSpace: innerSpace
  }, currentVariant === 'single' ? React.createElement(Button, {
    text: goBackText,
    variant: "tertiary",
    icon: "chevron_left",
    icon_position: "left",
    onClick: onClick,
    href: href
  }) : React.createElement(React.Fragment, null, currentVariant !== 'multiple' && React.createElement(Button, {
    className: "dnb-breadcrumb__toggle",
    text: backToText,
    variant: "tertiary",
    icon: "chevron_left",
    icon_position: "left",
    onClick: onClick !== null && onClick !== void 0 ? onClick : onClickHandler,
    "aria-expanded": !isCollapsedRef.current
  }), currentVariant !== 'collapse' && React.createElement(BreadcrumbMultiple, {
    data: data,
    items: items,
    isCollapsed: false,
    noAnimation: noAnimation
  }))), (currentVariant === 'collapse' || currentVariant === 'responsive') && React.createElement(Section, {
    variant: overrideSbankenSectionColor ? undefined : collapsedStyleType,
    className: "dnb-breadcrumb__collapse",
    backgroundColor: overrideSbankenSectionColor ? 'var(--sb-color-gray-light-2)' : undefined
  }, React.createElement(BreadcrumbMultiple, {
    data: data,
    items: items,
    isCollapsed: isCollapsedRef.current,
    noAnimation: noAnimation
  })));
};
Breadcrumb.Item = BreadcrumbItem;
Breadcrumb._supportsSpacingProps = true;
export { BreadcrumbItem };
export default Breadcrumb;
//# sourceMappingURL=Breadcrumb.js.map