applications/drive/src/app/components/sections/Drive/FolderContextMenu.tsx

   1 import { useEffect, useMemo } from 'react';
   2 import * as React from 'react';
   3
   4 import { ContextMenu, ContextSeparator } from '@proton/components';
   5 import type { SHARE_MEMBER_PERMISSIONS } from '@proton/shared/lib/drive/permissions';
   6 import { getCanAdmin, getCanWrite } from '@proton/shared/lib/drive/permissions';
   7
   8 import { useActiveShare } from '../../../hooks/drive/useActiveShare';
   9 import { useActions, useDriveSharingFlags, useFileUploadInput, useFolderUploadInput } from '../../../store';
  10 import { useDocumentActions, useDriveDocsFeatureFlag } from '../../../store/_documents';
  11 import type { ContextMenuProps } from '../../FileBrowser/interface';
  12 import { useCreateFileModal } from '../../modals/CreateFileModal';
  13 import { useCreateFolderModal } from '../../modals/CreateFolderModal';
  14 import { useFileSharingModal } from '../../modals/SelectLinkToShareModal/SelectLinkToShareModal';
  15 import { useLinkSharingModal } from '../../modals/ShareLinkModal/ShareLinkModal';
  16 import { ShareFileButton } from '../ContextMenu/buttons';
  17 import ShareFileButtonLEGACY from '../ContextMenu/buttons/_legacy/ShareFileButtonLEGACY';
  18 import useIsEditEnabled from '../useIsEditEnabled';
  19 import { CreateNewFileButton, CreateNewFolderButton, UploadFileButton, UploadFolderButton } from './ContextMenuButtons';
  20 import CreateNewDocumentButton from './ContextMenuButtons/CreateNewDocumentButton';
  21
  22 export function FolderContextMenu({
  23     shareId,
  24     anchorRef,
  25     isOpen,
  26     position,
  27     open,
  28     close,
  29     permissions,
  30     isActiveLinkReadOnly,
  31 }: ContextMenuProps & {
  32     shareId: string;
  33     permissions: SHARE_MEMBER_PERMISSIONS;
  34     isActiveLinkReadOnly?: boolean;
  35 }) {
  36     useEffect(() => {
  37         if (position) {
  38             open();
  39         }
  40     }, [position]);
  41
  42     const isEditEnabled = useIsEditEnabled();
  43
  44     const { activeFolder } = useActiveShare();
  45     const { createFolder } = useActions();
  46     const {
  47         inputRef: fileInput,
  48         handleClick: fileClick,
  49         handleChange: fileChange,
  50     } = useFileUploadInput(activeFolder.shareId, activeFolder.linkId);
  51     const {
  52         inputRef: folderInput,
  53         handleClick: folderClick,
  54         handleChange: folderChange,
  55     } = useFolderUploadInput(activeFolder.shareId, activeFolder.linkId);
  56     const [createFolderModal, showCreateFolderModal] = useCreateFolderModal();
  57     const [createFileModal, showCreateFileModal] = useCreateFileModal();
  58     const [fileSharingModal, showFileSharingModal] = useFileSharingModal();
  59     const [linkSharingModal, showLinkSharingModal] = useLinkSharingModal();
  60     const { isSharingInviteAvailable } = useDriveSharingFlags();
  61
  62     const isEditor = useMemo(() => getCanWrite(permissions), [permissions]);
  63     const isAdmin = useMemo(() => getCanAdmin(permissions), [permissions]);
  64
  65     const ShareFileButtonComponent = isSharingInviteAvailable ? ShareFileButton : ShareFileButtonLEGACY;
  66
  67     const { createDocument } = useDocumentActions();
  68     const { isDocsEnabled } = useDriveDocsFeatureFlag();
  69
  70     // All actions in this context menu needs editor permissions
  71     if (!isEditor) {
  72         return null;
  73     }
  74
  75     // ContextMenu is removed from DOM when any action is executed but inputs
  76     // need to stay rendered so onChange handler can work.
  77     return (
  78         <>
  79             <input multiple type="file" ref={fileInput} className="hidden" onChange={fileChange} />
  80             <input type="file" ref={folderInput} className="hidden" onChange={folderChange} />
  81             {createFolderModal}
  82             {createFileModal}
  83             {fileSharingModal}
  84             {linkSharingModal}
  85             <ContextMenu isOpen={isOpen} close={close} position={position} anchorRef={anchorRef}>
  86                 {!isActiveLinkReadOnly && (
  87                     <CreateNewFolderButton
  88                         close={close}
  89                         action={() => showCreateFolderModal({ folder: activeFolder, createFolder })}
  90                     />
  91                 )}
  92                 {isDocsEnabled && !isActiveLinkReadOnly && (
  93                     <CreateNewDocumentButton
  94                         close={close}
  95                         action={() => {
  96                             void createDocument({
  97                                 shareId: activeFolder.shareId,
  98                                 parentLinkId: activeFolder.linkId,
  99                             });
 100                         }}
 101                     />
 102                 )}
 103                 {isEditEnabled && !isActiveLinkReadOnly && (
 104                     <CreateNewFileButton close={close} action={() => showCreateFileModal({})} />
 105                 )}
 106                 {!isActiveLinkReadOnly && <ContextSeparator />}
 107                 {!isActiveLinkReadOnly ? (
 108                     <>
 109                         <UploadFileButton close={close} onClick={fileClick} />
 110                         <UploadFolderButton close={close} onClick={folderClick} />
 111                     </>
 112                 ) : null}
 113                 {isAdmin && !isActiveLinkReadOnly && <ContextSeparator />}
 114                 {isAdmin && (
 115                     <ShareFileButtonComponent
 116                         close={close}
 117                         shareId={shareId}
 118                         showFileSharingModal={showFileSharingModal}
 119                         showLinkSharingModal={showLinkSharingModal}
 120                     />
 121                 )}
 122             </ContextMenu>
 123         </>
 124     );
 125 }