[table] fix: column resize calculation on header double click (#3732)

palantir · Jan 22, 2020 · f441310 · f441310 · blueprint-bot · Jan 22, 2020
1 parent a1fa406
commit f441310
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/packages/table/src/common/utils.ts b/packages/table/src/common/utils.ts
@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-const CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT = "bp-table-text-no-measure";
+// used to exclude icons from column header measure
+export const CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT = "bp-table-text-no-measure";
+// supposed width of the icons placeholder
+const EXCLUDED_ICON_PLACEHOLDER_WIDTH = 16;
 
 /**
  * Since Firefox doesn't provide a computed "font" property, we manually
@@ -350,23 +353,20 @@ export const Utils = {
  * exclude an element's text from the computation.
  */
 function measureTextContentWithExclusions(context: CanvasRenderingContext2D, element: Element): TextMetrics {
-    // We only expect one or zero excluded elements in this subtree
-    // We don't have a need for more than one, so we avoid that complexity altogether.
-    const elementToExclude = element.querySelector(`.${CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT}`);
-    let removedElementParent: Element | undefined;
-    let removedElementNextSibling: Node | undefined;
-
-    if (elementToExclude != null) {
-        removedElementParent = elementToExclude.parentElement;
-        removedElementNextSibling = elementToExclude.nextSibling;
-        removedElementParent.removeChild(elementToExclude);
+    const elementsToExclude = element.querySelectorAll(`.${CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT}`);
+    let excludedElementsWidth = 0;
+    if (elementsToExclude && elementsToExclude.length) {
+        elementsToExclude.forEach((e) => {
+            const excludedMetrics = context.measureText(e.textContent);
+            excludedElementsWidth += excludedMetrics.width - EXCLUDED_ICON_PLACEHOLDER_WIDTH;
+        });
     }
 
     const metrics = context.measureText(element.textContent);
+    const metricsWithExclusions = {
+        ...metrics,
+        width: metrics.width - excludedElementsWidth,
+    };
 
-    if (elementToExclude != null) {
-        removedElementParent.insertBefore(elementToExclude, removedElementNextSibling);
-    }
-
-    return metrics;
+    return metricsWithExclusions;
 }
diff --git a/packages/table/src/headers/columnHeaderCell.tsx b/packages/table/src/headers/columnHeaderCell.tsx
@@ -31,6 +31,7 @@ import {
 import * as Classes from "../common/classes";
 import { columnInteractionBarContextTypes, IColumnInteractionBarContextTypes } from "../common/context";
 import { LoadableContent } from "../common/loadableContent";
+import { CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT } from "../common/utils";
 import { HeaderCell, IHeaderCellProps } from "./headerCell";
 
 export interface IColumnNameProps {
@@ -196,7 +197,7 @@ export class ColumnHeaderCell extends AbstractPureComponent2<IColumnHeaderCellPr
             return undefined;
         }
 
-        const classes = classNames(Classes.TABLE_TH_MENU_CONTAINER, {
+        const classes = classNames(Classes.TABLE_TH_MENU_CONTAINER, CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT, {
             [Classes.TABLE_TH_MENU_OPEN]: this.state.isActive,
         });
 

diff --git a/packages/table/src/headers/header.tsx b/packages/table/src/headers/header.tsx
@@ -21,6 +21,7 @@ import * as React from "react";
 import { Grid } from "../common";
 import { IFocusedCellCoordinates } from "../common/cell";
 import * as Classes from "../common/classes";
+import { CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT } from "../common/utils";
 import { DragEvents } from "../interactions/dragEvents";
 import { IClientCoordinates, ICoordinateData } from "../interactions/draggable";
 import { DragReorderable, IReorderableProps } from "../interactions/reorderable";
@@ -384,7 +385,9 @@ export class Header extends React.Component<IInternalHeaderProps, IHeaderState>
             : this.wrapInDragReorderable(
                   index,
                   <div className={Classes.TABLE_REORDER_HANDLE_TARGET}>
-                      <div className={Classes.TABLE_REORDER_HANDLE}>
+                      <div
+                          className={classNames(Classes.TABLE_REORDER_HANDLE, CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT)}
+                      >
                           <Icon icon="drag-handle-vertical" />
                       </div>
                   </div>,