diff options
author | Sebastian <sebasjm@gmail.com> | 2022-04-11 11:32:20 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-04-11 11:36:37 -0300 |
commit | df7c249c95bd5583f7cee7cfaabe29b8508babcd (patch) | |
tree | 6d0e53a6f3bda7b0557f13c14b607bdb49f9fd41 /packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | |
parent | 56c2a9c6a659fdb80a037677a1e7b0ce5e5d4c79 (diff) | |
download | wallet-core-df7c249c95bd5583f7cee7cfaabe29b8508babcd.tar.xz |
fix ref for copy and paste
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | 22 |
1 files changed, 15 insertions, 7 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index aff2badac..182e82a3d 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -16,7 +16,7 @@ import { PaytoUri } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { useEffect, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { useTranslationContext } from "../context/translation.js"; import { CopiedIcon, CopyIcon } from "../svg/index.js"; import { ButtonBox, TooltipRight } from "./styled/index.js"; @@ -25,7 +25,7 @@ export interface BankDetailsProps { payto: PaytoUri | undefined; exchangeBaseUrl: string; subject: string; - amount: string; + amount: string | VNode; } export function BankDetailsByPaytoType({ @@ -84,12 +84,17 @@ function Row({ literal, }: { name: VNode; - value: string; + value: string | VNode; literal?: boolean; }): VNode { const [copied, setCopied] = useState(false); + const preRef = useRef<HTMLPreElement>(null); + const tdRef = useRef<HTMLTableCellElement>(null); function copyText(): void { - navigator.clipboard.writeText(value); + const content = literal + ? preRef.current?.textContent + : tdRef.current?.textContent; + navigator.clipboard.writeText(content || ""); setCopied(true); } useEffect(() => { @@ -98,7 +103,7 @@ function Row({ setCopied(false); }, 1000); } - }, [copied]); + }, [copied, preRef]); return ( <tr> <td> @@ -119,12 +124,15 @@ function Row({ </td> {literal ? ( <td> - <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}> + <pre + ref={preRef} + style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }} + > {value} </pre> </td> ) : ( - <td>{value}</td> + <td ref={tdRef}>{value}</td> )} </tr> ); |