import { ButtonHTMLAttributes , DetailedHTMLProps , forwardRef , Ref } from 'react' ; import { UserModel } from '@proton/shared/lib/interfaces' ; import { getInitials } from '@proton/shared/lib/helpers/string' ; import { NotificationDot , NotificationDotColor } from '../../components' ; export interface Props extends DetailedHTMLProps < ButtonHTMLAttributes < HTMLButtonElement > , HTMLButtonElement > { user : UserModel ; className ? : string ; isOpen ? : boolean ; notification ? : NotificationDotColor ; } const UserDropdownButton = ( { user , isOpen , notification , ... rest } , ref ) => { const { Email , DisplayName , Name } = user ; const nameToDisplay = DisplayName || Name ; const initials = getInitials ( nameToDisplay || Email || '' ) ; return ( < button type = "button" aria - expanded = { isOpen } ref = { ref } { ... rest } className = "max-w100 flex flex-align-items-center flex-nowrap user-dropdown-button relative" title = { `${ nameToDisplay } <${ Email }>` } > { nameToDisplay ? ( < span className = "text-right flex-item-fluid mr0-75 lh130 user-dropdown-text" > < span className = "block text-ellipsis user-dropdown-displayName" > { nameToDisplay } < /span> { Email ? ( < span className = "block text-ellipsis color-weak text-xs m0 lh-rg user-dropdown-email" > { Email } < /span>) : null} < /span>) : (<span className="text-right mr0-75 lh130 user-dropdown-text"> < span className = "block text-ellipsis user-dropdown-displayName" > { Email } < /span> < /span>)} < span className = "mtauto mbauto text-semibold rounded bordered p0-25 inline-block user-initials relative flex flex-item-noshrink" > < span className = "mtauto mbauto center" > { initials } < /span> < /span> { notification && ( < NotificationDot color = { notification } className = "absolute top-right notification-dot--top-right" / > ) } < /button>); } ; export default forwardRef < HTMLButtonElement , Props > ( UserDropdownButton ) ;