First-class profile name rendering

This commit is contained in:
Scott Nonnenberg 2020-07-23 18:35:32 -07:00
parent 632cd0e87e
commit d07b8e82b2
63 changed files with 1044 additions and 454 deletions

View file

@ -1,6 +1,5 @@
import * as React from 'react';
import classNames from 'classnames';
import { isEmpty } from 'lodash';
import { Avatar, Props as AvatarProps } from './Avatar';
import { useRestoreFocus } from '../util/hooks';
@ -22,14 +21,16 @@ export const AvatarPopup = (props: Props) => {
const focusRef = React.useRef<HTMLButtonElement>(null);
const {
i18n,
name,
profileName,
phoneNumber,
title,
onViewPreferences,
onViewArchive,
style,
} = props;
const hasProfileName = !isEmpty(profileName);
const shouldShowNumber = Boolean(name || profileName);
// Note: mechanisms to dismiss this view are all in its host, MainHeader
@ -41,10 +42,8 @@ export const AvatarPopup = (props: Props) => {
<div className="module-avatar-popup__profile">
<Avatar {...props} size={52} />
<div className="module-avatar-popup__profile__text">
<div className="module-avatar-popup__profile__name">
{hasProfileName ? profileName : phoneNumber}
</div>
{hasProfileName ? (
<div className="module-avatar-popup__profile__name">{title}</div>
{shouldShowNumber ? (
<div className="module-avatar-popup__profile__number">
{phoneNumber}
</div>