import * as React from "react" ; import { ISiteBreadcrumbProps , ISiteBreadcrumbState , IWebInfo } from "./ISiteBreadcrumb" ; import { Breadcrumb , IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb' ; import { SPHttpClient , HttpClientResponse } from "@microsoft/sp-http" ; import styles from './SiteBreadcrumb.module.scss' ; export default class SiteBreadcrumb extends React . Component < ISiteBreadcrumbProps , ISiteBreadcrumbState > { private _linkItems : IBreadcrumbItem [ ] ; constructor ( props ) { super ( props ) ; this . _linkItems = [ ] ; this . state = { breadcrumbItems : [ ] } ; } /**
     * React component lifecycle hook, runs after render
     */ public componentDidMount ( ) { this . _generateLinks ( ) ; } /**
     * Start the link generation for the breadcrumb
     */ private _generateLinks ( ) { 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 . serverRelativeUrl } ) ; if ( ! ! this . props . context . pageContext . list . serverRelativeUrl ) { 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 } ) ; } if ( this . props . context . pageContext . site . serverRelativeUrl === this . props . context . pageContext . web . serverRelativeUrl ) { this . _setBreadcrumbData ( ) ; } else { this . _getParentWeb ( this . props . context . pageContext . web . absoluteUrl ) ; } } param webUrl private _getParentWeb ( webUrl ) { const apiUrl = `${ webUrl }/_api/web/parentweb?$select=Id,Title,ServerRelativeUrl` ; this . props . context . spHttpClient . get ( apiUrl , SPHttpClient . configurations . v1 ) . then ( ( response ) => { return response . json ( ) ; } ) . then ( ( webInfo ) => { if ( ! webInfo . error ) { if ( ! webInfo . ServerRelativeUrl && ! webInfo . Title ) { this . _setBreadcrumbData ( ) ; return ; } this . _linkItems . unshift ( { text : webInfo . Title , key : webInfo . Id , href : webInfo . ServerRelativeUrl } ) ; if ( webInfo . ServerRelativeUrl === this . props . context . pageContext . site . serverRelativeUrl ) { this . _setBreadcrumbData ( ) ; } else { webUrl = webUrl . substring ( 0 , ( webUrl . indexOf ( `${ webInfo . ServerRelativeUrl }/` ) + webInfo . ServerRelativeUrl . length ) ) ; this . _getParentWeb ( webUrl ) ; } } else { this . _setBreadcrumbData ( ) ; } } ) ; } /**
     * Set the current breadcrumb data
     */ private _setBreadcrumbData ( ) { this . setState ( { breadcrumbItems : this . _linkItems } ) ; } /**
     * Default React component render method
     */ public render ( ) { return ( < div className = { styles . breadcrumb } > < div className = { styles . msBgColorThemePrimary } > < Breadcrumb items = { this . state . breadcrumbItems } ariaLabel = { 'Website breadcrumb' } className = { styles . breadcrumbLinks } / > < /div> < /div>); } }