packages/components/containers/contacts/lists/ContactRow.tsx

   1 import type { CSSProperties, ChangeEvent, DragEvent, MouseEvent } from 'react';
   2 import { useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import Copy from '@proton/components/components/button/Copy';
   8 import Icon from '@proton/components/components/icon/Icon';
   9 import Tooltip from '@proton/components/components/tooltip/Tooltip';
  10 import useNotifications from '@proton/components/hooks/useNotifications';
  11 import { addPlus } from '@proton/shared/lib/helpers/string';
  12 import type { Recipient } from '@proton/shared/lib/interfaces';
  13 import type { ContactFormatted, ContactGroup } from '@proton/shared/lib/interfaces/contacts';
  14 import type { SimpleMap } from '@proton/shared/lib/interfaces/utils';
  15 import clsx from '@proton/utils/clsx';
  16
  17 import ItemCheckbox from '../../items/ItemCheckbox';
  18 import ContactGroupLabels from '../group/ContactGroupLabels';
  19 import { ContactRowItemFirstLine, ContactRowItemSecondLine } from './ContactRowItem';
  20
  21 interface Props {
  22     checked: boolean;
  23     onClick: (ID: string) => void;
  24     onCheck: (event: ChangeEvent) => void;
  25     style: CSSProperties;
  26     hasPaidMail: boolean;
  27     contactGroupsMap: SimpleMap<ContactGroup>;
  28     contact: ContactFormatted;
  29     draggable?: boolean;
  30     onDragStart?: (event: DragEvent) => void;
  31     onDragEnd?: (event: DragEvent) => void;
  32     dragged?: boolean;
  33     index: number;
  34     onFocus: (index: number) => void;
  35     onGroupDetails: (contactGroupID: string) => void;
  36     isDrawer?: boolean;
  37     onCompose?: (recipients: Recipient[], attachments: File[]) => void;
  38 }
  39
  40 const ContactRow = ({
  41     checked,
  42     style,
  43     hasPaidMail,
  44     contactGroupsMap,
  45     contact,
  46     onClick,
  47     onCheck,
  48     draggable,
  49     onDragStart,
  50     onDragEnd,
  51     dragged,
  52     index,
  53     onFocus,
  54     onGroupDetails,
  55     isDrawer = false,
  56     onCompose,
  57 }: Props) => {
  58     const { createNotification } = useNotifications();
  59     const { ID, Name, LabelIDs = [], emails = [] } = contact;
  60     const [hasFocus, setHasFocus] = useState(false);
  61
  62     const contactGroups = contact.LabelIDs.map((ID) => contactGroupsMap[ID] as ContactGroup);
  63
  64     const handleFocus = () => {
  65         setHasFocus(true);
  66         onFocus(index);
  67     };
  68
  69     const handleBlur = () => {
  70         setHasFocus(false);
  71     };
  72
  73     const handleCopyEmail = () => {
  74         if (emails[0]) {
  75             createNotification({
  76                 type: 'success',
  77                 text: c('Success').t`Email address copied to clipboard`,
  78             });
  79         }
  80     };
  81
  82     const handleCompose = (e: MouseEvent<HTMLButtonElement>) => {
  83         e.stopPropagation();
  84         if (onCompose && emails[0]) {
  85             const recipient: Recipient = { Name: contact.Name, Address: emails[0] };
  86             onCompose([recipient], []);
  87         }
  88     };
  89
  90     return (
  91         <div
  92             style={style}
  93             key={ID}
  94             onClick={() => onClick(ID)}
  95             draggable={draggable}
  96             onDragStart={onDragStart}
  97             onDragEnd={onDragEnd}
  98             className={clsx(
  99                 'contact-item-container item-contact flex cursor-pointer bg-global-white group-hover-opacity-container interactive-pseudo-inset interactive--no-background',
 100                 isDrawer && 'item-in-drawer',
 101                 dragged && 'item-dragging',
 102                 hasFocus && 'item-is-focused'
 103             )}
 104             onFocus={handleFocus}
 105             onBlur={handleBlur}
 106             tabIndex={-1}
 107             data-element-id={contact.ID}
 108             data-shortcut-target="contact-container"
 109             data-testid={`contact-item:${Name}`}
 110         >
 111             <div className="flex flex-nowrap w-full h-full my-auto items-start">
 112                 <ItemCheckbox ID={ID} name={Name} checked={checked} onChange={onCheck} />
 113                 <div className="flex-1 ml-2 conversation-titlesender">
 114                     <ContactRowItemFirstLine ID={ID} Name={Name} className={!!LabelIDs.length ? 'pr-4' : ''} />
 115                     <ContactRowItemSecondLine title={emails.join(', ')}>
 116                         {emails.length ? (
 117                             addPlus(emails as any)
 118                         ) : (
 119                             <span className="placeholder">{c('Info').t`No email address`}</span>
 120                         )}
 121                     </ContactRowItemSecondLine>
 122                     {hasPaidMail && contactGroups && (
 123                         <ContactGroupLabels
 124                             contactGroups={contactGroups}
 125                             className="mt-0.5"
 126                             onDetails={onGroupDetails}
 127                             leftToRight
 128                             maxNumber={4}
 129                         />
 130                     )}
 131                 </div>
 132                 {emails[0] && (
 133                     <span className="flex gap-4">
 134                         {onCompose && (
 135                             <div className="contact-item-hover-action-buttons">
 136                                 <Tooltip title={c('Action').t`Compose`}>
 137                                     <Button color="weak" shape="ghost" icon onClick={handleCompose}>
 138                                         <Icon name="pen-square" alt={c('Action').t`Compose`} />
 139                                     </Button>
 140                                 </Tooltip>
 141                             </div>
 142                         )}
 143                         <div className="contact-item-hover-action-buttons">
 144                             <Copy
 145                                 value={emails[0]}
 146                                 className={clsx(isDrawer && 'mr-1')}
 147                                 onCopy={handleCopyEmail}
 148                                 tooltipText={c('Action').t`Copy email to clipboard`}
 149                                 shape="ghost"
 150                             />
 151                         </div>
 152                     </span>
 153                 )}
 154             </div>
 155         </div>
 156     );
 157 };
 158
 159 export default ContactRow;