@talend/react-components/lib/Breadcrumbs/Breadcrumbs.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BreadcrumbsComponent = BreadcrumbsComponent;
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactI18next = require("react-i18next");
var _utils = require("@talend/utils");
var _BreadcrumbsModule = _interopRequireDefault(require("./Breadcrumbs.module.scss"));
var _Actions = require("../Actions");
var _Skeleton = _interopRequireDefault(require("../Skeleton/Skeleton.component"));
var _constants = _interopRequireDefault(require("../constants"));
var _translate = _interopRequireDefault(require("../translate"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * Default max items to display
 * @type {number}
 */const DEFAULT_MAX_ITEMS = 4;

/**
 * Default number of items before adding an ellipsis
 * @type {number}
 */
const DEFAULT_NB_ITEMS_BEFORE_ELLIPSIS = 1;
const BREADCRUMB_SKELETON = [{
  type: _Skeleton.default.TYPES.text,
  size: _Skeleton.default.SIZES.large
}, {
  type: _Skeleton.default.TYPES.circle,
  size: _Skeleton.default.SIZES.small
}, {
  type: _Skeleton.default.TYPES.text,
  size: _Skeleton.default.SIZES.large
}];

/**
 * Indicate the current page location within a navigational hierarchy.
 * @param {object} props   react props
 * @example
 <Breadcrumbs
 maxItems={4}
 items={items}
 />
 */
function BreadcrumbsComponent({
  loading,
  id,
  items,
  maxItems,
  t
}) {
  if (loading) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(_BreadcrumbsModule.default['tc-breadcrumb'], _BreadcrumbsModule.default.loading, 'tc-breadcrumb', 'tc-breadcrumb--loading'),
      children: BREADCRUMB_SKELETON.map(({
        size,
        type
      }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
        size: size,
        type: type
      }, index))
    });
  }
  const nbItems = items.length;
  const maxItemsReached = nbItems > maxItems;
  const ellipsisIndex = nbItems - maxItems + DEFAULT_NB_ITEMS_BEFORE_ELLIPSIS;
  const hiddenItems = items.slice(DEFAULT_NB_ITEMS_BEFORE_ELLIPSIS, ellipsisIndex + 1).map((hiddenItem, index) => ({
    id: `${id}-item-${index + DEFAULT_NB_ITEMS_BEFORE_ELLIPSIS}`,
    label: hiddenItem.text,
    title: hiddenItem.title,
    onClick: event => hiddenItem.onClick(event, hiddenItem)
  }));

  /**
   * Render breadcrumb item
   * @param item Plain object representative of breadcrumb item
   * @param index Item position
   * @returns {*} Breadcrumb item rendering depending of its position
   */
  function renderBreadcrumbItem(item, index) {
    const {
      text,
      title,
      onClick
    } = item;
    const isActive = index === nbItems - 1;
    const itemId = `${id}-item-${index}`;

    /**
     * Wrapper for onClick in order to return item
     * @param args Arguments of default onClick callback
     * @returns {Function} New callback with the item
     */
    let wrappedOnClick;
    if (onClick) {
      wrappedOnClick = event => onClick(event, item);
    }
    function getItemContent() {
      if (!isActive && onClick) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.Action, {
          id: itemId,
          bsStyle: "link",
          role: "link",
          title: title || text,
          "aria-label": title,
          label: text,
          onClick: wrappedOnClick
        });
      }
      const ariaCurrent = isActive ? 'page' : undefined;
      return (
        /*#__PURE__*/
        // bug in eslint a11y plugin, fixed in version 6.
        // But to upgrade we need to upgrade the whole package (eslint, airbnb, a11y, react)
        // eslint-disable-next-line jsx-a11y/aria-props
        (0, _jsxRuntime.jsx)("span", {
          id: itemId,
          title: title,
          "aria-current": ariaCurrent,
          children: text
        })
      );
    }
    if (maxItemsReached && index > 0 && index < ellipsisIndex) {
      return undefined;
    }
    if (maxItemsReached && index === ellipsisIndex) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
        className: "tc-breadcrumb-menu",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Actions.ActionDropdown, {
          id: `${id}-ellipsis`,
          items: hiddenItems,
          "aria-label": t('BREADCRUMB_OPEN_FIRST_LINKS_MENU', {
            defaultValue: 'Show breadcrumb links'
          }),
          label: "\u2026",
          link: true,
          noCaret: true
        })
      }, index + 0.1);
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
      className: (0, _classnames.default)('tc-breadcrumb-item', {
        active: isActive
      }),
      children: getItemContent()
    }, index);
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
    "aria-label": t('BREADCRUMB', {
      defaultValue: 'breadcrumb'
    }),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
      id: id,
      className: (0, _classnames.default)('breadcrumb', _BreadcrumbsModule.default['tc-breadcrumb'], 'tc-breadcrumb'),
      children: items.map(renderBreadcrumbItem)
    })
  });
}
BreadcrumbsComponent.displayName = 'Breadcrumbs';
if (process.env.NODE_ENV !== 'production') {
  BreadcrumbsComponent.propTypes = {
    id: _propTypes.default.string,
    loading: _propTypes.default.bool,
    items: _propTypes.default.arrayOf(_propTypes.default.shape({
      text: _propTypes.default.string.isRequired,
      title: _propTypes.default.string,
      onClick: _propTypes.default.func
    })),
    maxItems: _propTypes.default.number,
    t: _propTypes.default.func
  };
}
BreadcrumbsComponent.defaultProps = {
  id: (0, _utils.randomUUID)(),
  items: [],
  maxItems: DEFAULT_MAX_ITEMS,
  t: (0, _translate.default)()
};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(BreadcrumbsComponent);
//# sourceMappingURL=Breadcrumbs.component.js.map