Merge pull request #4 from redbooth/toolbox

Fix jumpy behavior when paired with self expanding decorated tasks
redbooth · Apr 30, 2018 · c326987 · c326987
2 parents 995d421 + 2b1cca2
commit c326987
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 27 deletions.
diff --git a/lib/SortableItem/index.js b/lib/SortableItem/index.js
@@ -53,9 +53,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var SortableItem = function (_React$PureComponent) {
   (0, _inherits3.default)(SortableItem, _React$PureComponent);
 
-  function SortableItem() {
+  function SortableItem(props) {
     (0, _classCallCheck3.default)(this, SortableItem);
-    return (0, _possibleConstructorReturn3.default)(this, (SortableItem.__proto__ || (0, _getPrototypeOf2.default)(SortableItem)).apply(this, arguments));
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (SortableItem.__proto__ || (0, _getPrototypeOf2.default)(SortableItem)).call(this, props));
+
+    _this.recalculateRowHeights = _this.recalculateRowHeights.bind(_this);
+    return _this;
   }
 
   (0, _createClass3.default)(SortableItem, [{
@@ -65,18 +69,26 @@ var SortableItem = function (_React$PureComponent) {
         captureDraggingState: true
       });
     }
+  }, {
+    key: 'recalculateRowHeights',
+    value: function recalculateRowHeights() {
+      var _props = this.props,
+          recalculateRowHeights = _props.recalculateRowHeights,
+          rowIndex = _props.rowIndex;
+
+      recalculateRowHeights(rowIndex);
+    }
   }, {
     key: 'render',
     value: function render() {
-      var _props = this.props,
-          row = _props.row,
-          rowId = _props.rowId,
-          listId = _props.listId,
-          DecoratedItem = _props.itemComponent,
-          isDragging = _props.isDragging,
-          connectDragSource = _props.connectDragSource,
-          connectDropTarget = _props.connectDropTarget,
-          recalculateRowHeights = _props.recalculateRowHeights;
+      var _props2 = this.props,
+          row = _props2.row,
+          rowId = _props2.rowId,
+          listId = _props2.listId,
+          DecoratedItem = _props2.itemComponent,
+          isDragging = _props2.isDragging,
+          connectDragSource = _props2.connectDragSource,
+          connectDropTarget = _props2.connectDropTarget;
 
       return _react2.default.createElement(DecoratedItem, {
         row: row,
@@ -86,7 +98,7 @@ var SortableItem = function (_React$PureComponent) {
         isDragging: isDragging,
         connectDragSource: connectDragSource,
         connectDropTarget: connectDropTarget,
-        recalculateRowHeights: recalculateRowHeights
+        recalculateRowHeights: this.recalculateRowHeights
       });
     }
   }]);

diff --git a/lib/SortableList/index.js b/lib/SortableList/index.js
@@ -93,15 +93,29 @@ var SortableList = function (_React$PureComponent) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate(prevProps) {
-      if (prevProps.list.rows !== this.props.list.rows && !!this._list) {
-        this.recalculateRowHeights();
+      var rowIndex = this.findHighestUpdatedRow(this.props.list.rows, prevProps.list.rows);
+      if (rowIndex !== null) {
+        this.cache.clearAll();
+        if (this._list) this._list.wrappedInstance.recomputeRowHeights(rowIndex + 1);
       }
     }
+  }, {
+    key: 'findHighestUpdatedRow',
+    value: function findHighestUpdatedRow(rows, prevRows) {
+      if (!window._) return null;
+      for (var i = 0; i < rows.length; i++) {
+        if (!window._.isEqual(rows[i], prevRows[i])) {
+          return i;
+        }
+      }
+
+      return null;
+    }
   }, {
     key: 'recalculateRowHeights',
-    value: function recalculateRowHeights() {
-      this.cache.clearAll();
-      this._list.wrappedInstance.recomputeRowHeights();
+    value: function recalculateRowHeights(index) {
+      this.cache.clear(index);
+      if (this._list) this._list.wrappedInstance.recomputeRowHeights(index + 1);
     }
   }, {
     key: 'renderRow',
@@ -134,7 +148,8 @@ var SortableList = function (_React$PureComponent) {
           dragEndRow: this.props.dragEndRow,
           findItemIndex: this.props.findItemIndex,
           dndDisabled: this.props.dndDisabled,
-          recalculateRowHeights: this.recalculateRowHeights
+          recalculateRowHeights: this.recalculateRowHeights,
+          rowIndex: index
         })
       );
     }

