web.lib.core.components.copy-to-clipboard.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of code-quarkus Show documentation

Customize a Web Interface to generate Quarkus starter projects.

There is a newer version: 37

import React, { MouseEvent, useEffect, useState } from 'react';
import copy from 'copy-to-clipboard';
import { useAnalytics } from '../../core/analytics'
import { OverlayTrigger, Popover } from 'react-bootstrap';
import { Placement } from 'react-bootstrap/Overlay';
import { FaClipboard, FaClipboardCheck, FaInfo } from 'react-icons/fa';
import './copy-to-clipboard.scss';
import classNames from 'classnames';

export interface CopyToClipboardProps {
  id: string;
  eventContext: object;
  content: string;
  children?: React.ReactNode;
  tooltipPlacement?: Placement;
  zIndex?: number;
  light?: boolean;
  className?: string;
  onClick?: (e: MouseEvent) => void;
}

export function CopyToClipboard(props: CopyToClipboardProps) {
  const [ copied, setCopied ] = useState(false);
  const [ active, setActive ] = useState(false);
  const analytics = useAnalytics();

  const copyToClipboard = (e: MouseEvent) => {
    e.stopPropagation();
    if (props.onClick) props.onClick(e);
    copy(props.content);
    if (props.eventContext && !copied) {
      analytics.event('Copy to Clipboard', props.eventContext);
    }
    setCopied(true);
  };

  const tooltip = props.light ? (
    
      {copied ?  : }{copied ? 'It\'s in your clipboard!' : 'Copy this snippet to the clipboard'}
    
  ) : (
    
      {copied ? 'It\'s in your clipboard!' : 'Click to copy the snippet below to the clipboard:'}
      
        {props.content}
      
    
  )

  function onEnter() {
    return setActive(true);
  }

  useEffect(() => {
    const timer = setTimeout(() => {
      setCopied(false);
    }, 2000);
    return () => clearTimeout(timer);
  }, [ copied ]);

  function onLeave() {
    return setActive(false);
  }

  return (
    
      
        {active || copied ?  : }
        {props.children}
      
    
  );
}