packages/pass/components/SecureLink/SecureLinkModal.tsx

   1 import { type FC, useEffect, useState } from 'react';
   2 import { useSelector } from 'react-redux';
   3
   4 import { c } from 'ttag';
   5
   6 import { type ModalProps, ModalTwoHeader } from '@proton/components';
   7 import { presentListItem } from '@proton/pass/components/Item/List/utils';
   8 import { SafeItemIcon } from '@proton/pass/components/Layout/Icon/ItemIcon';
   9 import { PassModal } from '@proton/pass/components/Layout/Modal/PassModal';
  10 import { selectItem } from '@proton/pass/store/selectors';
  11 import type { MaybeNull, SecureLink } from '@proton/pass/types';
  12
  13 import { SecureLinkDetails } from './SecureLinkDetails';
  14 import { SecureLinkGenerate } from './SecureLinkGenerate';
  15
  16 type SecureLinkModalProps = ModalProps & {
  17     itemId: string;
  18     shareId: string;
  19     itemSecureLink?: MaybeNull<SecureLink>;
  20 };
  21
  22 export const SecureLinkModal: FC<SecureLinkModalProps> = ({ itemId, shareId, itemSecureLink = null, ...props }) => {
  23     const [secureLink, setSecureLink] = useState<MaybeNull<SecureLink>>(null);
  24     const item = useSelector(selectItem(shareId, itemId));
  25
  26     useEffect(() => {
  27         if (itemSecureLink) setSecureLink(itemSecureLink);
  28         else setTimeout(() => setSecureLink(itemSecureLink), 100); // Wait for the modal animation to finish
  29     }, [itemSecureLink]);
  30
  31     if (!item) return;
  32
  33     const { heading, subheading } = presentListItem(item);
  34
  35     return (
  36         <PassModal size="small" open enableCloseWhenClickOutside {...props} key={secureLink ? 'details' : 'create'}>
  37             <ModalTwoHeader
  38                 title={c('Action').t`Share secure link`}
  39                 subline={
  40                     <div className="flex flex-nowrap items-center gap-2 mt-1 mb-4">
  41                         <SafeItemIcon item={item} size={2.5} pill={false} />
  42                         <span className="text-ellipsis">
  43                             {heading}
  44                             {subheading && ` · ${subheading}`}
  45                         </span>
  46                     </div>
  47                 }
  48             />
  49
  50             {secureLink ? (
  51                 <SecureLinkDetails {...secureLink} />
  52             ) : (
  53                 <SecureLinkGenerate itemId={itemId} shareId={shareId} onLinkGenerated={setSecureLink} />
  54             )}
  55         </PassModal>
  56     );
  57 };