Fixing column drag scroll with cell recycling (#40)

* Fixing column drag scroll with cell recycling * Adding horizontal scroll callback * CR
schrodinger · Aug 3, 2016 · 5e11477 · 5e11477
1 parent 02dbb62
commit 5e11477
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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