import * as React from 'react' ; import { Avatar , Dropdown } from 'antd' ; import { AvatarProps } from 'antd/lib/avatar' ; import './UserChip.less' ; import { CSS_PREFIX } from '../constants' ; export interface BaseProps { /**
     * An optional CSS class which should be added.
     */ className ? : string ; /**
     * The image src.
     */ imageSrc ? : string ; /**
     * The react element representing the user menu
     */ userMenu ? : React . ReactNode ; /**
     * The user name.
     */ userName ? : React . ReactNode ; /**
     * The style object
     */ style ? : any ; } export type UserChipProps = BaseProps & AvatarProps ; class extends React . Component class UserChip extends React . Component < UserChipProps > { private _className : string = `${ CSS_PREFIX }userchip` ; constructs constructor ( props ) { super ( props ) ; } return method getInitials ( ) { const { userName } = this . props ; if ( ! ( userName instanceof String || typeof userName === 'string' ) ) { return '??' ; } const splittedName = ( userName as string ) . split ( ' ' ) ; const initals = [ ] ; splittedName . forEach ( ( part ) => { initals . push ( part [ 0 ] . toUpperCase ( ) ) ; } ) ; return initals . join ( '' ) ; } return getUserMenu ( ) { const { className , imageSrc , userMenu , userName , style , ... passThroughProps } = this . props ; const finalClassName = className ? `${ className } ${ this . _className }` : this . _className ; return ( < div className = { finalClassName } style = { style } > < Avatar src = { imageSrc } size = "large" className = "userimage" { ... passThroughProps } > { imageSrc ? '' : this . getInitials ( ) } < /Avatar> < span className = "username" > { userName } < /span> < /div>); } /**
     * The render function
     */ render ( ) { const { userMenu } = this . props ; if ( userMenu && React . isValidElement ( userMenu ) ) { return ( < Dropdown overlay = { userMenu } trigger = { [ 'click' ] } getPopupContainer = { ( ) => { return document . getElementsByClassName ( this . _className ) [ 0 ] as HTMLElement ; } } > { this . getUserMenu ( ) } < /Dropdown>); } else { return this . getUserMenu ( ) ; } } } export default UserChip ;