applications/calendar/src/app/components/events/Participant.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import { Icon, Tooltip, usePopperAnchor } from '@proton/components';
   5 import { normalize } from '@proton/shared/lib/helpers/string';
   6 import clsx from '@proton/utils/clsx';
   7
   8 import ParticipantDropdown from './ParticipantDropdown';
   9
  10 interface Props {
  11     icon: React.ReactNode;
  12     name: string;
  13     extraText?: string;
  14     title: string;
  15     initials: string;
  16     tooltip: string;
  17     className?: string;
  18     email: string;
  19     isContact: boolean;
  20     isCurrentUser?: boolean;
  21     onCreateOrEditContact: () => void;
  22 }
  23
  24 const Participant = ({
  25     icon,
  26     name,
  27     title,
  28     tooltip,
  29     initials,
  30     extraText,
  31     className,
  32     email,
  33     isContact,
  34     isCurrentUser,
  35     onCreateOrEditContact,
  36 }: Props) => {
  37     const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();
  38     const hasEmail = !!email;
  39     const displayDropdown = hasEmail;
  40     const showEmailAddress = !isCurrentUser && hasEmail && normalize(email) !== normalize(name);
  41
  42     return (
  43         <div
  44             className={clsx([
  45                 'participant flex flex-nowrap items-center w-full relative interactive-pseudo interactive--no-background text-left',
  46                 className,
  47             ])}
  48             data-testid="participant-in-popover"
  49         >
  50             <Tooltip title={tooltip}>
  51                 <div className="participant-display item-icon relative flex shrink-0 items-center justify-center">
  52                     <div className="item-abbr">{initials}</div>
  53                     <span className="participant-status">{icon}</span>
  54                 </div>
  55             </Tooltip>
  56             <div className="ml-4 flex-1" title={title}>
  57                 <div className="max-w-full participant-text text-ellipsis">{name}</div>
  58                 {showEmailAddress ? (
  59                     <div className="max-w-full text-ellipsis participant-extra-text text-sm m-0">{email}</div>
  60                 ) : null}
  61                 {!!extraText && (
  62                     <div className="max-w-full text-ellipsis participant-extra-text color-weak text-sm m-0">
  63                         {extraText}
  64                     </div>
  65                 )}
  66             </div>
  67             <Button
  68                 shape="ghost"
  69                 size="small"
  70                 icon
  71                 ref={anchorRef}
  72                 onClick={() => {
  73                     toggle();
  74                 }}
  75                 className="ml-1"
  76                 title={c('Action').t`More options`}
  77             >
  78                 <Icon name="three-dots-vertical" alt={c('Action').t`More options`} />
  79             </Button>
  80             {displayDropdown && (
  81                 <ParticipantDropdown
  82                     anchorRef={anchorRef}
  83                     close={close}
  84                     email={email}
  85                     isOpen={isOpen}
  86                     toggle={toggle}
  87                     isContact={isContact}
  88                     onCreateOrEditContact={onCreateOrEditContact}
  89                 />
  90             )}
  91         </div>
  92     );
  93 };
  94
  95 export default Participant;