import React , { FunctionComponent , useCallback } from 'react' ; import { RcIconButton , spacing , styled } from '@ringcentral/juno' ; import { Copy as CopyIcon } from '@ringcentral/juno/icon' ; import CopyToClipboard from '../CopyToClipboard' ; import i18n from './i18n' ; import { ICopyBtnProps , InnerBtnProps } from './interface' ; const BtnContainer = styled ( 'div' ) `
  & {
    width: ${ spacing ( 8 ) };
  }
` ; const InnerBtn = ( { size , currentLocale , executeCopy , } ) => ( < RcIconButton variant = "round" size = { size } color = "neutral.f04" data - sign = "copyBtn" symbol = { CopyIcon } title = { i18n . getString ( 'copy' , currentLocale ) } onClick = { executeCopy } / > ) ; export const CopyBtn = ( { value , size , currentLocale , handleSuccess , handleFailure , } ) => { const memoizedBtn = useCallback ( ( { executeCopy } ) => ( < InnerBtn size = { size } currentLocale = { currentLocale } executeCopy = { executeCopy } / > ) , [ size , currentLocale ] ) ; return ( < BtnContainer aria - disabled > < CopyToClipboard currentLocale = { currentLocale } copiedText = { value } button = { memoizedBtn } handleSuccess = { handleSuccess } handleFailure = { handleFailure } / > < /BtnContainer>); } ; CopyBtn . defaultProps = { handleSuccess : ( ) => { } , handleFailure : ( ) => { } , currentLocale : 'en-US' , value : '' , size : 'small' , } ;