pouncejs/dist/cjs/components/Breadcrumbs/Breadcrumbs.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _AbstractButton = _interopRequireDefault(require("../AbstractButton"));

var _Box = _interopRequireDefault(require("../Box"));

var _Card = _interopRequireDefault(require("../Card"));

var _Flex = _interopRequireDefault(require("../Flex"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Link = _interopRequireDefault(require("../Link"));

var _Popover = require("../Popover");

var BreadcrumbChevron = function BreadcrumbChevron() {
  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
    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 = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["crumb", "isLastBreadcrumb", "showChevron"]);
  return /*#__PURE__*/_react.default.createElement(_Flex.default, {
    key: crumb.href,
    as: "li",
    alignItems: "center",
    fontSize: "medium",
    fontWeight: isLastBreadcrumb ? 'bold' : 'normal',
    "aria-current": isLastBreadcrumb ? 'page' : undefined
  }, /*#__PURE__*/_react.default.createElement(_Link.default, (0, _extends2.default)({
    to: crumb.href,
    variant: "neutral",
    border: "none",
    truncated: true,
    maxWidth: "450px",
    "data-active": isLastBreadcrumb ? true : undefined
  }, rest), crumb.children), !isLastBreadcrumb && showChevron && /*#__PURE__*/_react.default.createElement(BreadcrumbChevron, null));
};

var TruncatedBreadcrumbs = function TruncatedBreadcrumbs(_ref2) {
  var items = _ref2.items,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["items"]);
  var firstItem = items[0];
  var truncatedList = items.slice(1, -2);
  var remainingCrumbs = items.slice(-2);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BreadcrumbLink, (0, _extends2.default)({
    crumb: firstItem
  }, rest)), /*#__PURE__*/_react.default.createElement(_Popover.Popover, null, function () {
    return /*#__PURE__*/_react.default.createElement(_Flex.default, {
      as: "li",
      alignItems: "center"
    }, /*#__PURE__*/_react.default.createElement(_Popover.PopoverTrigger, {
      as: _AbstractButton.default,
      variantColor: "transparent",
      padding: 0,
      height: "auto",
      "aria-label": "Toggle additional breadcrumbs"
    }, "..."), /*#__PURE__*/_react.default.createElement(_Popover.PopoverContent, {
      alignment: "bottom-right"
    }, /*#__PURE__*/_react.default.createElement(_Card.default, {
      as: "ul",
      my: 1,
      px: 5,
      pt: 5,
      shadow: "dark300",
      minWidth: 180
    }, truncatedList.map(function (item) {
      return /*#__PURE__*/_react.default.createElement(BreadcrumbLink, (0, _extends2.default)({
        key: item.href,
        pb: 5,
        width: "100%",
        crumb: item,
        showChevron: false
      }, rest));
    }))), /*#__PURE__*/_react.default.createElement(BreadcrumbChevron, null));
  }), remainingCrumbs.map(function (item, index) {
    var isLastBreadcrumb = index === 1;
    return /*#__PURE__*/_react.default.createElement(BreadcrumbLink, (0, _extends2.default)({
      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 = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["items", "truncate"]);
  var truncateBreadcrumbs = truncate && items.length > 3;
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    as: "nav",
    "aria-label": "Breadcrumbs"
  }, /*#__PURE__*/_react.default.createElement(_Flex.default, {
    as: "ul"
  }, truncateBreadcrumbs ? /*#__PURE__*/_react.default.createElement(TruncatedBreadcrumbs, (0, _extends2.default)({
    items: items
  }, rest)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map(function (item, index) {
    var isLastBreadcrumb = index === items.length - 1;
    return /*#__PURE__*/_react.default.createElement(BreadcrumbLink, (0, _extends2.default)({
      key: item.href,
      crumb: item,
      isLastBreadcrumb: isLastBreadcrumb
    }, rest));
  }))));
};

var _default = Breadcrumbs;
exports.default = _default;