import { ILayoutDefinition , ILayout , BaseLayout } from '@pnp/modern-search-extensibility' ; import { BuiltinLayoutsKeys } from '../layouts/AvailableLayouts' ; import { ServiceKey , ServiceScope , Text } from '@microsoft/sp-core-library' ; import { ServiceScopeHelper } from './ServiceScopeHelper' ; import { IPropertyPaneChoiceGroupOption } from '@microsoft/sp-property-pane' ; import ISearchFiltersWebPartProps from '../webparts/searchFilters/ISearchFiltersWebPartProps' ; import ISearchResultsWebPartProps from '../webparts/searchResults/ISearchResultsWebPartProps' ; import * as commonStrings from 'CommonStrings' ; import { WebPartContext } from '@microsoft/sp-webpart-base' ; export class LayoutHelper { param rootScope param context param properties param layoutKey param layoutDefinitions returns public static async getLayoutInstance ( rootScope , context , properties , layoutKey , layoutDefinitions ) { let layout = undefined ; let serviceKey = undefined ; if ( layoutKey ) { switch ( layoutKey ) { case BuiltinLayoutsKeys . DetailsList : const { DetailsListLayout } = await import ( '../layouts/results/detailsList/DetailListLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchDetailsListLayout' , DetailsListLayout ) ; break ; case BuiltinLayoutsKeys . ResultsDebug : const { ResultsDebugLayout } = await import ( '../layouts/results/debug/ResultsDebugLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchResultsDebugLayout' , ResultsDebugLayout ) ; break ; case BuiltinLayoutsKeys . FiltersDebug : const { DebugFilterLayout } = await import ( '../layouts/filters/debug/DebugFilterLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchFiltersDebugLayout' , DebugFilterLayout ) ; break ; case BuiltinLayoutsKeys . ResultsCustom : const { ResultsCustomLayout } = await import ( '../layouts/results/custom/ResultsCustomLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchResultsCustomLayout' , ResultsCustomLayout ) ; break ; case BuiltinLayoutsKeys . FiltersCustom : const { FiltersCustomLayout } = await import ( '../layouts/filters/custom/FiltersCustomLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchFiltersCustomLayout' , FiltersCustomLayout ) ; break ; case BuiltinLayoutsKeys . Cards : const { CardsLayout } = await import ( '../layouts/results/cards/CardsLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchCardsLayout' , CardsLayout ) ; break ; case BuiltinLayoutsKeys . Slider : const { SliderLayout } = await import ( '../layouts/results/slider/SliderLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchSliderLayout' , SliderLayout ) ; break ; case BuiltinLayoutsKeys . SimpleList : const { SimpleListLayout } = await import ( '../layouts/results/simpleList/SimpleListLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchSimpleListLayout' , SimpleListLayout ) ; break ; case BuiltinLayoutsKeys . People : const { PeopleLayout } = await import ( '../layouts/results/people/PeopleLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchPeopleLayout' , PeopleLayout ) ; break ; case BuiltinLayoutsKeys . Vertical : const { VerticalFilterLayout } = await import ( '../layouts/filters/vertical/VerticalFilterLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchVerticalLayout' , VerticalFilterLayout ) ; break ; case BuiltinLayoutsKeys . Horizontal : const { HorizontalFilterLayout } = await import ( '../layouts/filters/horizontal/HorizontalFilterLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchHorizontalFilterLayout' , HorizontalFilterLayout ) ; break ; case BuiltinLayoutsKeys . Panel : const { PanelFilterLayout } = await import ( '../layouts/filters/panel/PanelFilterLayout' ) ; serviceKey = ServiceKey . create < ILayout > ( 'PnPModernSearchPanelLayout' , PanelFilterLayout ) ; break ; default : const matchingDefinitions = layoutDefinitions . filter ( ( layoutDefinition ) => { return layoutDefinition . key === layoutKey ; } ) ; if ( matchingDefinitions . length > 0 ) { serviceKey = matchingDefinitions [ 0 ] . serviceKey ; } else { throw new Error ( Text . format ( commonStrings . General . Extensibility . LayoutDefinitionNotFound , layoutKey ) ) ; } break ; } return new Promise < ILayout > ( ( resolve , reject ) => { const childServiceScope = ServiceScopeHelper . registerChildServices ( rootScope , [ serviceKey ] ) ; childServiceScope . whenFinished ( async ( ) => { layout = childServiceScope . consume < ILayout > ( serviceKey ) ; const isValidLayout = ( layoutInstance ) : layoutInstance is BaseLayout < any > => { return ( ( layoutInstance as BaseLayout < any > ) . getPropertyPaneFieldsConfiguration !== undefined && ( layoutInstance as BaseLayout < any > ) . onInit !== undefined && ( layoutInstance as BaseLayout < any > ) . onPropertyUpdate !== undefined ) ; } ; if ( ! isValidLayout ( layout ) ) { reject ( new Error ( Text . format ( commonStrings . General . Extensibility . InvalidLayoutInstance , layoutKey ) ) ) ; } if ( layout ) { layout . properties = properties . layoutProperties ; layout . context = context ; await layout . onInit ( ) ; resolve ( layout ) ; } } ) ; } ) ; } } /**
     * Builds the layout options list from available layouts
     */ public static getLayoutOptions ( availableLayoutDefinitions ) { let layoutOptions = [ ] ; availableLayoutDefinitions . forEach ( ( source ) => { layoutOptions . push ( { iconProps : { officeFabricIconFontName : source . iconName } , imageSize : { width : 200 , height : 100 } , key : source . key , text : source . name , } ) ; } ) ; return layoutOptions ; } }