packages/components/containers/heading/UserDropdownButton.tsx

   1 import type { ButtonHTMLAttributes, DetailedHTMLProps, Ref } from 'react';
   2 import { forwardRef } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { NotificationDot } from '@proton/atoms';
   7 import type { ThemeColor } from '@proton/colors';
   8 import DropdownCaret from '@proton/components/components/dropdown/DropdownCaret';
   9 import type { IconName } from '@proton/components/components/icon/Icon';
  10 import { getInitials } from '@proton/shared/lib/helpers/string';
  11 import type { UserModel } from '@proton/shared/lib/interfaces';
  12 import isTruthy from '@proton/utils/isTruthy';
  13
  14 export interface Props extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
  15     user: UserModel;
  16     className?: string;
  17     isOpen?: boolean;
  18     notification?: ThemeColor;
  19     dropdownIcon?: IconName;
  20 }
  21
  22 const UserDropdownButton = (
  23     { user, isOpen, notification, dropdownIcon, ...rest }: Props,
  24     ref: Ref<HTMLButtonElement>
  25 ) => {
  26     const { Email, DisplayName, Name } = user;
  27     const nameToDisplay = DisplayName || Name || ''; // nameToDisplay can be falsy for external account
  28     // DisplayName is null for VPN users without any addresses, cast to undefined in case Name would be null too.
  29     const initials = getInitials(nameToDisplay || Email || '');
  30     const title = [nameToDisplay, `<${Email}>`].filter(isTruthy).join(' ');
  31
  32     return (
  33         <button
  34             type="button"
  35             aria-expanded={isOpen}
  36             ref={ref}
  37             {...rest}
  38             className="max-w-full flex items-center flex-nowrap gap-3 user-dropdown-button relative interactive-pseudo-protrude rounded interactive--no-background"
  39             title={title}
  40         >
  41             <DropdownCaret className="md:hidden ml-1 color-weak" iconName={dropdownIcon} isOpen={isOpen} />
  42
  43             {nameToDisplay ? (
  44                 <span className="flex-1 lh130 user-dropdown-text">
  45                     <span className="block text-ellipsis text-sm user-dropdown-displayName">{nameToDisplay}</span>
  46                     {Email ? (
  47                         <span className="block text-ellipsis color-weak text-sm m-0 lh-rg user-dropdown-email">
  48                             {Email}
  49                         </span>
  50                     ) : null}
  51                 </span>
  52             ) : (
  53                 <span className="lh130 user-dropdown-text">
  54                     <span className="block text-ellipsis user-dropdown-displayName">{Email}</span>
  55                 </span>
  56             )}
  57             <span
  58                 className="my-auto text-sm rounded border p-1 inline-block relative flex shrink-0 user-initials"
  59                 aria-hidden="true"
  60             >
  61                 <span className="m-auto">{initials}</span>
  62             </span>
  63             {notification && (
  64                 <NotificationDot
  65                     color={notification}
  66                     className="absolute top-0 right-0 notification-dot--top-right"
  67                     alt={c('Info').t`Attention required`}
  68                 />
  69             )}
  70         </button>
  71     );
  72 };
  73
  74 export default forwardRef<HTMLButtonElement, Props>(UserDropdownButton);