diff --git a/lib/demo/index.js b/lib/demo/index.js
@@ -31,7 +31,7 @@ window.Perf = _reactAddonsPerf2.default;
 function getLists() {
   var lists = window.localStorage.getItem('lists');
 
-  return JSON.parse(lists) || (0, _generateLists.generateLists)(100, 10);
+  return JSON.parse(lists) || (0, _generateLists.generateLists)(100, 300);
 }
 
 function setLists(lists) {

diff --git a/src/SortableItem/index.js b/src/SortableItem/index.js
@@ -10,12 +10,22 @@ import * as propTypes from './propTypes';
 class SortableItem extends React.PureComponent {
   static propTypes = propTypes;
 
+  constructor(props) {
+    super(props);
+    this.recalculateRowHeights = this.recalculateRowHeights.bind(this);
+  }
+
   componentDidMount() {
     this.props.connectDragPreview(getEmptyImage(), {
       captureDraggingState: true
     });
   }
 
+  recalculateRowHeights() {
+    const { recalculateRowHeights, rowIndex} = this.props;
+    recalculateRowHeights(rowIndex);
+  }
+
   render() {
     const {
       row,
@@ -25,7 +35,6 @@ class SortableItem extends React.PureComponent {
       isDragging,
       connectDragSource,
       connectDropTarget,
-      recalculateRowHeights,
     } = this.props;
     return (
       <DecoratedItem
@@ -36,7 +45,7 @@ class SortableItem extends React.PureComponent {
         isDragging={isDragging}
         connectDragSource={connectDragSource}
         connectDropTarget={connectDropTarget}
-        recalculateRowHeights={recalculateRowHeights}
+        recalculateRowHeights={this.recalculateRowHeights}
       />
     );
   }

diff --git a/src/SortableList/index.js b/src/SortableList/index.js
@@ -39,14 +39,27 @@ class SortableList extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.list.rows !== this.props.list.rows && !!this._list) {
-      this.recalculateRowHeights();
+    const rowIndex = this.findHighestUpdatedRow(this.props.list.rows, prevProps.list.rows);
+    if (rowIndex !== null) {
+      this.cache.clearAll();
+      if (this._list) this._list.wrappedInstance.recomputeRowHeights(rowIndex + 1);
     }
   }
 
-  recalculateRowHeights() {
-    this.cache.clearAll();
-    this._list.wrappedInstance.recomputeRowHeights();
+  findHighestUpdatedRow(rows, prevRows) {
+    if (!window._) return null;
+    for (let i = 0; i < rows.length; i++) {
+      if (!window._.isEqual(rows[i], prevRows[i])) {
+        return i;
+      }
+    }
+
+    return null;
+  }
+
+  recalculateRowHeights(index) {
+    this.cache.clear(index);
+    if (this._list) this._list.wrappedInstance.recomputeRowHeights(index + 1);
   }
 
   renderRow({ index, key, style, parent}) {
@@ -73,6 +86,7 @@ class SortableList extends React.PureComponent {
           findItemIndex={this.props.findItemIndex}
           dndDisabled={this.props.dndDisabled}
           recalculateRowHeights={this.recalculateRowHeights}
+          rowIndex={index}
         />
       </CellMeasurer>
     );

diff --git a/src/demo/index.js b/src/demo/index.js
@@ -13,7 +13,7 @@ window.Perf = Perf;
 function getLists() {
   const lists = window.localStorage.getItem('lists');
 
-  return JSON.parse(lists) || generateLists(100, 10);
+  return JSON.parse(lists) || generateLists(100, 300);
 }
 
 function setLists(lists) {