import React from 'react' ; import ReactDOM from 'react-dom' ; import { pairwise , startWith } from 'rxjs/operators' ; import type { InternalChromeStart } from '../chrome' ; import type { InternalApplicationStart } from '../application' ; import type { OverlayStart } from '../overlays' ; import type { ThemeServiceStart } from '../theme' ; import type { I18nStart } from '../i18n' ; import { CoreContextProvider } from '../utils' ; import { AppWrapper } from './app_containers' ; export interface StartDeps { application : InternalApplicationStart ; chrome : InternalChromeStart ; overlays : OverlayStart ; targetDomElement : HTMLDivElement ; theme : ThemeServiceStart ; i18n : I18nStart ; } internalRemarks internal export class RenderingService { start ( { application , chrome , overlays , theme , i18n , targetDomElement } ) { const chromeHeader = chrome . getHeaderComponent ( ) ; const appComponent = application . getComponent ( ) ; const bannerComponent = overlays . banners . getComponent ( ) ; const body = document . querySelector ( 'body' ) ! ; chrome . getBodyClasses$ ( ) . pipe ( startWith < string [ ] > ( [ ] ) , pairwise ( ) ) . subscribe ( ( [ previousClasses , newClasses ] ) => { body . classList . remove ( ... previousClasses ) ; body . classList . add ( ... newClasses ) ; } ) ; ReactDOM . render ( < CoreContextProvider i18n = { i18n } theme = { theme } > < > { } { chromeHeader } { } < div id = "globalBannerList" > { bannerComponent } < /div> { } < AppWrapper chromeVisible$ = { chrome . getIsVisible$ ( ) } > { } < div id = "app-fixed-viewport" / > { } { appComponent } < /AppWrapper> < /> < /CoreContextProvider>, targetDomElement); } }