Track copied config ID per row instead of globally
The useCopy hook returns a single boolean, so copying one row's configuration ID would flip every row to "Copied!". Track the specific copied ID in state so only the clicked row shows feedback. Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
@@ -14,6 +14,7 @@
|
|||||||
|
|
||||||
import { useCopy } from "@probo/hooks";
|
import { useCopy } from "@probo/hooks";
|
||||||
import { useTranslate } from "@probo/i18n";
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import { useCallback, useRef, useState } from "react";
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
@@ -80,7 +81,14 @@ export function SAMLConfigurationList(props: {
|
|||||||
const { __ } = useTranslate();
|
const { __ } = useTranslate();
|
||||||
|
|
||||||
const confirm = useConfirm();
|
const confirm = useConfirm();
|
||||||
const [isIdCopied, copyId] = useCopy();
|
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||||
|
const copiedIdTimer = useRef<ReturnType<typeof setTimeout>>();
|
||||||
|
const copyId = useCallback((id: string) => {
|
||||||
|
navigator.clipboard.writeText(id);
|
||||||
|
setCopiedId(id);
|
||||||
|
clearTimeout(copiedIdTimer.current);
|
||||||
|
copiedIdTimer.current = setTimeout(() => setCopiedId(null), 2000);
|
||||||
|
}, []);
|
||||||
const [isCopied, copy] = useCopy();
|
const [isCopied, copy] = useCopy();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@@ -168,7 +176,7 @@ export function SAMLConfigurationList(props: {
|
|||||||
className="font-mono text-xs text-gray-600 hover:text-gray-900"
|
className="font-mono text-xs text-gray-600 hover:text-gray-900"
|
||||||
title={__("Click to copy")}
|
title={__("Click to copy")}
|
||||||
>
|
>
|
||||||
{isIdCopied ? __("Copied!") : config.id}
|
{copiedId === config.id ? __("Copied!") : config.id}
|
||||||
</button>
|
</button>
|
||||||
</Td>
|
</Td>
|
||||||
<Td>
|
<Td>
|
||||||
|
|||||||
Reference in New Issue
Block a user