From 8dde54ac51638fac064061dd4d5c33653bc47a25 Mon Sep 17 00:00:00 2001
From: Li <qli202@cable.comcast.com>
Date: Wed, 5 Dec 2018 09:31:39 -0600
Subject: [PATCH 1/3] fix: draggable resizing col jumps to right

---
 packages/react-data-grid/src/HeaderCell.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-data-grid/src/HeaderCell.js b/packages/react-data-grid/src/HeaderCell.js
index 72a5985cd6..b4453d2beb 100644
--- a/packages/react-data-grid/src/HeaderCell.js
+++ b/packages/react-data-grid/src/HeaderCell.js
@@ -56,8 +56,10 @@ class HeaderCell extends React.Component {
   };
 
   getWidthFromMouseEvent = (e) => {
-    let right = e.pageX || (e.touches && e.touches[0] && e.touches[0].pageX) || (e.changedTouches && e.changedTouches[e.changedTouches.length - 1].pageX);
-    let left = ReactDOM.findDOMNode(this).getBoundingClientRect().left;
+    const right = e.pageX || (e.touches && e.touches[0] && e.touches[0].pageX) || (e.changedTouches && e.changedTouches[e.changedTouches.length - 1].pageX);
+    // if headerDom is a draggable div, the first element (which is the only element as well) is the actual column header div with the position info
+    const headerDom = ReactDOM.findDOMNode(this);
+    const left = headerDom.draggable ? headerDom.firstChild.getBoundingClientRect().left : headerDom.getBoundingClientRect().left;
     return right - left;
   };
 

From 418b18fdc68861a9fe1ee46a3cf8cc1cb021ead4 Mon Sep 17 00:00:00 2001
From: Li <qli202@cable.comcast.com>
Date: Wed, 5 Dec 2018 10:39:39 -0600
Subject: [PATCH 2/3] refactor: use ref instead of findDOMNode

---
 packages/react-data-grid/src/HeaderCell.js | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/react-data-grid/src/HeaderCell.js b/packages/react-data-grid/src/HeaderCell.js
index b4453d2beb..68a3a72531 100644
--- a/packages/react-data-grid/src/HeaderCell.js
+++ b/packages/react-data-grid/src/HeaderCell.js
@@ -33,6 +33,8 @@ class HeaderCell extends React.Component {
 
   state = {resizing: false};
 
+  headerCellRef = (node) => this.headerCell = node;
+
   onDragStart = (e) => {
     this.setState({resizing: true});
     // need to set dummy data for FF
@@ -57,9 +59,7 @@ class HeaderCell extends React.Component {
 
   getWidthFromMouseEvent = (e) => {
     const right = e.pageX || (e.touches && e.touches[0] && e.touches[0].pageX) || (e.changedTouches && e.changedTouches[e.changedTouches.length - 1].pageX);
-    // if headerDom is a draggable div, the first element (which is the only element as well) is the actual column header div with the position info
-    const headerDom = ReactDOM.findDOMNode(this);
-    const left = headerDom.draggable ? headerDom.firstChild.getBoundingClientRect().left : headerDom.getBoundingClientRect().left;
+    const left = this.headerCell ? this.headerCell.getBoundingClientRect().left : 0;
     return right - left;
   };
 
@@ -119,20 +119,18 @@ class HeaderCell extends React.Component {
       'react-grid-HeaderCell--resizing': this.state.resizing,
       'react-grid-HeaderCell--frozen': columnUtils.isFrozen(column)
     }, this.props.className, column.cellClass);
-    const cell = (
-      <div className={className} style={this.getStyle()}>
-        {this.getCell()}
-        {resizeHandle}
-      </div>
-    );
 
     if (rowType === HeaderRowType.HEADER && column.draggable) {
       const { draggableHeaderCell: DraggableHeaderCell } = this.props;
       return (
         <DraggableHeaderCell
           column={column}
-          onHeaderDrop={this.props.onHeaderDrop}>
-           {cell}
+          onHeaderDrop={this.props.onHeaderDrop}
+        >
+          <div ref={this.headerCellRef} className={className} style={this.getStyle()}>
+            {this.getCell()}
+            {resizeHandle}
+          </div>
         </DraggableHeaderCell>
       );
     }

From 0169879cc21c5c21be1c87215f40a5ee707f9e5e Mon Sep 17 00:00:00 2001
From: Li <qli202@cable.comcast.com>
Date: Wed, 5 Dec 2018 10:45:35 -0600
Subject: [PATCH 3/3] fix: accidentally removed cel

---
 packages/react-data-grid/src/HeaderCell.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react-data-grid/src/HeaderCell.js b/packages/react-data-grid/src/HeaderCell.js
index 68a3a72531..e5e212282f 100644
--- a/packages/react-data-grid/src/HeaderCell.js
+++ b/packages/react-data-grid/src/HeaderCell.js
@@ -119,6 +119,12 @@ class HeaderCell extends React.Component {
       'react-grid-HeaderCell--resizing': this.state.resizing,
       'react-grid-HeaderCell--frozen': columnUtils.isFrozen(column)
     }, this.props.className, column.cellClass);
+    const cell = (
+      <div ref={this.headerCellRef} className={className} style={this.getStyle()}>
+        {this.getCell()}
+        {resizeHandle}
+      </div>
+    );
 
     if (rowType === HeaderRowType.HEADER && column.draggable) {
       const { draggableHeaderCell: DraggableHeaderCell } = this.props;
@@ -127,10 +133,7 @@ class HeaderCell extends React.Component {
           column={column}
           onHeaderDrop={this.props.onHeaderDrop}
         >
-          <div ref={this.headerCellRef} className={className} style={this.getStyle()}>
-            {this.getCell()}
-            {resizeHandle}
-          </div>
+          {cell}
         </DraggableHeaderCell>
       );
     }