@redocly/theme/lib/components/Breadcrumbs/Breadcrumbs.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Breadcrumbs = Breadcrumbs;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
const BreadcrumbDropdown_1 = require("../../components/Breadcrumbs/BreadcrumbDropdown");
const BreadcrumbIcon_1 = require("../../components/Breadcrumbs/BreadcrumbIcon");
const utils_1 = require("../../core/utils");
const constants_1 = require("../../core/constants");
const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
function Breadcrumbs(props) {
    const { useBreadcrumbs, useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
    const { breadcrumbs: fileBreadcrumbs, currentItemSiblings } = useBreadcrumbs();
    const telemetry = useTelemetry();
    const { translate } = useTranslate();
    const breadcrumbs = react_1.default.useMemo(() => {
        var _a;
        const extra = (_a = props.additionalBreadcrumbs) !== null && _a !== void 0 ? _a : [];
        return [...(fileBreadcrumbs || []), ...extra];
    }, [fileBreadcrumbs, props.additionalBreadcrumbs]);
    const shouldCollapse = breadcrumbs.length > 4;
    const isInDropdown = (index, total, collapsed) => collapsed && index > 0 && index < total - 2;
    const items = react_1.default.useMemo(() => {
        const total = breadcrumbs.length;
        return breadcrumbs.map((b, i) => ({
            breadcrumb: b,
            idx: i,
            isLast: i === total - 1,
            inDropdown: isInDropdown(i, total, shouldCollapse),
        }));
    }, [breadcrumbs, shouldCollapse]);
    if (breadcrumbs.length === 0) {
        return null;
    }
    const renderBreadcrumb = (breadcrumb, idx, isActive) => {
        const isParentOfActive = idx === breadcrumbs.length - 2 && currentItemSiblings && currentItemSiblings.length > 0;
        if (isParentOfActive) {
            const currentActiveBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
            const siblingsWithActive = [
                Object.assign(Object.assign({}, currentActiveBreadcrumb), { isActive: true }),
                ...currentItemSiblings,
            ];
            const translatedLabel = translate(breadcrumb.labelTranslationKey, breadcrumb.label);
            return (react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: translatedLabel, items: siblingsWithActive, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage([
                    {
                        object: 'breadcrumb',
                        link: item.link,
                        position: itemIdx + 1,
                        totalBreadcrumbs: siblingsWithActive.length,
                    },
                ]) },
                react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: breadcrumb.icon }),
                (0, utils_1.trimText)(translatedLabel, constants_1.BREADCRUMB_MAX_LENGTH),
                react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: "chevron-down" })));
        }
        return (react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: translate(breadcrumb.labelTranslationKey, breadcrumb.label), isActive: isActive, icon: breadcrumb.icon, onClick: () => telemetry.sendBreadcrumbClickedMessage([
                {
                    object: 'breadcrumb',
                    link: breadcrumb.link,
                    position: idx + 1,
                    totalBreadcrumbs: breadcrumbs.length,
                },
            ]) }));
    };
    return (react_1.default.createElement(BreadcrumbsWrapper, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, items.map(({ breadcrumb, idx, isLast, inDropdown }) => {
        if (inDropdown)
            return null;
        if (shouldCollapse && idx === 0) {
            const collapsedBreadcrumbs = breadcrumbs.slice(1, -2);
            return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
                renderBreadcrumb(breadcrumb, idx, isLast),
                react_1.default.createElement(BreadcrumbSeparator, null, "/"),
                react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: "...", items: collapsedBreadcrumbs, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage([
                        {
                            object: 'breadcrumb',
                            link: item.link,
                            position: itemIdx + 1,
                            totalBreadcrumbs: breadcrumbs.length,
                        },
                    ]) }, "..."),
                react_1.default.createElement(BreadcrumbSeparator, null, "/")));
        }
        return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
            renderBreadcrumb(breadcrumb, idx, isLast),
            isLast ? null : react_1.default.createElement(BreadcrumbSeparator, null, "/")));
    })));
}
const BreadcrumbsWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--breadcrumbs-text-color);
  font-size: var(--breadcrumbs-font-size);
  flex-wrap: wrap;
`;
const BreadcrumbSeparator = styled_components_1.default.span `
  padding: var(--breadcrumbs-padding);
`;
//# sourceMappingURL=Breadcrumbs.js.map