import * as React from "react" ; import * as ReactDOM from "react-dom" ; import { sp } from "@pnp/sp/presets/all" ; import { override } from '@microsoft/decorators' ; import { BaseApplicationCustomizer , PlaceholderContent , PlaceholderName } from '@microsoft/sp-application-base' ; import { TranslationBar } from "../components/TranslationBar" ; import { ITranslationBarProps } from "../components/ITranslationBarProps" ; import { ITranslationService } from "../../services/ITranslationService" ; import { TranslationService } from "../../services/TranslationService" ; export interface IMachineTranslationExtensionApplicationCustomizerProperties { supportedLanguages : string [ ] ; translatorApiKey : string ; translatorApiRegion : string ; regionSpecifier : string ; } /** A Custom Action which can be run during execution of a Client Side Application */ export default class MachineTranslationExtensionApplicationCustomizer extends BaseApplicationCustomizer < IMachineTranslationExtensionApplicationCustomizerProperties > { private _topPlaceholder : PlaceholderContent | undefined ; @ override public onInit ( ) { sp . setup ( this . context ) ; this . context . placeholderProvider . changedEvent . add ( this , this . _renderPlaceHolders ) ; this . context . application . navigatedEvent . add ( this , ( ) => { this . startReactRender ( ) ; } ) ; this . _renderPlaceHolders ( ) ; return Promise . resolve ( ) ; } private _renderPlaceHolders ( ) { if ( ! this . context . pageContext . listItem ) { return ; } if ( ! this . _topPlaceholder ) { this . _topPlaceholder = this . context . placeholderProvider . tryCreateContent ( PlaceholderName . Top , { onDispose : this . _onDispose } ) ; if ( ! this . _topPlaceholder ) { console . error ( 'The expected placeholder (Top) was not found.' ) ; return ; } const translationService = new TranslationService ( this . context . httpClient , this . properties . translatorApiKey , this . properties . translatorApiRegion , this . properties . regionSpecifier ) ; const props = { supportedLanguages : this . properties . supportedLanguages , currentPageId : this . context . pageContext . listItem . id , currentListId : this . context . pageContext . list . id . toString ( ) , currentWebUrl : this . context . pageContext . web . serverRelativeUrl , translationService } ; const elem = React . createElement ( TranslationBar , props ) ; ReactDOM . render ( elem , this . _topPlaceholder . domElement ) ; } } private startReactRender ( ) { if ( this . _topPlaceholder && this . _topPlaceholder . domElement ) { const translationService = new TranslationService ( this . context . httpClient , this . properties . translatorApiKey , this . properties . translatorApiRegion , this . properties . regionSpecifier ) ; const props = { supportedLanguages : this . properties . supportedLanguages , currentPageId : this . context . pageContext . listItem . id , currentListId : this . context . pageContext . list . id . toString ( ) , currentWebUrl : this . context . pageContext . web . serverRelativeUrl , translationService } ; const element = React . createElement ( TranslationBar , props ) ; ReactDOM . render ( element , this . _topPlaceholder . domElement ) ; } else { console . log ( 'DOM element of the header is undefined. Start to re-render.' ) ; this . _renderPlaceHolders ( ) ; } } private _onDispose ( ) { console . log ( '[ReactHeaderFooterApplicationCustomizer._onDispose] Disposed custom top and bottom placeholders.' ) ; } }