@thecb/components 7.0.2-beta.5 → 7.0.2-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.0.2-beta.5",
+  "version": "7.0.2-beta.6",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/copyable/Copyable.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ButtonWithAction from "../../atoms/button-with-action";
 import ClipboardIcon from "../../atoms/icons/ClipboardIcon";
 import Popover from "../popover";
@@ -6,12 +6,22 @@ import Stack from "../../atoms/layouts/Stack";
 import Text from "../../atoms/text";
 
 /*
-This component will render `text` and a clipboard icon. When hovered, a popover with content `initialPopoverContent` will be displayed.
-When clicked, `text` will be copied to the clipboard, the popover content will change to `copiedPopoverContent` for `copiedPopoverContentDuration` milliseconds,
-and the `onCopy` callback will be executed.
+This component will render `content` and a clipboard icon.
+When hovered, a popover with content `initialPopoverContent` will be displayed.
+to the left of the content.
+
+When clicked, `content` will be copied to the clipboard, the popover content
+will change to `copySuccessPopoverContent` for `copiedPopoverContentDuration`
+milliseconds, and the `onCopy` callback will be executed.
+
+If the content was unable to be copied to the clipboard, the popover will instead
+display `copyErrorPopoverContent`
+
+If you only want the copy to clipboard behaviour without a popover, pass the prop
+`hasPopover={false}`
 */
 
