applications/drive/src/app/components/sections/SharedWithMe/SharedWithMeToolbar.tsx

   1 import { useMemo } from 'react';
   2
   3 import { Vr } from '@proton/atoms';
   4 import { Toolbar } from '@proton/components';
   5
   6 import { useSelection } from '../../FileBrowser';
   7 import { DetailsButton, DownloadButton, LayoutButton, OpenInDocsButton, PreviewButton } from '../ToolbarButtons';
   8 import { hasBookmarkSelected, hasInvitationSelected, isMultiSelect } from '../ToolbarButtons/utils';
   9 import { getSelectedSharedWithMeItems } from '../helpers';
  10 import type { SharedWithMeItem } from './SharedWithMe';
  11 import { OpenBookmarkButton } from './ToolbarButtons/OpenBookmarkButton';
  12 import { RemoveBookmarkButton } from './ToolbarButtons/RemoveBookmarkButton';
  13 import { RemoveMeButton } from './ToolbarButtons/RemoveMeButton';
  14
  15 interface Props {
  16     shareId: string;
  17     items: SharedWithMeItem[];
  18 }
  19
  20 const SharedWithMeToolbar = ({ items }: Props) => {
  21     const selectionControls = useSelection()!;
  22
  23     const selectedItems = useMemo(
  24         () => getSelectedSharedWithMeItems(items, selectionControls!.selectedItemIds),
  25         [items, selectionControls!.selectedItemIds]
  26     );
  27
  28     const renderSelectionActions = () => {
  29         if (hasInvitationSelected(selectedItems)) {
  30             return;
  31         }
  32         if (hasBookmarkSelected(selectedItems)) {
  33             return (
  34                 <>
  35                     <OpenBookmarkButton selectedBrowserItems={selectedItems} />
  36                     <RemoveBookmarkButton selectedBrowserItems={selectedItems} />
  37                 </>
  38             );
  39         }
  40         return (
  41             <>
  42                 <PreviewButton selectedBrowserItems={selectedItems} />
  43                 <OpenInDocsButton selectedBrowserItems={selectedItems} />
  44                 <DownloadButton selectedBrowserItems={selectedItems} />
  45                 <DetailsButton selectedBrowserItems={selectedItems} />
  46                 {!isMultiSelect(selectedItems) ? <Vr /> : null}
  47                 <RemoveMeButton selectedBrowserItems={selectedItems} />
  48             </>
  49         );
  50     };
  51
  52     return (
  53         <Toolbar className="py-1 px-2 toolbar--heavy toolbar--in-container">
  54             <div className="gap-2 flex flex-nowrap shrink-0">{renderSelectionActions()}</div>
  55             <span className="ml-auto flex flex-nowrap shrink-0">
  56                 {selectedItems.length ? <Vr className="hidden lg:flex mx-2" /> : null}
  57                 <LayoutButton />
  58             </span>
  59         </Toolbar>
  60     );
  61 };
  62
  63 export default SharedWithMeToolbar;