clipboard CopyToClipboard.tsx

0% Statements 0/38

0% Branches 0/1

0% Functions 0/1

0% Lines 0/38

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { IconCopy } from '@tabler/icons-react';
import { memo, useCallback, type MouseEventHandler } from 'react';

import { IconButton, type IconButtonProps } from '@allshares/studio-design-system';
import { type MergeAll } from '@amalia/ext/typescript';

import { useClipboard } from './useClipboard';

export type CopyToClipboardProps = MergeAll<
  [IconButtonProps, { value?: string | null }, Pick<Partial<IconButtonProps>, 'icon' | 'onClick' | 'size'>]
>;

export const CopyToClipboard = memo(function CopyToClipboardButton({
  value,
  icon = <IconCopy />,
  size = 'medium',
  onClick,
  ...props
}: CopyToClipboardProps) {
  const { copy } = useClipboard();

  const onClickCopy: MouseEventHandler<HTMLButtonElement> = useCallback(
    (event) => {
      copy(value ?? '');
      onClick?.(event);
    },
    [copy, value, onClick],
  );

  return (
    <IconButton
      icon={icon}
      size={size}
      onClick={onClickCopy}
      {...props}
    />
  );
});