import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { IPropertyPaneField , PropertyPaneFieldType } from '@microsoft/sp-webpart-base' ; import PropertyFieldSliderWithCalloutHost from './PropertyFieldSliderWithCalloutHost' ; import { IPropertyFieldSliderWithCalloutPropsInternal , IPropertyFieldSliderWithCalloutProps } from './IPropertyFieldSliderWithCallout' ; import { debounce } from '../../common/util/Util' ; class PropertyFieldSliderWithCalloutBuilder implements IPropertyPaneField < IPropertyFieldSliderWithCalloutPropsInternal > { public targetProperty : string ; public type : PropertyPaneFieldType = PropertyPaneFieldType . Custom ; public properties : IPropertyFieldSliderWithCalloutPropsInternal ; private _onChangeCallback : ( targetProperty ? : string , newValue ? : any ) => void ; private _debounce : ( fnc : any , timeout : number ) => void = debounce ( ) ; public constructor ( _targetProperty , _properties ) { this . targetProperty = _targetProperty ; this . properties = _properties ; this . properties . onRender = this . _render . bind ( this ) ; this . properties . onDispose = this . _dispose . bind ( this ) ; } private _render ( elem , context ? , changeCallback ? ) { const props = < IPropertyFieldSliderWithCalloutProps > this . properties ; const element = React . createElement ( PropertyFieldSliderWithCalloutHost , { ... props , onChange : this . _onChanged . bind ( this ) } ) ; ReactDOM . render ( element , elem ) ; if ( changeCallback ) { this . _onChangeCallback = changeCallback ; } } private _dispose ( elem ) { ReactDOM . unmountComponentAtNode ( elem ) ; } private _onChanged ( value ) { const props = < IPropertyFieldSliderWithCalloutProps > this . properties ; if ( this . _onChangeCallback ) { props . debounce ? this . _debounce ( ( ) => { console . log ( `Debounced after ${ props . debounce }` ) ; this . _onChangeCallback ( this . targetProperty , value ) ; } , props . debounce ) : this . _onChangeCallback ( this . targetProperty , value ) ; } } } export function PropertyFieldSliderWithCallout ( targetProperty , properties ) { return new PropertyFieldSliderWithCalloutBuilder ( targetProperty , { ... properties , onRender : null , onDispose : null } ) ; }