packages/pass/components/Copy/Copy.tsx

   1 import type { FC, MouseEvent } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button, type ButtonLikeShape, type ButtonProps } from '@proton/atoms';
   6 import { Icon, Tooltip } from '@proton/components';
   7 import { usePassCore } from '@proton/pass/components/Core/PassCoreProvider';
   8
   9 type Props = ButtonProps & {
  10     value: string;
  11     className?: string;
  12     onCopy?: () => void;
  13     tooltipText?: string;
  14     shape?: ButtonLikeShape;
  15 };
  16
  17 export const Copy: FC<Props> = ({ children, value, onCopy, tooltipText, shape = 'outline', ...rest }) => {
  18     const { writeToClipboard } = usePassCore();
  19
  20     const handleClick = async (e: MouseEvent<HTMLButtonElement>) => {
  21         e.stopPropagation();
  22         await writeToClipboard(value);
  23         onCopy?.();
  24     };
  25
  26     return (
  27         <Tooltip title={tooltipText || c('Label').t`Copy`}>
  28             <Button icon color="weak" shape={shape} {...rest} onClick={handleClick}>
  29                 {children || <Icon name="squares" alt={c('Label').t`Copy`} />}
  30             </Button>
  31         </Tooltip>
  32     );
  33 };