import { IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown' ; import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { IPropertyPaneField , PropertyPaneFieldType , IPropertyPaneDropdownOption } from '@microsoft/sp-webpart-base' ; import PropertyFieldMultiSelectHost from './PropertyFieldMultiSelectHost' ; import { IPropertyFieldMultiSelectPropsInternal , IPropertyFieldMultiSelectProps } from './IPropertyFieldMultiSelect' ; import { cloneDeep } from '@microsoft/sp-lodash-subset' ; import omit from 'lodash/omit' ; class PropertyFieldMultiSelectBuilder implements IPropertyPaneField < IPropertyFieldMultiSelectPropsInternal > { public targetProperty : string ; public type : PropertyPaneFieldType = PropertyPaneFieldType . Custom ; public properties : IPropertyFieldMultiSelectPropsInternal ; private _onChangeCallback : ( targetProperty ? : string , newValue ? : any ) => void ; 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 = < IPropertyFieldMultiSelectProps > this . properties ; const element = React . createElement ( PropertyFieldMultiSelectHost , { ... omit ( props , [ 'options' , 'ariaPositionInSet' , 'ariaSetSize' ] ) , options : props . options as IDropdownOption [ ] || [ ] , onChanged : this . _onChanged . bind ( this ) } ) ; ReactDOM . render ( element , elem ) ; if ( changeCallback ) { this . _onChangeCallback = changeCallback ; } } private _dispose ( elem ) { ReactDOM . unmountComponentAtNode ( elem ) ; } private _onChanged ( item ) { if ( this . _onChangeCallback ) { const updateSelectedKeys = this . properties . selectedKeys ? cloneDeep ( this . properties . selectedKeys ) : [ ] ; if ( item . selected ) { updateSelectedKeys . push ( item . key ) ; } else { const itemIdx = updateSelectedKeys . indexOf ( item . key ) ; if ( itemIdx > - 1 ) { updateSelectedKeys . splice ( itemIdx , 1 ) ; } } this . _onChangeCallback ( this . targetProperty , updateSelectedKeys ) ; } } } export function PropertyFieldMultiSelect ( targetProperty , properties ) { return new PropertyFieldMultiSelectBuilder ( targetProperty , { ... properties , onRender : null , onDispose : null } ) ; }