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

   1 import { useMemo } from 'react';
   2
   3 import { Vr } from '@proton/atoms';
   4 import { Toolbar, useActiveBreakpoint } 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 import { getDevice } from '@proton/shared/lib/helpers/browser';
   8
   9 import type { DecryptedLink } from '../../../store';
  10 import { useDriveSharingFlags } from '../../../store';
  11 import { useSelection } from '../../FileBrowser';
  12 import {
  13     DetailsButton,
  14     DownloadButton,
  15     LayoutButton,
  16     OpenInDocsButton,
  17     PreviewButton,
  18     RenameButton,
  19     ShareButton,
  20     ShareLinkButton,
  21 } from '../ToolbarButtons';
  22 import ShareButtonLEGACY from '../ToolbarButtons/_legacy/ShareButtonLEGACY';
  23 import ShareLinkButtonLEGACY from '../ToolbarButtons/_legacy/ShareLinkButtonLEGACY';
  24 import { getSelectedItems } from '../helpers';
  25 import useIsEditEnabled from '../useIsEditEnabled';
  26 import {
  27     ActionsDropdown,
  28     CreateNewFileButton,
  29     CreateNewFolderButton,
  30     MoveToFolderButton,
  31     MoveToTrashButton,
  32     UploadFileButton,
  33     UploadFolderButton,
  34 } from './ToolbarButtons';
  35
  36 interface Props {
  37     shareId: string;
  38     linkId: string;
  39     items: DecryptedLink[];
  40     permissions: SHARE_MEMBER_PERMISSIONS;
  41     showOptionsForNoSelection?: boolean;
  42     isLinkReadOnly?: boolean;
  43 }
  44
  45 const DriveToolbar = ({ shareId, items, showOptionsForNoSelection = true, isLinkReadOnly, permissions }: Props) => {
  46     const isDesktop = !getDevice()?.type;
  47     const { viewportWidth } = useActiveBreakpoint();
  48     const selectionControls = useSelection()!;
  49     const isEditEnabled = useIsEditEnabled();
  50     const { isSharingInviteAvailable } = useDriveSharingFlags();
  51
  52     const isEditor = useMemo(() => getCanWrite(permissions), [permissions]);
  53     const isAdmin = useMemo(() => getCanAdmin(permissions), [permissions]);
  54
  55     const selectedItems = useMemo(
  56         () => getSelectedItems(items, selectionControls!.selectedItemIds),
  57         [items, selectionControls!.selectedItemIds]
  58     );
  59
  60     const shouldShowShareButton = !isLinkReadOnly || items.length > 0;
  61     const ShareButtonComponent = isSharingInviteAvailable ? ShareButton : ShareButtonLEGACY;
  62
  63     const renderSelectionActions = () => {
  64         if (!selectedItems.length) {
  65             if (!showOptionsForNoSelection) {
  66                 return null;
  67             }
  68             return (
  69                 <>
  70                     {isEditor && !isLinkReadOnly ? (
  71                         <>
  72                             <CreateNewFolderButton />
  73                             {isEditEnabled && <CreateNewFileButton />}
  74                             <Vr />
  75                             {isDesktop && <UploadFolderButton />}
  76                             <UploadFileButton />
  77                             <Vr />
  78                         </>
  79                     ) : null}
  80
  81                     {isAdmin && shouldShowShareButton && <ShareButtonComponent shareId={shareId} />}
  82                 </>
  83             );
  84         }
  85
  86         return (
  87             <>
  88                 <PreviewButton selectedBrowserItems={selectedItems} />
  89                 <OpenInDocsButton selectedBrowserItems={selectedItems} />
  90                 <DownloadButton selectedBrowserItems={selectedItems} />
  91                 {viewportWidth['<=small'] ? (
  92                     <ActionsDropdown shareId={shareId} selectedLinks={selectedItems} permissions={permissions} />
  93                 ) : (
  94                     <>
  95                         {isAdmin && (
  96                             <>
  97                                 {isSharingInviteAvailable ? (
  98                                     <ShareLinkButton selectedLinks={selectedItems} />
  99                                 ) : (
 100                                     <ShareLinkButtonLEGACY selectedLinks={selectedItems} />
 101                                 )}
 102                                 <Vr />
 103                             </>
 104                         )}
 105                         {isEditor && !isLinkReadOnly ? (
 106                             <>
 107                                 <MoveToFolderButton shareId={shareId} selectedLinks={selectedItems} />
 108                                 <RenameButton selectedLinks={selectedItems} />
 109                             </>
 110                         ) : null}
 111                         <DetailsButton selectedBrowserItems={selectedItems} />
 112
 113                         {isEditor && (
 114                             <>
 115                                 <Vr />
 116                                 <MoveToTrashButton selectedLinks={selectedItems} />
 117                             </>
 118                         )}
 119                     </>
 120                 )}
 121             </>
 122         );
 123     };
 124
 125     return (
 126         <Toolbar className="py-1 px-2 toolbar--heavy toolbar--in-container">
 127             <div className="gap-2 flex flex-nowrap shrink-0">{renderSelectionActions()}</div>
 128             <span className="ml-auto flex flex-nowrap shrink-0">
 129                 {selectedItems.length > 0 && <Vr className="hidden md:flex mx-2" />}
 130                 <LayoutButton />
 131             </span>
 132         </Toolbar>
 133     );
 134 };
 135
 136 export default DriveToolbar;