@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
133 lines • 5.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SiteBreadcrumb = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var strings = tslib_1.__importStar(require("ControlStrings"));
var Breadcrumb_1 = require("@fluentui/react/lib/Breadcrumb");
var sp_core_library_1 = require("@microsoft/sp-core-library");
var sp_http_1 = require("@microsoft/sp-http");
var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
var SiteBreadcrumb_module_scss_1 = tslib_1.__importDefault(require("./SiteBreadcrumb.module.scss"));
/**
* Site breadcrumb component
*/
var SiteBreadcrumb = /** @class */ (function (_super) {
tslib_1.__extends(SiteBreadcrumb, _super);
function SiteBreadcrumb(props) {
var _this = _super.call(this, props) || this;
telemetry.track('ReactSiteBreadcrumb');
// Initiate the private link items variable
_this._linkItems = [];
// Initiate the component state
_this.state = {
breadcrumbItems: []
};
return _this;
}
/**
* React component lifecycle hook, runs after render
*/
SiteBreadcrumb.prototype.componentDidMount = function () {
// Start generating the links for the breadcrumb
this._generateLinks();
};
/**
* Start the link generation for the breadcrumb
*/
SiteBreadcrumb.prototype._generateLinks = function () {
// Add the current site to the links list
this._linkItems.push({
text: this.props.context.pageContext.web.title,
key: this.props.context.pageContext.web.id.toString(),
href: this.props.context.pageContext.web.absoluteUrl,
isCurrentItem: !!this.props.context.pageContext.list && !this.props.context.pageContext.list.serverRelativeUrl
});
// Check if the current list URL is available
if (!!this.props.context.pageContext.list && !!this.props.context.pageContext.list.serverRelativeUrl) {
// Add the current list to the links list
this._linkItems.push({
text: this.props.context.pageContext.list.title,
key: this.props.context.pageContext.list.id.toString(),
href: this.props.context.pageContext.list.serverRelativeUrl,
isCurrentItem: true
});
}
// Check if you are already on the root site
if (this.props.context.pageContext.site.serverRelativeUrl === this.props.context.pageContext.web.serverRelativeUrl) {
this._setBreadcrumbData();
}
else {
if (sp_core_library_1.Environment.type === sp_core_library_1.EnvironmentType.Local) {
// Nothing to do right now
this._setBreadcrumbData();
}
else {
// Retrieve the parent webs information
this._getParentWeb(this.props.context.pageContext.web.absoluteUrl);
}
}
};
/**
* Retrieve the parent web URLs
* @param webUrl Current URL of the web to process
*/
SiteBreadcrumb.prototype._getParentWeb = function (webUrl) {
var _this = this;
// Retrieve the parent web info
var apiUrl = "".concat(webUrl, "/_api/web/parentweb?$select=Id,Title,ServerRelativeUrl");
this.props.context.spHttpClient.get(apiUrl, sp_http_1.SPHttpClient.configurations.v1)
.then(function (response) {
return response.json();
})
.then(function (webInfo) {
if (!webInfo.error) {
// Check if the correct data is retrieved
if (!webInfo.ServerRelativeUrl && !webInfo.Title) {
_this._setBreadcrumbData();
return;
}
// Store the current site
_this._linkItems.unshift({
text: webInfo.Title,
key: webInfo.Id,
href: webInfo.ServerRelativeUrl
});
// Check if you retrieved all the information up until the root site
if (webInfo.ServerRelativeUrl === _this.props.context.pageContext.site.serverRelativeUrl) {
_this._setBreadcrumbData();
}
else {
// retrieve the information from the parent site
webUrl = webUrl.substring(0, (webUrl.indexOf("".concat(webInfo.ServerRelativeUrl, "/")) + webInfo.ServerRelativeUrl.length));
_this._getParentWeb(webUrl);
}
}
else {
// Set the current breadcrumb data which is already retrieved
_this._setBreadcrumbData();
}
})
.catch(function () {
// no-op;
});
};
/**
* Set the current breadcrumb data
*/
SiteBreadcrumb.prototype._setBreadcrumbData = function () {
this.setState({
breadcrumbItems: this._linkItems
});
};
/**
* Default React component render method
*/
SiteBreadcrumb.prototype.render = function () {
return (React.createElement("div", { className: SiteBreadcrumb_module_scss_1.default.breadcrumb },
React.createElement(Breadcrumb_1.Breadcrumb, { items: this.state.breadcrumbItems, ariaLabel: strings.SiteBreadcrumbLabel, className: SiteBreadcrumb_module_scss_1.default.breadcrumbLinks })));
};
return SiteBreadcrumb;
}(React.Component));
exports.SiteBreadcrumb = SiteBreadcrumb;
//# sourceMappingURL=SiteBreadcrumb.js.map