applications/drive/src/app/components/sections/ToolbarButtons/DesktopDownloadDropdown.tsx

   1 import { c } from 'ttag';
   2
   3 import { CircleLoader } from '@proton/atoms';
   4 import {
   5     Dropdown,
   6     DropdownButton,
   7     DropdownMenu,
   8     DropdownMenuButton,
   9     DropdownSizeUnit,
  10     Icon,
  11     usePopperAnchor,
  12 } from '@proton/components';
  13
  14 import { useDesktopDownloads } from '../../../hooks/drive/useDesktopDownloads';
  15
  16 interface Props {
  17     className?: string;
  18 }
  19
  20 const DesktopDownloadDropdown = ({ className }: Props) => {
  21     const { anchorRef, isOpen, toggle, close } = usePopperAnchor<HTMLButtonElement>();
  22     const { isLoading, downloads } = useDesktopDownloads();
  23
  24     return (
  25         <>
  26             <DropdownButton
  27                 ref={anchorRef}
  28                 isOpen={isOpen}
  29                 onClick={toggle}
  30                 hasCaret
  31                 shape="ghost"
  32                 size="small"
  33                 className={className}
  34                 data-testid="toolbar-dropdown-button"
  35             >
  36                 {c('Action').t`Download apps`}
  37             </DropdownButton>
  38             <Dropdown
  39                 isOpen={isOpen}
  40                 anchorRef={anchorRef}
  41                 onClose={close}
  42                 size={{
  43                     width: DropdownSizeUnit.Anchor,
  44                 }}
  45             >
  46                 <DropdownMenu>
  47                     {isLoading ? (
  48                         <CircleLoader className="w-full flex items-center my-2" />
  49                     ) : (
  50                         downloads.map(({ platform, icon, name, url, startDownload }) => (
  51                             <DropdownMenuButton
  52                                 className="text-left flex items-center"
  53                                 key={platform}
  54                                 disabled={!url}
  55                                 onClick={startDownload}
  56                             >
  57                                 <Icon name={icon} className="color-weak mr-2" />
  58                                 {name}
  59                             </DropdownMenuButton>
  60                         ))
  61                     )}
  62                 </DropdownMenu>
  63             </Dropdown>
  64         </>
  65     );
  66 };
  67
  68 export default DesktopDownloadDropdown;