client/js/app/src/app/pages/querybuilder/Components/Buttons/CopyResponseButton.jsx


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
40

import React, { useContext, useState } from 'react';
import OverlayImageButton from './OverlayImageButton';

import copyImage from '../../assets/img/copy.svg';
import { ResponseContext } from '../Contexts/ResponseContext';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';

export default function CopyResponseButton() {
  const { response } = useContext(ResponseContext);
  const [show, setShow] = useState(false);

  const handleCopy = () => {
    setShow(true);
    navigator.clipboard.writeText(response);
    setTimeout(() => {
      setShow(false);
    }, 2000);
  };

  return (
    <OverlayTrigger
      placement="left-end"
      show={show}
      overlay={
        <Tooltip id="copy-tooltip">Response copied to clipboard</Tooltip>
      }
    >
      <span>
        <OverlayImageButton
          className="intro-copy"
          image={copyImage}
          height="30"
          width="30"
          tooltip="Copy"
          onClick={handleCopy}
        />
      </span>
    </OverlayTrigger>
  );
}