added smart breakdown item wrapping

xola · Jul 19, 2023 · 3357f30 · 3357f30
1 parent a508893
commit 3357f30
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 10 deletions.
diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useRef, useState, useEffect } from "react";
 import { Currency } from "./Utilities/Currency";
 
 const colors = {
@@ -32,19 +32,67 @@ Breakdown.propTypes = {
     currency: PropTypes.string.isRequired,
 };
 
-const BreakdownItem = ({ children, info, methodIcon, secondary, value, className, color = "default", ...rest }) => {
+const BreakdownItem = ({
+    children,
+    info,
+    methodIcon,
+    secondary,
+    date,
+    value,
+    className,
+    color = "default",
+    ...rest
+}) => {
+    const containerRef = useRef(null);
+    const textRef = useRef(null);
+    const [rowWidthExceeds20Percent, setRowWidthExceeds20Percent] = useState(false);
+    const dateOrInfoExist = !!date || !!info;
     const currency = useContext(CurrencyContext);
 
+    useEffect(() => {
+        const containerElement = containerRef.current;
+        const containerRect = containerElement.getBoundingClientRect();
+        const containerWidth = containerRect.width;
+
+        const textElement = textRef.current;
+        const textRect = textElement.getBoundingClientRect();
+        const textWidth = textRect.width;
+
+        const percentage = (textWidth / containerWidth) * 100;
+        if (!rowWidthExceeds20Percent) {
+            setRowWidthExceeds20Percent(percentage > 20);
+        }
+    }, [info, date]);
+
     return (
         <tr className={clsx("ui-breakdown-item", colors[color], className)} {...rest}>
-            <td colSpan={2} className="text-left leading-none">
+            <td ref={containerRef} colSpan={2} className="text-left leading-none">
                 <span className="mr-0.5">{methodIcon}</span>
-                <span>{children}</span>
+                <span ref={textRef} className={clsx(!rowWidthExceeds20Percent && "whitespace-nowrap")}>
+                    {children}
+                </span>
                 <span className="ml-1 text-sm">
-                    {info && (
-                        <span className="mr-2 rounded bg-white p-1 uppercase text-black empty:hidden">{info}</span>
-                    )}
                     {secondary && <span className="empty:hidden">{secondary}</span>}
+                    {rowWidthExceeds20Percent && dateOrInfoExist ? (
+                        <p className="mt-1.5 mb-1 flex items-center">
+                            {info && (
+                                <span className="mr-2 rounded bg-white p-1 uppercase text-black empty:hidden">
+                                    {info}
+                                </span>
+                            )}
+
+                            {date && <span className="empty:hidden">{date}</span>}
+                        </p>
+                    ) : (
+                        <>
+                            {info && (
+                                <span className="mr-2 rounded bg-white p-1 uppercase text-black empty:hidden">
+                                    {info}
+                                </span>
+                            )}
+                            {date && <span className="empty:hidden">{date}</span>}
+                        </>
+                    )}
                 </span>
             </td>
 

diff --git a/src/stories/Other/Breakdown.stories.js b/src/stories/Other/Breakdown.stories.js
@@ -42,15 +42,15 @@ export const Default = () => {
                     </Button>
                 </Breakdown.SubtotalItem>
 
-                <Breakdown.Item value={1230} secondary="12/18/2019" info="*0259" methodIcon={<CardIcon />}>
+                <Breakdown.Item value={1230} date="12/18/2019" info="*0259" methodIcon={<CardIcon />}>
                     Payment
                 </Breakdown.Item>
 
-                <Breakdown.Item color="primary" secondary="07/23/2021" value={-62} methodIcon={<CardIcon />}>
+                <Breakdown.Item color="primary" info="*0259" date="07/23/2021" value={-62} methodIcon={<CardIcon />}>
                     Return Payment
                 </Breakdown.Item>
 
-                <Breakdown.Item secondary="07/23/2021" info={<EmptyComponent />} value={0} methodIcon={<CardIcon />}>
+                <Breakdown.Item date="07/23/2021" info={<EmptyComponent />} value={0} methodIcon={<CardIcon />}>
                     This is a really long message that should wrap somehow
                 </Breakdown.Item>