packages/components/containers/contacts/view/RecipientDropdownItem.tsx

   1 import type { MouseEvent, ReactNode } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import Copy from '@proton/components/components/button/Copy';
   6 import ProtonBadgeType from '@proton/components/components/protonBadge/ProtonBadgeType';
   7 import ContactImage from '@proton/components/containers/contacts/ContactImage';
   8 import useNotifications from '@proton/components/hooks/useNotifications';
   9 import { getInitials } from '@proton/shared/lib/helpers/string';
  10 import type { Recipient } from '@proton/shared/lib/interfaces';
  11
  12 interface Props {
  13     label: string;
  14     recipient: Recipient;
  15     bimiSelector?: string;
  16     closeDropdown: () => void;
  17     displaySenderImage: boolean;
  18     simple?: boolean;
  19     additionalAction?: ReactNode;
  20 }
  21
  22 const RecipientDropdownItem = ({
  23     displaySenderImage,
  24     bimiSelector,
  25     label,
  26     recipient,
  27     closeDropdown,
  28     simple = false,
  29     additionalAction,
  30 }: Props) => {
  31     const { createNotification } = useNotifications();
  32
  33     // Label value can contain :
  34     //  - Contact Name if the recipient is a contact, or Recipient Name or Recipient Address on PM
  35     //  - Recipient Name or Recipient Address on EO
  36     // Recipient might not have a Name or a Contact Name, and by default we put the Address
  37     // In this case, we don't want to display the Address field twice
  38     const hasName = label !== '' && label !== recipient.Address;
  39
  40     const handleCopyEmail = () => {
  41         createNotification({
  42             type: 'success',
  43             text: c('Success').t`Email address copied to clipboard`,
  44         });
  45
  46         closeDropdown();
  47     };
  48
  49     // Prevent closing dropdown if click inside the recipient info
  50     const handleClick = (e: MouseEvent) => {
  51         e.stopPropagation();
  52     };
  53
  54     return (
  55         <div className="flex flex-nowrap items-center p-2" onClick={handleClick}>
  56             <span className="item-icon flex shrink-0 rounded mx-2" aria-hidden="true">
  57                 <span className="m-auto">
  58                     {simple ? (
  59                         <>{getInitials(label)}</>
  60                     ) : (
  61                         <ContactImage
  62                             email={recipient.Address}
  63                             name={label}
  64                             className="rounded"
  65                             bimiSelector={bimiSelector}
  66                             displaySenderImage={displaySenderImage}
  67                         />
  68                     )}
  69                 </span>
  70             </span>
  71             <div className="flex flex-column flex-1 px-2" data-testid="recipient:dropdown-item--contact-name">
  72                 <span className="text-ellipsis inline-block max-w-full user-select" title={label}>
  73                     {label}
  74                     {!simple && recipient && <ProtonBadgeType recipient={recipient} />}
  75                 </span>
  76                 {hasName && (
  77                     <span className="color-weak text-ellipsis inline-block max-w-full user-select">{`<${recipient.Address}>`}</span>
  78                 )}
  79             </div>
  80             {additionalAction}
  81             <Copy
  82                 value={recipient.Address}
  83                 className="mr-2 shrink-0"
  84                 onCopy={handleCopyEmail}
  85                 tooltipText={c('Action').t`Copy email to clipboard`}
  86                 shape="ghost"
  87                 data-testid="recipient:dropdown-item--copy-address-button"
  88             />
  89         </div>
  90     );
  91 };
  92
  93 export default RecipientDropdownItem;