From 6ee416b381146972adad94fdeceb687154acf761 Mon Sep 17 00:00:00 2001
From: Alex Culliere <alozhkin@mirantis.com>
Date: Fri, 12 Feb 2021 17:21:26 +0200
Subject: [PATCH] Make resizing fully-functional

Signed-off-by: Alex Culliere <alozhkin@mirantis.com>
---
 src/renderer/components/table/table-cell.tsx | 28 ++++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/table/table-cell.tsx b/src/renderer/components/table/table-cell.tsx
index a01da244da..f49403a5ee 100644
--- a/src/renderer/components/table/table-cell.tsx
+++ b/src/renderer/components/table/table-cell.tsx
@@ -27,15 +27,26 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
 }
 
 type ResizeHandlerState = {
-  mousePosX: number,
-  currentColumn?: HTMLDivElement;
-  nextColumn?: HTMLDivElement;
+  mousePosX?: number,
 };
 
-export class TableCell extends React.Component<TableCellProps> {
+/**
+ * Ergonomic rate for throttling mouse events
+ * when resizing, in miliseconds.
+ * Represents optimal balance between user-facing latency
+ * and rendering performance 
+ */
+const ERGONOMIC_THROTTLE_RATE = 10;
+
+export class TableCell extends React.Component<TableCellProps, ResizeHandlerState> {
   private resizeHandlerState?: ResizeHandlerState;
   private cellContainer: React.RefObject<HTMLDivElement> = React.createRef();
 
+  constructor(props: TableCellProps) {
+    super(props);
+    this.state = {};
+  }
+
   @autobind()
   onClick(evt: React.MouseEvent<HTMLDivElement>) {
     if (this.props.onClick) {
@@ -91,7 +102,7 @@ export class TableCell extends React.Component<TableCellProps> {
     document.removeEventListener("mouseup", this.mouseUpHandler.bind(this));
   }
 
-  mouseMoveHandler(event: MouseEvent) {
+  mouseMoveHandler = throttle((event: MouseEvent) => {
     if (!this.resizeHandlerState) {
       return;
     }
@@ -100,7 +111,8 @@ export class TableCell extends React.Component<TableCellProps> {
     const currentWidth = this.cellContainer.current.offsetWidth;
 
     this.props?._onResize(currentWidth + diffPosX);
-  }
+    this.resizeHandlerState.mousePosX = event.pageX;
+  }, ERGONOMIC_THROTTLE_RATE);
 
   mouseUpHandler() {
     this.removeMouseEventListeners();
@@ -116,14 +128,14 @@ export class TableCell extends React.Component<TableCellProps> {
     });
     const content = displayBooleans(displayBoolean, title || children);
     const cellStyle: React.CSSProperties = size !== undefined ?
-      { flexBasis: `${size}px` } :
+      { minWidth: `${size}px` } :
       {};
     const resizeHandlers: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> = {
       onMouseDown: event => {
-        this.addMouseEventListeners();
         this.resizeHandlerState = {
           mousePosX: event.pageX
         };
+        this.addMouseEventListeners();
       }
     };