packages/components/containers/members/MemberAddresses.tsx

   1 import { useState } from 'react';
   2
   3 import { c, msgid } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import Icon from '@proton/components/components/icon/Icon';
   7 import type { PartialMemberAddress } from '@proton/shared/lib/interfaces';
   8 import clsx from '@proton/utils/clsx';
   9
  10 const amountOfDisplayedAddresses = 3;
  11
  12 interface MemberAddressesProps {
  13     addresses: PartialMemberAddress[] | undefined;
  14 }
  15
  16 const MemberAddresses = ({ addresses = [] }: MemberAddressesProps) => {
  17     const [expanded, setExpanded] = useState(false);
  18
  19     const handleExpandClick = () => {
  20         setExpanded(true);
  21     };
  22
  23     const amountOfAddresses = addresses.length;
  24
  25     const renderListItem = ({ ID, Email }: PartialMemberAddress, index: number) => {
  26         /*
  27          * By default, the addresses list shows 3 addresses as well as
  28          * a clickable text saying "x more addresses", which, when clicked,
  29          * expands the addresses list and shows all addresses.
  30          *
  31          * While not expanded the last list-item is colored more lightly as
  32          * if to indicate a fade.
  33          */
  34         const isLastDisplayedAddress = index === amountOfDisplayedAddresses - 1;
  35
  36         const displayAsFade = !expanded && isLastDisplayedAddress && amountOfAddresses > amountOfDisplayedAddresses;
  37
  38         const listItemClassName = clsx([displayAsFade && 'color-weak', 'my-2']);
  39
  40         return (
  41             <li key={ID} className={listItemClassName}>
  42                 <span
  43                     className="text-ellipsis block"
  44                     title={Email}
  45                     data-testid="users-and-addresses-table:memberAddress"
  46                 >
  47                     {Email}
  48                 </span>
  49             </li>
  50         );
  51     };
  52
  53     const initiallyDisplayedAddresses = addresses.slice(0, amountOfDisplayedAddresses).map(renderListItem);
  54
  55     const remainingAddresses = addresses.slice(amountOfDisplayedAddresses).map(renderListItem);
  56
  57     const getAddressesListItems = () => {
  58         if (amountOfAddresses === 0) {
  59             let n = amountOfAddresses;
  60             return (
  61                 <li className="py-2">
  62                     <span className="md:hidden">{n}</span>
  63                     <span className="hidden md:inline">
  64                         {
  65                             // translator: addresses mean "email addresses" in this context
  66                             c('Info').ngettext(msgid`${n} address`, `${n} addresses`, n)
  67                         }
  68                     </span>
  69                 </li>
  70             );
  71         }
  72
  73         if (expanded) {
  74             return [...initiallyDisplayedAddresses, ...remainingAddresses];
  75         }
  76
  77         if (remainingAddresses.length > 0) {
  78             const expandButton = (
  79                 <li key="expand" className="mb-2">
  80                     <Button
  81                         onClick={handleExpandClick}
  82                         color="norm"
  83                         shape="ghost"
  84                         size="small"
  85                         className="flex flex-nowrap text-left items-center"
  86                     >
  87                         <span className="md:hidden">
  88                             {
  89                                 // translator: we speak about email addresses in this context
  90                                 c('Info').ngettext(
  91                                     msgid`${remainingAddresses.length} more`,
  92                                     `${remainingAddresses.length} more`,
  93                                     remainingAddresses.length
  94                                 )
  95                             }
  96                         </span>
  97                         <span className="hidden md:inline">
  98                             {
  99                                 // translator: addresses mean email addresses in this context
 100                                 c('Info').ngettext(
 101                                     msgid`${remainingAddresses.length} more address`,
 102                                     `${remainingAddresses.length} more addresses`,
 103                                     remainingAddresses.length
 104                                 )
 105                             }
 106                         </span>
 107                         <Icon size={3} className="ml-1" name="chevron-down" />
 108                     </Button>
 109                 </li>
 110             );
 111
 112             return [...initiallyDisplayedAddresses, expandButton];
 113         }
 114
 115         return initiallyDisplayedAddresses;
 116     };
 117
 118     return (
 119         <ul className="unstyled my-custom" style={{ '--my-custom': 'calc(var(--space-2) * -1)' }}>
 120             {getAddressesListItems()}
 121         </ul>
 122     );
 123 };
 124
 125 export default MemberAddresses;