applications/drive/src/app/components/SharedPage/Layout/SharedPageHeader.tsx

   1 import { useActiveBreakpoint } from '@proton/components';
   2 import { isProtonDocument } from '@proton/shared/lib/helpers/mimetype';
   3 import clsx from '@proton/utils/clsx';
   4
   5 import type { useBookmarksPublicView } from '../../../store';
   6 import { useDownloadScanFlag } from '../../../store';
   7 import { useSelection } from '../../FileBrowser';
   8 import { getSelectedItems } from '../../sections/helpers';
   9 import { SaveToDriveButton } from '../Bookmarks/SaveToDriveButton';
  10 import { ClosePartialPublicViewButton } from './ClosePartialPublicViewButton';
  11 import type { DownloadButtonProps } from './DownloadButton';
  12 import { DownloadButton } from './DownloadButton';
  13
  14 interface Props extends DownloadButtonProps {
  15     children: React.ReactNode;
  16     bookmarksPublicView: ReturnType<typeof useBookmarksPublicView>;
  17     className?: string;
  18     hideSaveToDrive?: boolean;
  19     partialView?: boolean;
  20 }
  21
  22 export default function SharedPageHeader({
  23     children,
  24     rootItem,
  25     items,
  26     bookmarksPublicView,
  27     className,
  28     hideSaveToDrive,
  29     partialView,
  30 }: Props) {
  31     const isDownloadScanEnabled = useDownloadScanFlag();
  32     const { viewportWidth } = useActiveBreakpoint();
  33     const selectionControls = useSelection();
  34     const { isAlreadyBookmarked, addBookmark, isLoading, customPassword } = bookmarksPublicView;
  35
  36     const selectedItems = getSelectedItems(items || [], selectionControls?.selectedItemIds || []);
  37
  38     const hasOnlyDocuments =
  39         (items.length > 0 && items.every((item) => item.isFile && isProtonDocument(item.mimeType))) ||
  40         (selectedItems.length > 0 && selectedItems.every((item) => item.isFile && isProtonDocument(item.mimeType)));
  41
  42     return (
  43         <div className={clsx('flex flex-nowrap shrink-0 justify-space-between items-center gap-4', className)}>
  44             <div className="flex flex-nowrap flex-1 items-center mb-0 pb-0 mr-4 shared-page-layout-header">
  45                 {children}
  46             </div>
  47             {!!items.length && !viewportWidth['<=small'] && (
  48                 <DownloadButton
  49                     rootItem={rootItem}
  50                     items={items}
  51                     isScanAndDownload={isDownloadScanEnabled}
  52                     disabled={hasOnlyDocuments}
  53                 />
  54             )}
  55             {partialView && <ClosePartialPublicViewButton />}
  56             {!hideSaveToDrive && !partialView && !viewportWidth['<=small'] && (
  57                 <SaveToDriveButton
  58                     loading={isLoading}
  59                     onClick={addBookmark}
  60                     alreadyBookmarked={isAlreadyBookmarked}
  61                     customPassword={customPassword}
  62                     className="ml-4"
  63                 />
  64             )}
  65         </div>
  66     );
  67 }