From 0493de02be583df9e8c78ee00d2c0da35dec6794 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 11 Mar 2022 14:20:31 +0000 Subject: [PATCH] Improved the copy button behaviour on the info headers --- app/components/InfoHeader.tsx | 37 ++++++++++++++++++++++++----------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/app/components/InfoHeader.tsx b/app/components/InfoHeader.tsx index 5699083..fed3024 100644 --- a/app/components/InfoHeader.tsx +++ b/app/components/InfoHeader.tsx @@ -1,6 +1,6 @@ import { inferType } from "@jsonhero/json-infer-types"; import { JSONHeroPath } from "@jsonhero/path"; -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import { useJson } from "~/hooks/useJson"; import { useJsonColumnViewState } from "~/hooks/useJsonColumnView"; import { concatenated, getHierarchicalTypes } from "~/utilities/dataType"; @@ -10,7 +10,7 @@ import { Body } from "./Primitives/Body"; import { LargeMono } from "./Primitives/LargeMono"; import { Title } from "./Primitives/Title"; import { ValueIcon, ValueIconSize } from "./ValueIcon"; -import { CopyText } from "./CopyText"; +import { CopyTextButton } from "./CopyTextButton"; export type InfoHeaderProps = { relatedPaths: string[]; @@ -40,6 +40,8 @@ export function InfoHeader({ relatedPaths }: InfoHeaderProps) { return isNullable(relatedPaths, json); }, [relatedPaths, json]); + const [hovering, setHovering] = useState(false); + return (
@@ -50,17 +52,30 @@ export function InfoHeader({ relatedPaths }: InfoHeaderProps) {
-
+
setHovering(true)} + onMouseLeave={() => setHovering(false)} + > {isSelectedLeafNode && ( - - - {formatRawValue(selectedInfo)} - - + {formatRawValue(selectedInfo)} + )} +
+ +
@@ -82,7 +97,7 @@ function EmptyState() {
- + <Title className="text-slate-800 mb-1 overflow-ellipsis break-words dark:text-slate-300"> null