pouncejs/dist/esm/components/Breadcrumbs/Breadcrumbs.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import AbstractButton from '../AbstractButton';
import Box from '../Box';
import Card from '../Card';
import Flex from '../Flex';
import Icon from '../Icon';
import Link from '../Link';
import { Popover, PopoverContent, PopoverTrigger } from '../Popover';

var BreadcrumbChevron = function BreadcrumbChevron() {
  return /*#__PURE__*/React.createElement(Icon, {
    type: "chevron-right",
    mx: 2,
    color: "blue-300",
    size: "medium",
    role: "presentation"
  });
};

var BreadcrumbLink = function BreadcrumbLink(_ref) {
  var crumb = _ref.crumb,
      _ref$isLastBreadcrumb = _ref.isLastBreadcrumb,
      isLastBreadcrumb = _ref$isLastBreadcrumb === void 0 ? false : _ref$isLastBreadcrumb,
      _ref$showChevron = _ref.showChevron,
      showChevron = _ref$showChevron === void 0 ? true : _ref$showChevron,
      rest = _objectWithoutPropertiesLoose(_ref, ["crumb", "isLastBreadcrumb", "showChevron"]);

  return /*#__PURE__*/React.createElement(Flex, {
    key: crumb.href,
    as: "li",
    alignItems: "center",
    fontSize: "medium",
    fontWeight: isLastBreadcrumb ? 'bold' : 'normal',
    "aria-current": isLastBreadcrumb ? 'page' : undefined
  }, /*#__PURE__*/React.createElement(Link, _extends({
    to: crumb.href,
    variant: "neutral",
    border: "none",
    truncated: true,
    maxWidth: "450px",
    "data-active": isLastBreadcrumb ? true : undefined
  }, rest), crumb.children), !isLastBreadcrumb && showChevron && /*#__PURE__*/React.createElement(BreadcrumbChevron, null));
};

var TruncatedBreadcrumbs = function TruncatedBreadcrumbs(_ref2) {
  var items = _ref2.items,
      rest = _objectWithoutPropertiesLoose(_ref2, ["items"]);

  var firstItem = items[0];
  var truncatedList = items.slice(1, -2);
  var remainingCrumbs = items.slice(-2);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BreadcrumbLink, _extends({
    crumb: firstItem
  }, rest)), /*#__PURE__*/React.createElement(Popover, null, function () {
    return /*#__PURE__*/React.createElement(Flex, {
      as: "li",
      alignItems: "center"
    }, /*#__PURE__*/React.createElement(PopoverTrigger, {
      as: AbstractButton,
      variantColor: "transparent",
      padding: 0,
      height: "auto",
      "aria-label": "Toggle additional breadcrumbs"
    }, "..."), /*#__PURE__*/React.createElement(PopoverContent, {
      alignment: "bottom-right"
    }, /*#__PURE__*/React.createElement(Card, {
      as: "ul",
      my: 1,
      px: 5,
      pt: 5,
      shadow: "dark300",
      minWidth: 180
    }, truncatedList.map(function (item) {
      return /*#__PURE__*/React.createElement(BreadcrumbLink, _extends({
        key: item.href,
        pb: 5,
        width: "100%",
        crumb: item,
        showChevron: false
      }, rest));
    }))), /*#__PURE__*/React.createElement(BreadcrumbChevron, null));
  }), remainingCrumbs.map(function (item, index) {
    var isLastBreadcrumb = index === 1;
    return /*#__PURE__*/React.createElement(BreadcrumbLink, _extends({
      key: item.href,
      crumb: item,
      isLastBreadcrumb: isLastBreadcrumb
    }, rest));
  }));
};
/** Breadcrumb is a way to navigate back to where you came from within the app */


var Breadcrumbs = function Breadcrumbs(_ref3) {
  var items = _ref3.items,
      _ref3$truncate = _ref3.truncate,
      truncate = _ref3$truncate === void 0 ? false : _ref3$truncate,
      rest = _objectWithoutPropertiesLoose(_ref3, ["items", "truncate"]);

  var truncateBreadcrumbs = truncate && items.length > 3;
  return /*#__PURE__*/React.createElement(Box, {
    as: "nav",
    "aria-label": "Breadcrumbs"
  }, /*#__PURE__*/React.createElement(Flex, {
    as: "ul"
  }, truncateBreadcrumbs ? /*#__PURE__*/React.createElement(TruncatedBreadcrumbs, _extends({
    items: items
  }, rest)) : /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (item, index) {
    var isLastBreadcrumb = index === items.length - 1;
    return /*#__PURE__*/React.createElement(BreadcrumbLink, _extends({
      key: item.href,
      crumb: item,
      isLastBreadcrumb: isLastBreadcrumb
    }, rest));
  }))));
};

export default Breadcrumbs;