From 5e11477172d0c380838be6449741fd178fc43aba Mon Sep 17 00:00:00 2001
From: Kamran Asif <KamranAsif@users.noreply.github.com>
Date: Wed, 3 Aug 2016 16:52:15 -0400
Subject: [PATCH] Fixing column drag scroll with cell recycling (#40)

* Fixing column drag scroll with cell recycling

* Adding horizontal scroll callback

* CR
---
 examples/ReorderExample.js               | 1 +
 src/FixedDataTable.js                    | 5 +++++
 src/FixedDataTableCellDefault.js         | 3 ++-
 src/FixedDataTableCellGroup.js           | 3 ++-
 src/FixedDataTableColumnReorderHandle.js | 8 ++++++--
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/examples/ReorderExample.js b/examples/ReorderExample.js
index 91c41e22..88c89447 100644
--- a/examples/ReorderExample.js
+++ b/examples/ReorderExample.js
@@ -96,6 +96,7 @@ class ReorderExample extends React.Component {
         {...this.props}>
         {this.state.columnOrder.map(function (columnKey, i) {
           return <Column
+            allowCellsRecycling={true}
             columnKey={columnKey}
             key={i}
             isReorderable={true}
diff --git a/src/FixedDataTable.js b/src/FixedDataTable.js
index 1ffabeb4..5e9379e5 100644
--- a/src/FixedDataTable.js
+++ b/src/FixedDataTable.js
@@ -785,6 +785,11 @@ var FixedDataTable = React.createClass({
     this.props.onColumnReorderEndCallback({
       columnBefore, columnAfter, reorderColumn
     });
+
+    var onHorizontalScroll = this.props.onHorizontalScroll;
+    if (this.state.columnReorderingData.scrollStart !== this.state.scrollX && onHorizontalScroll) {
+      onHorizontalScroll(this.state.scrollX)
+    };
   },
 
   _areColumnSettingsIdentical(
diff --git a/src/FixedDataTableCellDefault.js b/src/FixedDataTableCellDefault.js
index 15085e99..a4765a24 100644
--- a/src/FixedDataTableCellDefault.js
+++ b/src/FixedDataTableCellDefault.js
@@ -64,7 +64,8 @@ var FixedDataTableCellDefault = React.createClass({
   },
 
   render() {
-    var {height, width, style, className, children, columnKey, ...props} = this.props;
+    //Remove some props like columnKey and rowIndex so we don't pass it into the div
+    var {height, width, style, className, children, columnKey, rowIndex, ...props} = this.props;
 
     var innerStyle = {
       height,
diff --git a/src/FixedDataTableCellGroup.js b/src/FixedDataTableCellGroup.js
index e40e02ae..63c034ff 100644
--- a/src/FixedDataTableCellGroup.js
+++ b/src/FixedDataTableCellGroup.js
@@ -78,7 +78,8 @@ var FixedDataTableCellGroupImpl = React.createClass({
     var currentPosition = 0;
     for (var i = 0, j = columns.length; i < j; i++) {
       var columnProps = columns[i].props;
-      if (!columnProps.allowCellsRecycling || (
+      var recycable = columnProps.allowCellsRecycling && !isColumnReordering;
+      if (!recycable || (
             currentPosition - props.left <= props.width &&
             currentPosition - props.left + columnProps.width >= 0)) {
         var key = 'cell_' + i;
diff --git a/src/FixedDataTableColumnReorderHandle.js b/src/FixedDataTableColumnReorderHandle.js
index 30d42f2a..1821fede 100644
--- a/src/FixedDataTableColumnReorderHandle.js
+++ b/src/FixedDataTableColumnReorderHandle.js
@@ -54,6 +54,8 @@ var FixedDataTableColumnReorderHandle = React.createClass({
 
   componentWillUnmount() {
     if (this._mouseMoveTracker) {
+      cancelAnimationFrame(this.frameId);
+      this.frameId = null;
       this._mouseMoveTracker.releaseMouseMoves();
       this._mouseMoveTracker = null;
     }
@@ -101,7 +103,7 @@ var FixedDataTableColumnReorderHandle = React.createClass({
 
     this._distance = 0;
     this._animating = true;
-    requestAnimationFrame(this._updateState);
+    this.frameId = requestAnimationFrame(this._updateState);
   },
 
   _onMove(/*number*/ deltaX) {
@@ -110,13 +112,15 @@ var FixedDataTableColumnReorderHandle = React.createClass({
 
   _onColumnReorderEnd() {
     this._animating = false;
+    cancelAnimationFrame(this.frameId);
+    this.frameId = null;
     this._mouseMoveTracker.releaseMouseMoves();
     this.props.onColumnReorderEnd();
   },
 
   _updateState() {
     if (this._animating) {
-      requestAnimationFrame(this._updateState)
+      this.frameId = requestAnimationFrame(this._updateState)
     }
     this.setState({
       dragDistance: this._distance