support children

client/src/components/util/truncate.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, cloneElement } from "react";
 import { Tooltip, Position } from "@blueprintjs/core";
 import pixelWidth from "string-pixel-width";
 
@@ -53,27 +53,44 @@ export default class Truncate extends Component {
 
   render() {
     const { children, size, fontSize } = this.props;
-    const originalString = children[0].text;
+    // Truncate only support a single child with a text child
-    const truncatedString = this.maybeTruncateString(
+
-      originalString,
+    if (
-      size,
+      React.Children.count(children) === 1 &&
-      fontSize
+      React.Children.count(children.props?.children) === 1
-    );
+    ) {
-    children[0].text = truncatedString;
+      const originalString = children.props.children;
-    return (
+      const truncatedString = this.maybeTruncateString(
-      <Tooltip
+        originalString,
-        content={originalString}
+        size,
-        disabled={truncatedString === null}
+        fontSize
-        hoverOpenDelay={tooltipHoverOpenDelayQuick}
+      );
-        position={Position.LEFT}
+      // Only make tooltip if string has to be truncated
-        usePortal
+      if (truncatedString) {
-        modifiers={{
+        // clone children, changing the children(text) to the truncated string
-          preventOverflow: { enabled: false },
+        const newChildren = React.Children.map(children, (child) =>
-          hide: { enabled: false },
+          cloneElement(child, {
-        }}
+            children: truncatedString,
-      >
+            "data-truncated": true,
-        {children}
+          })
-      </Tooltip>
+        );
-    );
+        return (
+          <Tooltip
+            content={originalString}
+            hoverOpenDelay={tooltipHoverOpenDelayQuick}
+            position={Position.LEFT}
+            usePortal
+            modifiers={{
+              preventOverflow: { enabled: false },
+              hide: { enabled: false },
+            }}
+          >
+            {newChildren}
+          </Tooltip>
+        );
+      }
+      return children;
+    }
+    throw Error("Only pass a single child with inner text to Truncate");
   }
 }