fix: copy clipboard (#121)

app/components/common/CopyText/components/ClipboardCopy/clipboardCopy.tsx

@@ -0,0 +1,39 @@
+import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import { IconButton, Tooltip, TooltipProps } from "@mui/material";
+import copy from "copy-to-clipboard";
+import { useCallback, useEffect, useState } from "react";
+import { ICON_BUTTON_PROPS, ICON_PROPS, TOOLTIP_PROPS } from "./constants";
+
+export interface CopyToClipboardProps {
+  timeoutDelay?: number;
+  tooltipProps?: Partial<TooltipProps>;
+  value: boolean | number | string;
+}
+
+export const ClipboardCopy = ({
+  timeoutDelay = 2000,
+  tooltipProps,
+  value,
+}: CopyToClipboardProps): JSX.Element => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  const onCopy = useCallback((): void => {
+    copy(value.toString());
+    setOpen(true);
+  }, [value]);
+
+  useEffect(() => {
+    if (open) {
+      const timeout = setTimeout(() => setOpen(false), timeoutDelay);
+      return (): void => clearTimeout(timeout);
+    }
+  }, [open, timeoutDelay]);
+
+  return (
+    <Tooltip {...TOOLTIP_PROPS} open={open} {...tooltipProps}>
+      <IconButton {...ICON_BUTTON_PROPS} onClick={onCopy}>
+        <ContentCopyRoundedIcon {...ICON_PROPS} />
+      </IconButton>
+    </Tooltip>
+  );
+};

app/components/common/CopyText/components/ClipboardCopy/constants.ts

@@ -0,0 +1,18 @@
+import { IconButtonProps, IconProps, TooltipProps } from "@mui/material";
+
+export const ICON_BUTTON_PROPS: Partial<IconButtonProps> = {
+  size: "xxsmall",
+};
+
+export const ICON_PROPS: Pick<IconProps, "color" | "fontSize"> = {
+  color: "primary",
+  fontSize: "small",
+};
+
+export const TOOLTIP_PROPS: Required<Pick<TooltipProps, "title">> &
+  Partial<Omit<TooltipProps, "title">> = {
+  arrow: true,
+  disableHoverListener: true,
+  placement: "top",
+  title: "Copied",
+};

app/components/common/CopyText/copyText.tsx

@@ -1,24 +1,32 @@
-import { CopyToClipboard } from "@databiosphere/findable-ui/lib/components/common/CopyToClipboard/copyToClipboard";
 import { Grid2, Grid2Props, Typography } from "@mui/material";
 import { ReactNode } from "react";
+import {
+  ClipboardCopy,
+  CopyToClipboardProps,
+} from "./components/ClipboardCopy/clipboardCopy";
 
-export interface CopyTextProps {
+export interface CopyTextProps extends CopyToClipboardProps {
   children: ReactNode;
   gridProps?: Partial<Grid2Props>;
-  text: string;
 }
 
 export const CopyText = ({
   children,
   gridProps,
-  text,
+  timeoutDelay,
+  tooltipProps,
+  value,
 }: CopyTextProps): JSX.Element => {
   return (
     <Grid2 container columnSpacing={1} wrap="nowrap" {...gridProps}>
       <Typography component="span" noWrap>
         {children}
       </Typography>
-      <CopyToClipboard copyStr={text} />
+      <ClipboardCopy
+        timeoutDelay={timeoutDelay}
+        tooltipProps={tooltipProps}
+        value={value}
+      />
     </Grid2>
   );
 };

app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts

@@ -138,7 +138,7 @@ export const buildGenomeDetails = (
     "Assembly Version ID",
     C.CopyText({
       children: genome.genomeVersionAssemblyId,
-      text: genome.genomeVersionAssemblyId,
+      value: genome.genomeVersionAssemblyId,
     })
   );
   keyValuePairs.set("VeUPathDB Project", genome.vEuPathDbProject);

package.json

@@ -23,6 +23,7 @@
     "@mui/material": "^6.0.2",
     "@next/mdx": "^14.1.0",
     "@tanstack/react-table": "^8.19.2",
+    "copy-to-clipboard": "^3.3.3",
     "next": "^14.1.0",
     "next-compose-plugins": "^2.2.1",
     "react": "^18.3.1",