-const CopyableText = ({ text, onClick }) => {
+const CopyableContent = ({ content, onClick }) => {
   return (
     <ButtonWithAction
       data-testid="copyable-trigger"
@@ -21,7 +31,7 @@ const CopyableText = ({ text, onClick }) => {
       extraStyles="padding: 0; margin: 0; min-height: initial; min-width: initial"
     >
       <Stack direction="row" childGap="0.25rem">
-        <Text>{text}</Text>
+        <Text>{content}</Text>
         <ClipboardIcon />
       </Stack>
     </ButtonWithAction>
@@ -29,56 +39,103 @@ const CopyableText = ({ text, onClick }) => {
 };
 
 const Copyable = ({
-  text,
+  content,
   onCopy,
   initialPopoverContent = "Click to copy to clipboard",
-  copiedPopoverContent = "Copied!",
-  withPopover = true,
-  popoverMinWidth = "210px",
+  copySuccessPopoverContent = "Copied!",
+  copyErrorPopoverContent = "Unable to copy value",
   copiedPopoverContentDuration = 1000,
+  hasPopover = true,
+  popoverMinWidth = "210px",
   popoverID = 0,
-  extraStyles,
+  popoverExtraStyles
 }) => {
-  const popoverPosition = {
-    top: "-65px",
-    right: "auto",
-    bottom: "auto",
-    left: "50%",
-  };
-  const popoverArrowPosition = {
-    arrowTop: "auto",
-    arrowRight: "auto",
-    arrowBottom: "-8px",
-    arrowLeft: "calc(50% - 4px)", // Popover arrow is 8px wide. This places the middle of the arrow in the middle of the popover.
-  };
   const [popoverContent, setPopoverContent] = useState(initialPopoverContent);
-  const [timer, setTimer] = useState(undefined);
-  const onClick = () => {
-    setPopoverContent(copiedPopoverContent);
-    navigator.clipboard.writeText(text).catch((e) => console.error(e));
-    onCopy?.();
-    if (timer) {
-      clearTimeout(timer);
+  const [startTimer, setStartTimer] = useState(false);
+  const [attemptCopy, setAttemptCopy] = useState(false);
+  const [timeoutId, setTimeoutId] = useState(null);
+
+  const cleanup = () => {
+    if (timeoutId) {
+      // console.log(`Clearing timeout ${timeoutId}`);
+      clearTimeout(timeoutId);
+    }
+  };
+
+  useEffect(() => {
+    if (startTimer) {
+      if (timeoutId) {
+        // If there's an active timeout, clean it up.
+        cleanup();
+      }
+      // Start a timeout to restore popover content to the initial value.
+      // Record the ID of the timeout so it can be cleaned up later.
+      // console.log("Starting timeout");
+      setTimeoutId(
+        setTimeout(() => {
+          // console.log(`Timeout ${timeoutId} finished`);
+          setPopoverContent(initialPopoverContent);
+        }, copiedPopoverContentDuration)
+      );
+
+      // Set startTimer to false immediately after starting the timer,
+      // so subsequent clicks will start a new timer, refreshing the duration.
+      setStartTimer(false);
+    }
+
+    // Return cleanup function so timeout will be cleared when component unmoumnts.
+    return cleanup;
+  }, [startTimer]);
+
+  useEffect(() => {
+    if (attemptCopy) {
+      navigator.clipboard
+        .writeText(content)
+        .then(() => {
+          setPopoverContent(copySuccessPopoverContent);
+          onCopy?.();
+          setAttemptCopy(false);
+        })
+        .catch(error => {
+          console.error(error);
+          setPopoverContent(copyErrorPopoverContent);
+          setAttemptCopy(false);
+        });
     }
-    setTimer(
-      setTimeout(() => {
-        setPopoverContent(initialPopoverContent);
-        setTimer(undefined);
-      }, copiedPopoverContentDuration)
-    );
+  }, [attemptCopy]);
+
+  const onClick = () => {
+    setStartTimer(true);
+    setAttemptCopy(true);
   };
-  return withPopover ? (
+
+  const popoverArrowWidth = "8px";
+
+  return hasPopover ? (
     <Popover
       minWidth={popoverMinWidth}
-      position={popoverPosition}
-      arrowPosition={popoverArrowPosition}
+      position={{
+        top: "auto",
+        right: "auto",
+        bottom: "auto",
+        left: `calc(-${popoverArrowWidth} - 8px)`
+      }}
+      arrowPosition={{
+        arrowTop: "auto",
+        arrowRight: "-8px",
+        arrowBottom: `calc(50% - ${popoverArrowWidth})`,
+        arrowLeft: "auto"
+      }}
+      transform="translate(-100%, -75%)"
+      arrowDirection="right"
       popoverID={popoverID}
-      extraStyles={`> button#btnPopover${popoverID} { margin: 0 }; > #Disclosed${popoverID} { transform: translateX(-50%); }; ${extraStyles}`}
-      triggerText={CopyableText({ text, onClick })}
+      buttonExtraStyles="margin: 0"
+      extraStyles={popoverExtraStyles}
+      triggerText={CopyableContent({ content, onClick })}
       content={popoverContent}
     ></Popover>
   ) : (
-    CopyableText({ text, onClick })
+    CopyableContent({ content, onClick })
   );
 };
 

package/src/components/molecules/copyable/index.d.ts

@@ -2,15 +2,16 @@ import React from "react";
 import Expand from "../../../util/expand";
 
 export interface CopyableProps {
-  text: string;
+  content: string;
+  onCopy?: () => void;
   initialPopoverContent?: string;
-  copiedPopoverContent?: string;
+  copySuccessPopoverContent?: string;
+  copyErrorPopoverContent?: string;
   copiedPopoverContentDuration?: number;
-  withPopover?: boolean;
+  hasPopover?: boolean;
   popoverID?: number;
   popoverMinWidth?: string;
-  onCopy?: () => void;
-  extraStyles?: string;
+  popoverExtraStyles?: string;
 }
 
 export const Copyable: React.FC<Expand<CopyableProps> &

package/src/components/molecules/popover/Popover.js

@@ -8,6 +8,20 @@ import { useOutsideClick } from "../../../util";
 import { noop } from "../../../util/general";
 import { fallbackValues } from "./Popover.theme";
 
+const arrowBorder = (direction, width = "8px") => {
+  const angle = `${width} solid transparent`;
+  const straight = `${width} solid rgba(255, 255, 255, 0.85)`;
+  if (direction == "down") {
+    return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
+  } else if (direction == "up") {
+    return `border-left: ${angle}; border-right: ${angle}; border-bottom: ${straight}`;
+  } else if (direction == "left") {
+    return `border-top: ${angle}; border-bottom: ${angle}; border-right: ${straight}`;
+  } else if (direction == "right") {
+    return `border-top: ${angle}; border-bottom: ${angle}; border-left: ${straight}`;
+  }
+};
+
 const Popover = ({
   themeValues,
   triggerText = "",
@@ -23,7 +37,10 @@ const Popover = ({
   maxWidth = "300px",
   height = "auto",
   position, // { top: string, right: string, bottom: string, left: string }
-  arrowPosition // { top: string, right: string, bottom: string, left: string }
+  arrowPosition, // { top: string, right: string, bottom: string, left: string }
+  arrowDirection = "down",
+  transform,
+  buttonExtraStyles
 }) => {
   const { hoverColor, activeColor, popoverTriggerColor } = themeValues;
   const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
@@ -73,6 +90,7 @@ const Popover = ({
         aria-describedby={`Disclosure${popoverID}`}
         aria-controls={`Disclosed${popoverID}`}
         ref={triggerRef}
+        extraStyles={buttonExtraStyles}
       >
         {hasIcon && (
           <>
@@ -109,12 +127,24 @@ const Popover = ({
           bottom: ${bottom}; 
           left: ${left};
           height: ${height};
+          transform: ${transform ? transform : "none"};
           `}
       >
         <Paragraph>{content}</Paragraph>
         <Box
           padding="0"
-          extraStyles={`position: absolute; content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255, 255, 255, 0.85); filter: drop-shadow(2px 8px 14px black); bottom: ${arrowBottom}; right: ${arrowRight}; top: ${arrowTop}; left: ${arrowLeft};`}
+          extraStyles={`
+            position: absolute;
+            content: "";
+            width: 0;
+            height: 0;
+            ${arrowBorder(arrowDirection, "8px")};
+            filter: drop-shadow(2px 8px 14px black);
+            bottom: ${arrowBottom};
+            right: ${arrowRight};
+            top: ${arrowTop};
+            left: ${arrowLeft};
+          `}
         />
       </Box>
     </Box>

package/src/components/molecules/popover/index.d.ts

@@ -20,6 +20,9 @@ export interface PopoverProps {
     arrowBottom: string;
     arrowLeft: string;
   };
+  arrowDirection?: "left" | "right" | "top" | "bottom";
+  transform?: string;
+  disclosedExtraStyles?: string;
 }
 
 export const Popover: React.FC<Expand<PopoverProps> &