| 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> | ||||
| ) | ) | ||||
| })} | })} |