import React from "react" ; import { IFacepileProps , Facepile , OverflowButtonType , IFacepilePersona , } from "office-ui-fabric-react/lib/Facepile" ; import { PersonaInitialsColor } from "office-ui-fabric-react" ; import { IVltavaUserDetails } from "./dataModel" ; const facepileStyle = { position : "absolute" , top : 17 , right : 45 , cursor : "pointer" , } ; interface IVltavaFacepileProps { users : IVltavaUserDetails [ ] ; } export const VltavaFacepile = ( props ) => { const facepilePersonas = [ ] ; props . users . forEach ( ( user ) => { const personaName = user . name ; const nameParts = personaName . split ( " " ) . reduce ( ( acc , val ) => { acc . push ( ... val . split ( "_" ) ) ; return acc ; } , [ ] ) ; const imageInitials = nameParts . reduce ( ( acc , val ) => acc . concat ( val . substr ( 0 , 1 ) ) , "" ) ; const initialsColor = PersonaInitialsColor [ PersonaInitialsColor [ user . colorCode % Object . keys ( PersonaInitialsColor ) . length ] ] ; const persona = { imageInitials , personaName , initialsColor , } ; facepilePersonas . push ( persona ) ; } ) ; const facepileProps = { personas : facepilePersonas , maxDisplayablePersonas : 3 , overflowButtonType : OverflowButtonType . descriptive , overflowButtonProps : { ariaLabel : "More users" , onClick : ( ev ) => alert ( "Todo: Implement This" ) , } , ariaDescription : "To move through the items use left and right arrow keys." , ariaLabel : "Example list of Facepile personas" , } ; return ( < div style = { facepileStyle } > < Facepile { ... facepileProps } / > < /div>); } ;