import * as React from 'react' ; import styles from './sharePointComponents.module.scss' ; import { FieldComponent , IFieldComponentProps , IFieldComponentState } from './FieldComponent' ; import { ISPUser } from '../data/ISPUser' ; import Utility from '../utilities/Utility' ; import { Persona , IPersonaProps , PersonaSize , PersonaPresence } from 'office-ui-fabric-react/lib/Persona' ; export interface IItemPeopleFieldDisplayProps extends IFieldComponentProps { } export interface IItemPeopleFieldDisplayState extends IFieldComponentState { users : ISPUser [ ] ; } export default class ItemPeopleFieldDisplay extends FieldComponent < IItemPeopleFieldDisplayProps , IItemPeopleFieldDisplayState > { public constructor ( props ) { super ( props ) ; } public componentWillMount ( ) { if ( this . props == null || this . props . itemContext == null ) { return ; } var me = this ; if ( this . value != null && this . value > 0 || this . value < 0 ) { var val = Utility . getNumericArray ( this . value ) ; if ( me . props . itemContext != null && val != null ) { me . props . itemContext . readUsersByIds ( val ) . then ( ( displayItems ) => { me . setState ( { users : displayItems } ) ; } ) ; } } } public render ( ) { if ( this . state == null || this . state . users == null ) { return < div > < /div>; } var localUsers = new Array ( ) ; if ( typeof this . state . users == "number" ) { localUsers = [ this . state . users ] ; } else { localUsers = this . state . users as ISPUser [ ] ; } var personas = new Array ( ) ; for ( var user of localUsers ) { var persona = { text : user . Title , imageUrl : user . EMail != null ? "https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=" + user . EMail + "&amp;UA=0&amp;size=HR64x64" : null , presence : null } ; personas . push ( persona ) ; } return < div className = { styles . sharePointComponent } > { personas . map ( ( personaIn , i ) => { return < Persona text = { personaIn . text } imageUrl = { personaIn . imageUrl } presence = { PersonaPresence . none } size = { PersonaSize . small } key = { i } / > ; } ) } < /div>; } }