import * as React from 'react' ; import * as ReactDom from 'react-dom' ; import { BaseClientSideWebPart , IPropertyPaneConfiguration , PropertyPaneDropdown , IPropertyPaneDropdownOption } from '@microsoft/sp-webpart-base' ; import * as strings from 'SearchWebPartWebPartStrings' ; import SearchWebPart from './components/SearchWebPart' ; import { ISearchWebPartProps } from './components/ISearchWebPartProps' ; import { IQuery } from '../../data/IQuery' ; import { IDynamicDataSource } from '@microsoft/sp-dynamic-data' ; export interface ISearchWebPartWebPartProps { /**
     * The ID of the dynamic data to which the web part is subscribed
     */ propertyId : string ; /**
     * The dynamic data source ID to which the web part is subscribed
     */ sourceId : string ; description : string ; } export default class SearchWebPartWebPart extends BaseClientSideWebPart < ISearchWebPartWebPartProps > { private _lastSourceId : string = undefined ; private _lastPropertyId : string = undefined ; private query : IQuery = undefined ; private _onConfigure = ( ) : void => { this . context . propertyPane . open ( ) ; } ; protected onInit ( ) { this . render = this . render . bind ( this ) ; return Promise . resolve ( ) ; } public render ( ) { const needsConfiguration = ! this . properties . sourceId || ! this . properties . propertyId ; if ( this . renderedOnce === false && ! needsConfiguration ) { try { this . context . dynamicDataProvider . registerPropertyChanged ( this . properties . sourceId , this . properties . propertyId , this . render ) ; this . _lastSourceId = this . properties . sourceId ; this . _lastPropertyId = this . properties . propertyId ; } catch ( e ) { this . context . statusRenderer . renderError ( this . domElement , `An error has occurred while connecting to the data source. Details: ${ e }` ) ; return ; } } if ( ! needsConfiguration ) { const source = this . context . dynamicDataProvider . tryGetSource ( this . properties . sourceId ) ; this . query = source ? source . getPropertyValue ( this . properties . propertyId ) : undefined ; } const element = React . createElement ( SearchWebPart , { context : this . context , query : this . query , description : "" } ) ; ReactDom . render ( element , this . domElement ) ; } protected onDispose ( ) { ReactDom . unmountComponentAtNode ( this . domElement ) ; } protected getPropertyPaneConfiguration ( ) { const sourceOptions = this . context . dynamicDataProvider . getAvailableSources ( ) . map ( source => { return { key : source . id , text : source . metadata . title } ; } ) ; const selectedSource = this . properties . sourceId ; let propertyOptions = [ ] ; if ( selectedSource ) { const source = this . context . dynamicDataProvider . tryGetSource ( selectedSource ) ; if ( source ) { propertyOptions = source . getPropertyDefinitions ( ) . map ( prop => { return { key : prop . id , text : prop . title } ; } ) ; } } return { pages : [ { groups : [ { groupFields : [ PropertyPaneDropdown ( "sourceId" , { label : strings . SourceIdFieldLabel , options : sourceOptions , selectedKey : this . properties . sourceId } ) , PropertyPaneDropdown ( "propertyId" , { label : strings . PropertyIdFieldLabel , options : propertyOptions , selectedKey : this . properties . propertyId } ) ] } ] } ] } ; } protected onPropertyPaneFieldChanged ( propertyPath ) { if ( propertyPath === "sourceId" ) { this . properties . propertyId = this . context . dynamicDataProvider . tryGetSource ( this . properties . sourceId ) . getPropertyDefinitions ( ) [ 0 ] . id ; } if ( this . _lastSourceId && this . _lastPropertyId ) { this . context . dynamicDataProvider . unregisterPropertyChanged ( this . _lastSourceId , this . _lastPropertyId , this . render ) ; } this . context . dynamicDataProvider . registerPropertyChanged ( this . properties . sourceId , this . properties . propertyId , this . render ) ; this . _lastSourceId = this . properties . sourceId ; this . _lastPropertyId = this . properties . propertyId ; } }