import React , { useRef } from "react" ; import { css } from "emotion" ; import { ActionIcon } from "./action-icon" ; interface Props { value : string ; onCopy : ( ) => void ; } export const CopyActionIcon = ( { value , onCopy } ) => { const textAreaRef = useRef < HTMLTextAreaElement > ( null ) ; if ( ! document . queryCommandSupported ( "copy" ) ) { return null ; } const copyToClipboard = ( ) => { if ( textAreaRef && textAreaRef . current ) { textAreaRef . current . select ( ) ; document . execCommand ( "copy" ) ; onCopy ( ) ; } } ; return ( < > < ActionIcon onClick = { copyToClipboard } iconClassName = "copy" / > < form > < textarea className = { css `
            position: absolute;
            left: -9999px;
          ` } ref = { textAreaRef } readOnly value = { value } / > < /form> < />); } ;