import * as React from 'react' ; import styles from './CopiableText.module.scss' ; import Icon , { Props as IconProps } from '../Icon' ; import Text , { Props as TextProps } from '../Text' ; const COPIED_TEXT = 'Copied' ; export interface Props extends Partial < IconProps > , TextProps { text : string ; } const CopiableText = props => { const [ hover , setHover ] = React . useState ( true ) ; const [ text , setText ] = React . useState ( props . text ) ; let copiedTimeout ; const clipToClipboard = async ( event , textToCopy ) => { event . stopPropagation ( ) ; setHover ( true ) ; setText ( COPIED_TEXT ) ; copiedTimeout = setTimeout ( ( ) => { setText ( textToCopy ) ; } , 2000 ) ; await navigator . clipboard . writeText ( textToCopy ) ; } ; React . useEffect ( ( ) => clearTimeout ( copiedTimeout ) ) ; return ( < div className = { styles . root } onMouseOver = { ( ) => ( text === COPIED_TEXT ? setHover ( true ) : setHover ( false ) ) } onMouseOut = { ( ) => setHover ( true ) } > < Text color = { props . color } type = { props . type } className = { styles . copyText } > { text . substr ( 0 , text . length - 4 ) } < /Text> < Text color = { props . color } type = { props . type } className = { styles . copyTextIndent } > { text . substr ( text . length - 4 ) } < /Text> < div className = { `${ styles . icon }` } onClick = { async ( event ) => clipToClipboard ( event , text ) } > < span hidden = { hover } > < Icon name = { 'content_copy' } size = { props . size } > < /Icon> < /span> < /div> < /div>); } ; export default CopiableText ;