applications/drive/src/app/components/PortalPreview/PortalPreview.tsx

   1 import type { ReactNode, Ref } from 'react';
   2 import { forwardRef, useMemo } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import type { ModalStateProps } from '@proton/components';
   7 import { FilePreview } from '@proton/components';
   8 import { Portal } from '@proton/components/components/portal';
   9
  10 import { useDriveSharingFlags, useFileView } from '../../store';
  11 import { getSharedStatus } from '../../utils/share';
  12 import { SignatureAlertBody } from '../SignatureAlert';
  13 import SignatureIcon from '../SignatureIcon';
  14
  15 interface Props {
  16     shareId: string;
  17     linkId: string;
  18     revisionId?: string;
  19     date?: Date | string | number;
  20     onDetails?: () => void;
  21     onRestore?: () => void;
  22     onShare?: () => void;
  23     className?: string;
  24     navigationControls?: ReactNode;
  25 }
  26
  27 const PortalPreview = (
  28     {
  29         shareId,
  30         linkId,
  31         revisionId,
  32         onDetails,
  33         onRestore,
  34         onShare,
  35         date,
  36         className,
  37         navigationControls,
  38         ...modalProps
  39     }: Props & ModalStateProps,
  40     ref: Ref<HTMLDivElement>
  41 ) => {
  42     const { contents, contentsMimeType, link, error, isLinkLoading, isContentLoading, downloadFile } = useFileView(
  43         shareId,
  44         linkId,
  45         false,
  46         revisionId
  47     );
  48     const { isSharingInviteAvailable } = useDriveSharingFlags();
  49
  50     const signatureStatus = useMemo(() => {
  51         if (!link) {
  52             return;
  53         }
  54
  55         return (
  56             <SignatureIcon
  57                 isFile={link.isFile}
  58                 signatureIssues={link.signatureIssues}
  59                 isAnonymous={!link.activeRevision?.signatureAddress && !link.signatureAddress}
  60                 className="ml-2 color-danger"
  61             />
  62         );
  63     }, [link]);
  64
  65     const signatureConfirmation = useMemo(() => {
  66         if (!link?.signatureIssues?.blocks) {
  67             return;
  68         }
  69
  70         return (
  71             <SignatureAlertBody
  72                 signatureIssues={link.signatureIssues}
  73                 signatureAddress={link.activeRevision?.signatureAddress || link.signatureAddress}
  74                 isFile={link.isFile}
  75                 name={link.name}
  76             />
  77         );
  78     }, [link]);
  79
  80     if (!modalProps.open) {
  81         return null;
  82     }
  83
  84     const showCachedThumbnail = revisionId === link?.activeRevision?.id;
  85
  86     return (
  87         <Portal>
  88             <div className={className}>
  89                 <FilePreview
  90                     imgThumbnailUrl={showCachedThumbnail ? link?.cachedThumbnailUrl : undefined}
  91                     isMetaLoading={isLinkLoading}
  92                     isLoading={isContentLoading}
  93                     error={error ? error.message || error.toString?.() || c('Info').t`Unknown error` : undefined}
  94                     fileName={link?.name}
  95                     mimeType={contentsMimeType}
  96                     isSharingInviteAvailable={isSharingInviteAvailable}
  97                     sharedStatus={getSharedStatus(link)}
  98                     fileSize={link?.size}
  99                     contents={contents}
 100                     onClose={() => {
 101                         modalProps.onClose();
 102                         modalProps.onExit();
 103                     }}
 104                     ref={ref}
 105                     onDownload={downloadFile}
 106                     onDetails={onDetails}
 107                     onRestore={onRestore}
 108                     onShare={onShare}
 109                     date={date}
 110                     navigationControls={navigationControls}
 111                     signatureStatus={signatureStatus}
 112                     signatureConfirmation={signatureConfirmation}
 113                 />
 114             </div>
 115         </Portal>
 116     );
 117 };
 118
 119 export default forwardRef(PortalPreview);