Create Truncation Component (#1500)

* remove ESLint rules operator-linebreak is no different then default quotes is overwriting prettier config * add string-pixel-width dep * don't lint-staged src, only staged * add widthMap * create Truncate component * refactor in truncate component * add font load checking * remove font-family styling * render Truncate's child instead of creating own component to render * refactor to use Truncate component * add span back * support children * remove maybeTruncateString * sub in Truncate component * add bold prop * accurately compute largest possible string * remove logs * tweak truncation method * memoize comp function * explain disable * fix bugs w/ abs/floor * tweak widths * tweak widths * fix font size * remove border * move test-id * attempt css solution * Revert "attempt css solution" This reverts commit aac4d8a6f6. * CSS solution v2 * remove string-pixel-width * remove widthsMap * remove dead code * remove "data-truncated" as it is always true * tweak label width * fix e2e tests * remove testing string * e2e annotations tweaks * correct snapshot * remove resolves * check for labels * add test-id * format fix * update snapshot * fix color * pull constants out where available
2026-10-02 03:18:12 +08:00 · 2020-06-05 10:14:42 -07:00
parent 99d004d1f0
commit 4e96847032
13 changed files with 215 additions and 142 deletions
@@ -0,0 +1,85 @@
+import React, { cloneElement } from "react";
+import { Tooltip, Position } from "@blueprintjs/core";
+
+import { tooltipHoverOpenDelayQuick } from "../../globals";
+
+const SPLIT_STYLE = {
+  display: "flex",
+  overflow: "hidden",
+  justifyContent: "flex-start",
+};
+
+const FIRST_HALF_STYLE = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  flexShrink: 1,
+  minWidth: "5px",
+};
+
+const SECOND_HALF_INNER_STYLE = {
+  position: "absolute",
+  right: 0,
+};
+const SECOND_HALF_STYLE = {
+  color: "transparent",
+  position: "relative",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+};
+
+export default (props) => {
+  const { children } = props;
+  // Truncate only support a single child with a text child
+
+  if (
+    React.Children.count(children) !== 1 ||
+    React.Children.count(children.props?.children) !== 1
+  ) {
+    throw Error("Only pass a single child with text to Truncate");
+  }
+  const originalString = children.props.children;
+
+  const firstString = originalString.substr(0, originalString.length / 2);
+  const secondString = originalString.substr(originalString.length / 2);
+
+  const inheritedColor = children.props.style.color;
+
+  const splitStyle = { ...children.props.style, ...SPLIT_STYLE };
+  const secondHalfInnerStyle = {
+    ...SECOND_HALF_INNER_STYLE,
+    color: inheritedColor || "initial",
+  };
+
+  const truncatedJSX = (
+    <span style={splitStyle}>
+      <span style={FIRST_HALF_STYLE}>{firstString}</span>
+      <span style={SECOND_HALF_STYLE}>
+        {secondString}
+        <span style={secondHalfInnerStyle}>{secondString}</span>
+      </span>
+    </span>
+  );
+
+  // clone children, changing the children(text) to the truncated string
+  const newChildren = React.Children.map(children, (child) =>
+    cloneElement(child, {
+      children: truncatedJSX,
+      "aria-label": originalString,
+    })
+  );
+  return (
+    <Tooltip
+      content={originalString}
+      hoverOpenDelay={tooltipHoverOpenDelayQuick}
+      position={Position.LEFT}
+      usePortal
+      modifiers={{
+        preventOverflow: { enabled: false },
+        hide: { enabled: false },
+      }}
+    >
+      {newChildren}
+    </Tooltip>
+  );
+};