import { BaseLayout } from "@pnp/modern-search-extensibility" ; import { IPropertyPaneField , PropertyPaneSlider } from "@microsoft/sp-property-pane" ; import * as strings from 'CommonStrings' ; export interface IHorizontalLayoutProperties { /**
     * The prefered number of cards per row
     */ preferedFilterNumberPerRow : number ; /**
     * The card size in %
     */ columnSizePercentage : number ; } export class HorizontalFilterLayout extends BaseLayout < IHorizontalLayoutProperties > { public async onInit ( ) { this . properties . preferedFilterNumberPerRow = this . properties . preferedFilterNumberPerRow ? this . properties . preferedFilterNumberPerRow : 3 ; this . properties . columnSizePercentage = this . properties . columnSizePercentage ? this . properties . columnSizePercentage : 33 ; } public getPropertyPaneFieldsConfiguration ( availableFields ) { return [ PropertyPaneSlider ( 'layoutProperties.preferedFilterNumberPerRow' , { label : strings . Layouts . Horizontal . PreferedFilterNumberPerRow , min : 1 , max : 6 , step : 1 , showValue : true , value : this . properties . preferedFilterNumberPerRow , } ) ] ; } public onPropertyUpdate ( propertyPath , oldValue , newValue ) { if ( propertyPath . localeCompare ( 'layoutProperties.preferedFilterNumberPerRow' ) === 0 ) { this . properties . columnSizePercentage = Math . floor ( 100 / newValue ) - 1 ; } } }