import React from 'react'; import classNames from 'classnames'; import { Emojify } from './Emojify'; import { LocalizerType } from '../../types/Util'; interface Props { phoneNumber: string; name?: string; profileName?: string; i18n: LocalizerType; module?: string; boldProfileName?: Boolean; compact?: Boolean; } export class ContactName extends React.Component<Props> { public render() { const { phoneNumber, name, profileName, i18n, module, boldProfileName, compact, } = this.props; const prefix = module ? module : 'module-contact-name'; const title = name ? name : phoneNumber; const shouldShowProfile = Boolean(profileName && !name); const styles = (boldProfileName ? { fontWeight: 'bold', } : {}) as React.CSSProperties; const profileElement = shouldShowProfile ? ( <span style={styles} className={`${prefix}__profile-name`}> <Emojify text={profileName || ''} i18n={i18n} /> </span> ) : null; return ( <span className={classNames(prefix, compact && 'compact')} dir="auto"> {profileElement} {shouldShowProfile ? ' ' : null} <span className={classNames( `${prefix}__profile-number`, shouldShowProfile && 'italic' )} > <Emojify text={title} i18n={i18n} /> </span> </span> ); } }