Commit 84804a63 authored by JzoNg's avatar JzoNg

fix: copy to clipboard

parent e80ee32f
'use client'
import React, { useEffect, useState } from 'react'
import copy from 'copy-to-clipboard'
import React, { useCallback, useEffect, useState } from 'react'
// import copy from 'copy-to-clipboard'
import { t } from 'i18next'
import s from './index.module.css'
import Tooltip from '@/app/components/base/tooltip'
import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
type IInvitationLinkProps = {
value?: string
......@@ -13,6 +14,12 @@ const InvitationLink = ({
value = '',
}: IInvitationLinkProps) => {
const [isCopied, setIsCopied] = useState(false)
const [_, copy] = useCopyToClipboard()
const copyHandle = useCallback(() => {
copy(value)
setIsCopied(true)
}, [value, copy])
useEffect(() => {
if (isCopied) {
......@@ -35,10 +42,7 @@ const InvitationLink = ({
content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
className='z-10'
>
<div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={() => {
copy(value)
setIsCopied(true)
}}>{value}</div>
<div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={copyHandle}>{value}</div>
</Tooltip>
</div>
<div className="flex-shrink-0 h-4 bg-gray-200 border" />
......@@ -48,10 +52,7 @@ const InvitationLink = ({
className='z-10'
>
<div className="px-0.5 flex-shrink-0">
<div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={() => {
copy(value)
setIsCopied(true)
}}>
<div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={copyHandle}>
</div>
</div>
</Tooltip>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment