Browse Source

fix(web): fix Embedded copy status when toggle options (#621)

tags/0.3.11
Rhon Joe 2 years ago
parent
commit
c00a19ced3
No account linked to committer's email address
1 changed files with 24 additions and 3 deletions
  1. 24
    3
      web/app/components/app/overview/embedded/index.tsx

+ 24
- 3
web/app/components/app/overview/embedded/index.tsx View File

import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import cn from 'classnames' import cn from 'classnames'
import style from './style.module.css' import style from './style.module.css'


type Option = keyof typeof OPTION_MAP type Option = keyof typeof OPTION_MAP


type OptionStatus = {
iframe: boolean
scripts: boolean
}

const Embedded = ({ isShow, onClose, appBaseUrl, accessToken }: Props) => { const Embedded = ({ isShow, onClose, appBaseUrl, accessToken }: Props) => {
const { t } = useTranslation() const { t } = useTranslation()
const [option, setOption] = useState<Option>('iframe') const [option, setOption] = useState<Option>('iframe')
const [isCopied, setIsCopied] = useState({ iframe: false, scripts: false })
const [isCopied, setIsCopied] = useState<OptionStatus>({ iframe: false, scripts: false })
const [_, copy] = useCopyToClipboard() const [_, copy] = useCopyToClipboard()


const { langeniusVersionInfo } = useAppContext() const { langeniusVersionInfo } = useAppContext()
setIsCopied({ ...isCopied, [option]: true }) setIsCopied({ ...isCopied, [option]: true })
} }


// when toggle option, reset then copy status
const resetCopyStatus = () => {
const cache = { ...isCopied }
Object.keys(cache).forEach((key) => {
cache[key as keyof OptionStatus] = false
})
setIsCopied(cache)
}

useEffect(() => {
resetCopyStatus()
}, [isShow])

return ( return (
<Modal <Modal
title={t(`${prefixEmbedded}.title`)} title={t(`${prefixEmbedded}.title`)}
style[`${v}Icon`], style[`${v}Icon`],
option === v && style.active, option === v && style.active,
)} )}
onClick={() => setOption(v as Option)}
onClick={() => {
setOption(v as Option)
resetCopyStatus()
}}
></div> ></div>
) )
})} })}

Loading…
Cancel
Save