saving changes

Author: Kamran Asif

examples/ReorderExample.js

@@ -15,14 +15,23 @@
 var FakeObjectDataListStore = require('./helpers/FakeObjectDataListStore');
 var FixedDataTable = require('fixed-data-table');
 var React = require('react');
+var _ = require('lodash');
 
 const {Table, Column, Cell} = FixedDataTable;
 
-const TextCell = ({rowIndex, data, columnKey, ...props}) => (
-  <Cell {...props}>
-    {data.getObjectAt(rowIndex)[columnKey]}
-  </Cell>
-);
+class TextCell extends React.Component {
+  shouldComponentUpdate(newProps) {
+    return !_.isEqual(newProps, this.props);
+  }
+
+  render() {
+    return (
+      <Cell {...this.props}>
+        {this.props.data.getObjectAt(this.props.rowIndex)[this.props.columnKey]}
+      </Cell>
+    );
+  }
+};
 
 var columnTitles = {
   'firstName': 'First Name',
@@ -88,6 +97,7 @@ class ReorderExample extends React.Component {
           return <Column
             columnKey={columnKey}
             key={i}
+            isReorderable={true}
             header={<Cell>{columnTitles[columnKey]}</Cell>}
             cell={<TextCell data={dataList} />}
             fixed={i === 0}

src/FixedDataTableCell.react.js

@@ -182,12 +182,13 @@ var FixedDataTableCell = React.createClass({
     };
 
     if (DIR_SIGN === 1) {
-      style.left = props.left + this.state.displacement;
+      style.left = props.left;
     } else {
-      style.right = props.left + this.state.displacement;
+      style.right = props.left;
     }
 
     if (this.state.isReorderingThisColumn) {
+      style.transform = `translateX(${this.state.displacement}px) translateZ(0)`;
       style.zIndex = 1;
     }
 

src/FixedDataTableColumnReorderHandle.react.js

@@ -99,21 +99,31 @@ var FixedDataTableColumnReorderHandle = React.createClass({
         inColumnGroup: mouseLocationInRelationToColumnGroup
       }
     });
+
+    this._distance = 0;
+    this._animating = true;
+    requestAnimationFrame(this._updateState);
   },
 
   _onMove(/*number*/ deltaX) {
-    var distance = this.state.dragDistance + deltaX;
-    this.setState({
-      dragDistance: distance
-    });
-    this.props.onColumnReorderMove(distance);
+    this._distance = this.state.dragDistance + deltaX;
   },
 
   _onColumnReorderEnd() {
+    this._animating = false;
     this._mouseMoveTracker.releaseMouseMoves();
-
     this.props.onColumnReorderEnd();
   },
+
+  _updateState() {
+    if (this._animating) {
+      requestAnimationFrame(this._updateState)
+    } 
+    this.setState({
+      dragDistance: this._distance
+    });
+    this.props.onColumnReorderMove(this._distance);
+  }
 });
 
 module.exports = FixedDataTableColumnReorderHandle;