applications/drive/src/app/components/sections/Photos/toolbar/PhotosDownloadButton.tsx

   1 import type { FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { CircleLoader } from '@proton/atoms';
   6 import { Icon, ToolbarButton } from '@proton/components';
   7 import useLoading from '@proton/hooks/useLoading';
   8 import noop from '@proton/utils/noop';
   9
  10 import type { PhotoLink } from '../../../../store';
  11
  12 interface Props {
  13     selectedLinks: PhotoLink[];
  14     requestDownload: (linkIds: string[]) => Promise<void>;
  15 }
  16
  17 export const PhotosDownloadButton: FC<Props> = ({ requestDownload, selectedLinks }) => {
  18     const [loading, withLoading] = useLoading();
  19
  20     const onClick = () => {
  21         const linkIds = selectedLinks.map((link) => link.linkId);
  22
  23         withLoading(requestDownload(linkIds)).catch(noop);
  24     };
  25
  26     return (
  27         <ToolbarButton
  28             title={c('Action').t`Download`}
  29             disabled={loading}
  30             icon={loading ? <CircleLoader /> : <Icon name="arrow-down-line" alt={c('Action').t`Download`} />}
  31             onClick={onClick}
  32             data-testid="toolbar-download"
  33         />
  34     );
  35 };