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

   1 import type { RefObject } from 'react';
   2 import React from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Dropdown, DropdownMenu, DropdownMenuButton, Icon, useNotifications } from '@proton/components';
   7 import { textToClipboard } from '@proton/shared/lib/helpers/browser';
   8
   9 interface Props {
  10     email?: string;
  11     toggle: () => void;
  12     isOpen: boolean;
  13     close: () => void;
  14     anchorRef: RefObject<HTMLButtonElement>;
  15     isContact: boolean;
  16     onCreateOrEditContact: () => void;
  17 }
  18
  19 const ParticipantDropdown = ({ email, isContact, anchorRef, isOpen, close, onCreateOrEditContact }: Props) => {
  20     const { createNotification } = useNotifications();
  21
  22     const handleCopy = () => {
  23         textToClipboard(email);
  24         createNotification({
  25             type: 'success',
  26             text: c('Success').t`Email address copied to clipboard`,
  27         });
  28     };
  29
  30     return (
  31         <Dropdown isOpen={isOpen} anchorRef={anchorRef} onClose={close} originalPlacement="bottom-start">
  32             <DropdownMenu>
  33                 {!!email && (
  34                     <DropdownMenuButton className="text-left" onClick={handleCopy}>
  35                         <Icon name="squares" className="mr-2" />
  36                         <span className="flex-1 my-auto">{c('Action').t`Copy email address`}</span>
  37                     </DropdownMenuButton>
  38                 )}
  39                 <DropdownMenuButton className="text-left" onClick={onCreateOrEditContact}>
  40                     <Icon name={isContact ? 'user' : 'user-plus'} className="mr-2" />
  41                     <span className="flex-1 my-auto">
  42                         {isContact ? c('Action').t`View contact details` : c('Action').t`Create new contact`}
  43                     </span>
  44                 </DropdownMenuButton>
  45             </DropdownMenu>
  46         </Dropdown>
  47     );
  48 };
  49
  50 export default ParticipantDropdown;