applications/drive/src/app/components/sections/FileBrowser/CopyLinkIcon.tsx

   1 import type { KeyboardEvent, MouseEvent } from 'react';
   2 import { useCallback, useState } from 'react';
   3
   4 import { c } from 'ttag';
   5
   6 import { Button } from '@proton/atoms';
   7 import { Icon, Tooltip } from '@proton/components';
   8 import noop from '@proton/utils/noop';
   9
  10 import { useActions } from '../../../store';
  11 import type { BrowserItemId } from '../../FileBrowser/interface';
  12
  13 interface Props {
  14     shareId: string;
  15     linkId: BrowserItemId;
  16     trashed: number | null;
  17     isExpired: boolean;
  18     className?: string;
  19 }
  20
  21 const CopyLinkIcon = ({ shareId, linkId, trashed, isExpired, className }: Props) => {
  22     const [isLoading, setIsLoading] = useState(false);
  23     const { copyShareLinkToClipboard } = useActions();
  24
  25     const handleGetLink = useCallback(
  26         (e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => {
  27             if (!copyShareLinkToClipboard) {
  28                 return;
  29             }
  30
  31             setIsLoading(true);
  32             e.stopPropagation(); // To not show file preview when clicking (to not trigger other click event).
  33             e.preventDefault(); // To not show file preview when pressing enter (to disable click event).
  34
  35             copyShareLinkToClipboard(new AbortController().signal, shareId, linkId)
  36                 .finally(() => {
  37                     setIsLoading(false);
  38                 })
  39                 .catch(noop);
  40         },
  41         [shareId, linkId]
  42     );
  43
  44     if (!copyShareLinkToClipboard || isExpired || trashed) {
  45         return null;
  46     }
  47
  48     return (
  49         <Tooltip title={c('Action').t`Copy link`}>
  50             <Button
  51                 loading={isLoading}
  52                 icon
  53                 shape="ghost"
  54                 size="small"
  55                 className={className}
  56                 onClick={handleGetLink}
  57                 onKeyDown={(e) => {
  58                     if (e.key === 'Enter' || e.key === ' ') {
  59                         handleGetLink(e);
  60                     }
  61                 }}
  62             >
  63                 <Icon name="link" alt={c('Action').t`Copy link`} />
  64             </Button>
  65         </Tooltip>
  66     );
  67 };
  68
  69 export default CopyLinkIcon;