packages/components/containers/contacts/selector/ContactSelectorRow.tsx

   1 import type { CSSProperties, ChangeEvent } from 'react';
   2
   3 import Checkbox from '@proton/components/components/input/Checkbox';
   4 import type { ContactEmail } from '@proton/shared/lib/interfaces/contacts/Contact';
   5 import clsx from '@proton/utils/clsx';
   6
   7 interface Props {
   8     style: CSSProperties;
   9     onCheck: (e: ChangeEvent<HTMLInputElement>, contactID: string) => void;
  10     contact: ContactEmail;
  11     checked: boolean;
  12     isSmallViewport: boolean;
  13 }
  14
  15 const ContactSelectorRow = ({ style, onCheck, contact, checked, isSmallViewport }: Props) => {
  16     return (
  17         <div style={style} className="flex">
  18             <div
  19                 className={clsx([
  20                     'flex flex-nowrap flex-1 h-full my-auto contact-list-row px-4',
  21                     checked && 'contact-list-row--selected',
  22                 ])}
  23             >
  24                 <Checkbox
  25                     labelProps={{ 'data-testid': `contact-checkbox-${contact.Email}` }}
  26                     className="flex-nowrap w-full h-full"
  27                     checked={checked}
  28                     onChange={(e) => onCheck(e, contact.ID)}
  29                     aria-describedby={contact.ID}
  30                     id={contact.ID}
  31                 >
  32                     <div className={clsx(['flex-1 items-center max-w-full h-full', !isSmallViewport && 'flex'])}>
  33                         <div
  34                             className={clsx(['pl-4 flex', !isSmallViewport && 'w-custom'])}
  35                             style={!isSmallViewport ? { '--w-custom': '45%' } : undefined}
  36                         >
  37                             <span className="inline-block text-ellipsis max-w-full pr-4">{contact.Name}</span>
  38                         </div>
  39                         <div className="flex-1 flex pl-4 md:pl-0">
  40                             <span className="inline-block text-ellipsis max-w-full pr-4">{contact.Email}</span>
  41                         </div>
  42                     </div>
  43                 </Checkbox>
  44             </div>
  45         </div>
  46     );
  47 };
  48
  49 export default ContactSelectorRow;