packages/components/containers/contacts/group/ContactGroupTable.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Table from '@proton/components/components/table/Table';
   5 import TableBody from '@proton/components/components/table/TableBody';
   6 import TableCell from '@proton/components/components/table/TableCell';
   7 import TableHeader from '@proton/components/components/table/TableHeader';
   8 import TableRow from '@proton/components/components/table/TableRow';
   9 import type { ContactEmail } from '@proton/shared/lib/interfaces/contacts';
  10 import isTruthy from '@proton/utils/isTruthy';
  11
  12 interface Props {
  13     contactEmails: ContactEmail[];
  14     onDelete?: (Email: string) => void;
  15 }
  16
  17 const ContactGroupTable = ({ contactEmails, onDelete }: Props) => {
  18     return (
  19         <div className="flex flex-column min-h-custom" style={{ '--min-h-custom': '11.25rem' }}>
  20             <Table className="border-none">
  21                 <TableHeader>
  22                     <tr>
  23                         <TableCell type="header">{c('Table header').t`Name`}</TableCell>
  24                         <TableCell type="header">{c('Table header').t`Address`}</TableCell>
  25                         {onDelete ? (
  26                             <TableCell type="header" className="w-1/5">
  27                                 {c('Table header').t`Action`}
  28                             </TableCell>
  29                         ) : null}
  30                     </tr>
  31                 </TableHeader>
  32                 {contactEmails.length ? (
  33                     <TableBody>
  34                         {contactEmails.map(({ ID, Name, Email }) => {
  35                             const cells = [
  36                                 <div className="text-ellipsis max-w-full" key={ID} title={Name}>
  37                                     {Name}
  38                                 </div>,
  39                                 <div className="text-ellipsis max-w-full" key={ID} title={Email}>
  40                                     {Email}
  41                                 </div>,
  42                                 onDelete ? (
  43                                     <Button
  44                                         key={ID || Email}
  45                                         onClick={() => onDelete(Email)}
  46                                         color="danger"
  47                                         shape="outline"
  48                                         size="small"
  49                                     >
  50                                         {c('Action').t`Remove`}
  51                                     </Button>
  52                                 ) : null,
  53                             ].filter(isTruthy);
  54                             return <TableRow key={ID || Email} cells={cells} />;
  55                         })}
  56                     </TableBody>
  57                 ) : null}
  58             </Table>
  59
  60             {!contactEmails.length ? (
  61                 <div className="flex items-center justify-center min-h-custom" style={{ '--min-h-custom': '9.375rem' }}>
  62                     {c('Info').t`No contacts added yet`}
  63                 </div>
  64             ) : null}
  65         </div>
  66     );
  67 };
  68
  69 export default ContactGroupTable;