mui-spfx-controls
Version:
SPFx component library built with MUI
50 lines • 2.96 kB
JavaScript
import { __assign, __awaiter, __generator, __rest } from "tslib";
import { Home } from '@mui/icons-material';
import { Breadcrumbs, Link, Typography } from '@mui/material';
import { Logger } from '@pnp/logging';
import React, { forwardRef, useEffect, useState, } from 'react';
import { SiteService } from '../../services/SiteService';
var SiteBreadcrumb = forwardRef(function (_a, ref) {
var context = _a.context, renderFirstItem = _a.renderFirstItem, renderItem = _a.renderItem, renderLastItem = _a.renderLastItem, breadcrumbProps = __rest(_a, ["context", "renderFirstItem", "renderItem", "renderLastItem"]);
var siteService = new SiteService(context);
var _b = useState([]), breadcrumbData = _b[0], setBreadcrumbData = _b[1];
useEffect(function () {
var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
var generatedBreadcrumbData, error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
return [4 /*yield*/, siteService.getBreadcrumbData()];
case 1:
generatedBreadcrumbData = _a.sent();
setBreadcrumbData(generatedBreadcrumbData);
return [3 /*break*/, 3];
case 2:
error_1 = _a.sent();
Logger.error(error_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); };
fetchData();
}, []);
return (React.createElement(Breadcrumbs, __assign({ "data-testid": "mui-spfx-breadcrumb", maxItems: 5, "aria-label": "breadcrumb" }, breadcrumbProps, { ref: ref }), breadcrumbData
? breadcrumbData.map(function (data, index) {
if (index === 0) {
return renderFirstItem ? (renderFirstItem(data)) : (React.createElement(Link, { "aria-label": "Home", href: data.href, underline: "hover", key: "".concat(data.key, "-").concat(index), sx: { display: 'flex', alignItems: 'center' } },
React.createElement(Home, { fontSize: "inherit", sx: { mr: 0.5 } }),
data.label));
}
else if (index === breadcrumbData.length - 1) {
return renderLastItem ? (renderLastItem(data)) : (React.createElement(Typography, { "aria-label": "Current site", color: "textSecondary", key: "".concat(data.key, "-").concat(index) }, data.label));
}
else {
return renderItem ? (renderItem(data)) : (React.createElement(Link, { "aria-label": "Site links", underline: "hover", href: data.href, key: "".concat(data.key, "-").concat(index) }, data.label));
}
})
: null));
});
export default SiteBreadcrumb;
//# sourceMappingURL=SiteBreadcrumb.js.map