applications/drive/src/app/components/modals/ShareLinkModal/DirectSharing/DirectSharingAutocomplete.tsx

   1 import { useMemo, useRef } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { AddressesAutocompleteTwo, AddressesInput, InputFieldTwo } from '@proton/components';
   6 import { useContactGroups } from '@proton/mail';
   7 import { useContactEmails } from '@proton/mail/contactEmails/hooks';
   8 import type { SHARE_MEMBER_PERMISSIONS } from '@proton/shared/lib/drive/permissions';
   9 import clsx from '@proton/utils/clsx';
  10
  11 import type { ShareInvitee } from '../../../../store';
  12 import { DirectSharingAddressesInputItem } from './DirectSharingAddressesInputItem';
  13 import { MemberDropdownMenu } from './MemberDropdownMenu';
  14 import { getGroupsWithContactsMap } from './helpers/getGroupsWithContactsMap';
  15 import { inviteesToRecipients, recipientsToInvitees } from './helpers/transformers';
  16
  17 interface Props {
  18     disabled: boolean;
  19     invitees: ShareInvitee[];
  20     existingEmails: string[];
  21     selectedPermissions: SHARE_MEMBER_PERMISSIONS;
  22     onAdd: (invitees: ShareInvitee[]) => void;
  23     onRemove: (email: string) => void;
  24     onChangePermissions: (permissions: SHARE_MEMBER_PERMISSIONS) => void;
  25 }
  26
  27 export const DirectSharingAutocomplete = ({
  28     disabled,
  29     selectedPermissions,
  30     invitees,
  31     existingEmails,
  32     onAdd,
  33     onRemove,
  34     onChangePermissions,
  35 }: Props) => {
  36     const addressesInputText = c('Action').t`Add people or groups to share`;
  37
  38     const [contactEmails] = useContactEmails();
  39     const [contactGroups] = useContactGroups();
  40     const groupsWithContactsMap = getGroupsWithContactsMap(contactEmails || [], contactGroups || []);
  41
  42     const inputId = 'direct-sharing-autocomplete';
  43     const addressesAutocompleteRef = useRef<HTMLInputElement>(null);
  44
  45     const count = invitees.length;
  46
  47     const recipients = useMemo(() => inviteesToRecipients(invitees), [invitees]);
  48
  49     return (
  50         <>
  51             <div className="flex justify-space-between items-center flex-nowrap mt-3 mb-6 relative">
  52                 <InputFieldTwo
  53                     as={AddressesInput}
  54                     autocompleteContainerProps={{
  55                         className: 'max-w-custom max-h-custom overflow-auto',
  56                         style: { '--max-w-custom': 'calc(100% - 4.25rem)', '--max-h-custom': '7.75rem' },
  57                     }}
  58                     ref={addressesAutocompleteRef}
  59                     id={inputId}
  60                     disabled={disabled}
  61                     onClick={() => {
  62                         document.getElementById(inputId)?.focus();
  63                     }}
  64                     assistContainerClassName="hidden"
  65                     autocomplete={
  66                         <AddressesAutocompleteTwo
  67                             hasAddOnBlur
  68                             id={inputId}
  69                             compact
  70                             disabled={disabled}
  71                             anchorRef={addressesAutocompleteRef}
  72                             contactEmails={contactEmails}
  73                             excludedEmails={existingEmails}
  74                             contactGroups={contactGroups}
  75                             groupsWithContactsMap={groupsWithContactsMap}
  76                             recipients={recipients}
  77                             onAddRecipients={(newRecipients) => onAdd(recipientsToInvitees(newRecipients))}
  78                             className="min-w-5 unstyled"
  79                             inputClassName={clsx([
  80                                 'outline-none--at-all',
  81                                 !count && 'my-0.5',
  82                                 !!count && 'p-0 rounded-none',
  83                             ])}
  84                             placeholder={recipients.length && count ? '' : addressesInputText}
  85                             data-testid="address-input-field"
  86                         />
  87                     }
  88                     items={invitees.map((invitee) => (
  89                         <DirectSharingAddressesInputItem
  90                             key={invitee.contactId}
  91                             invitee={invitee}
  92                             disabled={disabled}
  93                             onRemove={onRemove}
  94                         />
  95                     ))}
  96                     className={clsx(['multi-select-container', !!count && 'px-2 py-0.5'])}
  97                 />
  98                 <div className="absolute inset-y-center right-0">
  99                     <MemberDropdownMenu
 100                         disabled={disabled}
 101                         selectedPermissions={selectedPermissions}
 102                         onChangePermissions={onChangePermissions}
 103                         autocompleteOptions
 104                     />
 105                 </div>
 106             </div>
 107         </>
 108     );
 109 };