import * as React from 'react' ; import * as ReactDom from 'react-dom' ; import { Version } from '@microsoft/sp-core-library' ; import { BaseClientSideWebPart , } from '@microsoft/sp-webpart-base' ; import { IPropertyPaneConfiguration , PropertyPaneTextField } from '@microsoft/sp-property-pane' ; import * as strings from 'ControlsTestWebPartStrings' ; import { TestControl , ITestControlProps } from './components/TestControl' ; import { IControlsTestProps } from './components/IControlsTestProps' ; import { IControlsTestWebPartProps } from './IControlsTestWebPartProps' ; import { IReadonlyTheme , ThemeChangedEventArgs , ThemeProvider , } from "@microsoft/sp-component-base" ; import ControlsTest from './components/ControlsTest' ; import ControlsTest_SingleComponent from './components/ControlsTest_SingleComponent' ; /**
 * Web part to test the React controls
 */ export default class ControlsTestWebPart extends BaseClientSideWebPart < IControlsTestWebPartProps > { private _themeProvider : ThemeProvider ; private _themeVariant : IReadonlyTheme | undefined ; protected async onInit ( ) { this . _themeProvider = this . context . serviceScope . consume ( ThemeProvider . serviceKey ) ; this . _themeVariant = this . _themeProvider . tryGetTheme ( ) ; this . _themeProvider . themeChangedEvent . add ( this , this . _handleThemeChangedEvent ) ; if ( this . context . sdks . microsoftTeams ) { const context = this . context . sdks . microsoftTeams ! . context ; this . _applyTheme ( context . theme || "default" ) ; this . context . sdks . microsoftTeams . teamsJs . registerOnThemeChangeHandler ( this . _applyTheme ) ; } return Promise . resolve ( ) ; } param args private _handleThemeChangedEvent ( args ) { this . _themeVariant = args . theme ; this . render ( ) ; } private _applyTheme = ( theme ) : void => { this . context . domElement . setAttribute ( "data-theme" , theme ) ; document . body . setAttribute ( "data-theme" , theme ) ; } ; public render ( ) { const element = React . createElement ( ControlsTest , { themeVariant : this . _themeVariant , context : this . context , description : this . properties . description , title : this . properties . title , displayMode : this . displayMode , updateProperty : ( value ) => { this . properties . title = value ; } , totalPages : this . properties . totalPages } ) ; ReactDom . render ( element , this . domElement ) ; } protected get dataVersion ( ) : Version { return Version . parse ( '1.0' ) ; } protected getPropertyPaneConfiguration ( ) { return { pages : [ { header : { description : strings . PropertyPaneDescription } , groups : [ { groupName : strings . BasicGroupName , groupFields : [ PropertyPaneTextField ( 'description' , { label : strings . DescriptionFieldLabel } ) , PropertyPaneTextField ( 'totalPages' , { label : 'Total pages in pagination' } ) ] } ] } ] } ; } }