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 } from '@microsoft/sp-property-pane' ; import * as strings from 'PersonalEmailWebPartStrings' ; import { PersonalEmail , IPersonalEmailProps } from './components' ; import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader' ; import { PropertyFieldToggleWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldToggleWithCallout' ; import { MSGraphClient } from '@microsoft/sp-http' ; import { loadTheme } from "office-ui-fabric-react" ; import { IReadonlyTheme , ThemeChangedEventArgs , ThemeProvider } from "@microsoft/sp-component-base" ; export interface IPersonalEmailWebPartProps { title : string ; nrOfMessages : number ; showInboxOnly : boolean ; } export default class PersonalEmailWebPart extends BaseClientSideWebPart < IPersonalEmailWebPartProps > { private graphClient : MSGraphClient ; private propertyFieldNumber ; private _themeProvider : ThemeProvider ; private _themeVariant : IReadonlyTheme | undefined ; public onInit ( ) { return new Promise < void > ( ( resolve , reject ) : void => { this . context . msGraphClientFactory . getClient ( ) . then ( ( client ) : void => { this . graphClient = client ; resolve ( ) ; } , err => reject ( err ) ) ; this . _themeProvider = this . context . serviceScope . consume ( ThemeProvider . serviceKey ) ; this . _themeVariant = this . _themeProvider . tryGetTheme ( ) ; this . _themeProvider . themeChangedEvent . add ( this , this . _handleThemeChangedEvent ) ; } ) ; } public render ( ) { const element = React . createElement ( PersonalEmail , { title : this . properties . title , nrOfMessages : this . properties . nrOfMessages , showInboxOnly : this . properties . showInboxOnly , displayMode : this . displayMode , themeVariant : this . _themeVariant , graphClient : this . graphClient , updateProperty : ( value ) : void => { this . properties . title = value ; } } ) ; ReactDom . render ( element , this . domElement ) ; } protected get dataVersion ( ) : Version { return Version . parse ( '1.0' ) ; } protected async loadPropertyPaneResources ( ) { const { PropertyFieldNumber } = await import ( '@pnp/spfx-property-controls/lib/propertyFields/number' ) ; this . propertyFieldNumber = PropertyFieldNumber ; } protected getPropertyPaneConfiguration ( ) { return { pages : [ { header : { description : strings . PropertyPaneDescription } , groups : [ { groupFields : [ this . propertyFieldNumber ( "nrOfMessages" , { key : "nrOfMessages" , label : strings . NrOfMessagesToShow , value : this . properties . nrOfMessages , minValue : 1 , maxValue : 10 } ) , PropertyFieldToggleWithCallout ( 'showInboxOnly' , { calloutTrigger : CalloutTriggers . Click , key : 'showInboxOnly' , label : strings . ShowInboxOnly , calloutContent : React . createElement ( 'p' , { } , strings . ShowInboxOnlyCallout ) , checked : this . properties . showInboxOnly } ) ] } ] } ] } ; } private _handleThemeChangedEvent ( args ) { this . _themeVariant = args . theme ; this . render ( ) ; } }