@redocly/theme
Version:
Shared UI components lib
54 lines (51 loc) • 2.11 kB
JavaScript
"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");
function Breadcrumbs(props) {
const { useBreadcrumbs, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
const otelTelemetry = useOtelTelemetry();
const breadcrumbs = useBreadcrumbs();
if (breadcrumbs.length === 0) {
return null;
}
return (react_1.default.createElement(BreadcrumbsWrapper, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, breadcrumbs.map((breadcrumb, idx) => {
const isLast = idx === breadcrumbs.length - 1;
return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast, onClick: () => {
otelTelemetry.send({
type: 'breadcrumb.clicked',
payload: {
link: breadcrumb.link,
position: idx + 1,
total_breadcrumbs: breadcrumbs.length,
},
});
} }),
isLast ? null : react_1.default.createElement("span", 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;
> div {
padding: var(--breadcrumbs-padding);
}
> span {
padding: var(--breadcrumbs-gap);
}
@media print {
display: none;
}
`;
//# sourceMappingURL=Breadcrumbs.js.map