import * as strings from 'ControlStrings' ; import * as React from "react" ; import SPservice from "../../services/SPService" ; import { TagPicker } from "office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker" ; import { Label } from "office-ui-fabric-react/lib/Label" ; import { getId } from 'office-ui-fabric-react/lib/Utilities' ; import { IListItemPickerProps , IListItemPickerState } from "." ; import * as telemetry from '../../common/telemetry' ; import isEqual from 'lodash/isEqual' ; import { ITag } from 'office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker.types' ; export class ListItemPicker extends React . Component < IListItemPickerProps , IListItemPickerState > { private _spservice : SPservice ; private _tagPickerId = getId ( 'tagPicker' ) ; constructor ( props ) { super ( props ) ; telemetry . track ( 'ListItemPicker' , { } ) ; this . state = { noresultsFoundText : ! this . props . noResultsFoundText ? strings . genericNoResultsFoundText : this . props . noResultsFoundText , showError : false , errorMessage : "" , suggestionsHeaderText : ! this . props . suggestionsHeaderText ? strings . ListItemPickerSelectValue : this . props . suggestionsHeaderText , selectedItems : props . defaultSelectedItems || [ ] } ; this . _spservice = new SPservice ( this . props . context ) ; } public componentDidMount ( ) { this . loadField ( this . props ) ; } public componentWillReceiveProps ( nextProps ) { let newSelectedItems ; if ( this . props . listId !== nextProps . listId ) { newSelectedItems = [ ] ; } if ( ! isEqual ( this . props . defaultSelectedItems , nextProps . defaultSelectedItems ) ) { newSelectedItems = nextProps . defaultSelectedItems ; } this . setState ( { selectedItems : newSelectedItems } ) ; if ( this . props . listId !== nextProps . listId || this . props . columnInternalName !== nextProps . columnInternalName || this . props . webUrl !== nextProps . webUrl ) { this . loadField ( nextProps ) ; } } /**
     * Render the field
     */ public render ( ) { const { className , disabled , itemLimit , placeholder } = this . props ; const { suggestionsHeaderText , noresultsFoundText , errorMessage , selectedItems } = this . state ; return ( < div > { ! ! this . props . label && < Label htmlFor = { this . _tagPickerId } > { this . props . label } < /Label>} < div id = { this . _tagPickerId } > < TagPicker onResolveSuggestions = { this . onFilterChanged } onEmptyResolveSuggestions = { ( selectLists ) => { if ( this . props . enableDefaultSuggestions ) { return this . onFilterChanged ( "" , selectLists ) ; } } } getTextFromItem = { this . getTextFromItem } pickerSuggestionsProps = { { suggestionsHeaderText : suggestionsHeaderText , noResultsFoundText : noresultsFoundText } } selectedItems = { selectedItems } onChange = { this . onItemChanged } className = { className } itemLimit = { itemLimit } disabled = { disabled } inputProps = { { placeholder : placeholder } } /> < /div> { ! ! errorMessage && ( < Label style = { { color : '#FF0000' } } > { errorMessage } < /Label>)} < /div>); } private getTextFromItem ( item ) { return item . name ; } private onItemChanged = ( selectedItems ) : void => { this . setState ( { selectedItems : selectedItems } ) ; this . props . onSelectedItem ( selectedItems ) ; } ; private onFilterChanged = async ( filterText , tagList ) => { let resolvedSugestions = await this . loadListItems ( filterText ) ; const { selectedItems } = this . state ; if ( selectedItems && selectedItems . length > 0 ) { let filteredSuggestions = [ ] ; for ( const suggestion of resolvedSugestions ) { const exists = selectedItems . filter ( sItem => sItem . key === suggestion . key ) ; if ( ! exists || exists . length === 0 ) { filteredSuggestions . push ( suggestion ) ; } } resolvedSugestions = filteredSuggestions ; } if ( resolvedSugestions ) { this . setState ( { errorMessage : "" , showError : false } ) ; return resolvedSugestions ; } else { return [ ] ; } } ; private loadListItems = async ( filterText ) : Promise < { key : string ; name : string ; } [ ] > => { let { listId , columnInternalName , keyColumnInternalName , webUrl , filter , orderBy , substringSearch } = this . props ; const { field } = this . state ; let arrayItems = [ ] ; let keyColumn = keyColumnInternalName || 'Id' ; try { let listItems = await this . _spservice . getListItems ( filterText , listId , columnInternalName , field , keyColumn , webUrl , filter , substringSearch , orderBy ? orderBy : '' ) ; if ( listItems . length > 0 ) { for ( const item of listItems ) { arrayItems . push ( { key : item [ keyColumn ] , name : item [ columnInternalName ] } ) ; } } return arrayItems ; } catch ( error ) { console . log ( `Error get Items` , error ) ; this . setState ( { showError : true , errorMessage : error . message , noresultsFoundText : error . message } ) ; return null ; } } ; private loadField = async ( props ) : Promise < void > => { this . setState ( { field : undefined } ) ; const field = await this . _spservice . getField ( props . listId , props . columnInternalName , props . webUrl ) ; this . setState ( { field } ) ; } ; }