From 26bd8322472a3d2276f2a71a2d112ebf26cea4f4 Mon Sep 17 00:00:00 2001 From: Jordan Chong Date: Fri, 27 Apr 2018 10:51:01 -0700 Subject: [PATCH 1/4] Add toolbox --- lib/SortableItem/index.js | 36 ++++++++++++++++++++++++------------ lib/SortableList/index.js | 12 +++++++----- lib/demo/index.js | 2 +- src/SortableItem/index.js | 13 +++++++++++-- src/SortableList/index.js | 10 ++++++---- src/demo/index.js | 2 +- 6 files changed, 50 insertions(+), 25 deletions(-) diff --git a/lib/SortableItem/index.js b/lib/SortableItem/index.js index b481258..d1df29f 100644 --- 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 index cf3fae8..6c730d4 100644 --- a/lib/SortableList/index.js +++ b/lib/SortableList/index.js @@ -94,14 +94,15 @@ var SortableList = function (_React$PureComponent) { key: 'componentDidUpdate', value: function componentDidUpdate(prevProps) { if (prevProps.list.rows !== this.props.list.rows && !!this._list) { - this.recalculateRowHeights(); + this.cache.clearAll(); + this._list.wrappedInstance.recomputeRowHeights(); } } }, { 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 +135,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 index 0f54c06..ae0474e 100644 --- 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 index f05d192..167028a 100644 --- 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 ( ); } diff --git a/src/SortableList/index.js b/src/SortableList/index.js index 9a3044c..7ee3b94 100644 --- a/src/SortableList/index.js +++ b/src/SortableList/index.js @@ -40,13 +40,14 @@ class SortableList extends React.PureComponent { componentDidUpdate(prevProps) { if (prevProps.list.rows !== this.props.list.rows && !!this._list) { - this.recalculateRowHeights(); + this.cache.clearAll(); + this._list.wrappedInstance.recomputeRowHeights(); } } - recalculateRowHeights() { - this.cache.clearAll(); - this._list.wrappedInstance.recomputeRowHeights(); + recalculateRowHeights(index) { + this.cache.clear(index); + if (this._list) this._list.wrappedInstance.recomputeRowHeights(index + 1); } renderRow({ index, key, style, parent}) { @@ -73,6 +74,7 @@ class SortableList extends React.PureComponent { findItemIndex={this.props.findItemIndex} dndDisabled={this.props.dndDisabled} recalculateRowHeights={this.recalculateRowHeights} + rowIndex={index} /> ); diff --git a/src/demo/index.js b/src/demo/index.js index d6652bb..001f57e 100644 --- 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) { From 9429079a668e8639eea10828d79c1b4b2301b64f Mon Sep 17 00:00:00 2001 From: Jordan Chong Date: Fri, 27 Apr 2018 14:56:03 -0700 Subject: [PATCH 2/4] use deep equality check --- lib/SortableList/index.js | 8 ++++---- src/SortableList/index.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/SortableList/index.js b/lib/SortableList/index.js index 6c730d4..f52b033 100644 --- a/lib/SortableList/index.js +++ b/lib/SortableList/index.js @@ -93,10 +93,10 @@ var SortableList = function (_React$PureComponent) { }, { key: 'componentDidUpdate', value: function componentDidUpdate(prevProps) { - if (prevProps.list.rows !== this.props.list.rows && !!this._list) { - this.cache.clearAll(); - this._list.wrappedInstance.recomputeRowHeights(); - } + if (window._ && window._.isEqual(prevProps.list.rows, this.props.list.rows)) return; + + this.cache.clearAll(); + if (this._list) this._list.wrappedInstance.recomputeRowHeights(); } }, { key: 'recalculateRowHeights', diff --git a/src/SortableList/index.js b/src/SortableList/index.js index 7ee3b94..2d16e28 100644 --- a/src/SortableList/index.js +++ b/src/SortableList/index.js @@ -39,10 +39,10 @@ class SortableList extends React.PureComponent { } componentDidUpdate(prevProps) { - if (prevProps.list.rows !== this.props.list.rows && !!this._list) { - this.cache.clearAll(); - this._list.wrappedInstance.recomputeRowHeights(); - } + if (window._ && window._.isEqual(prevProps.list.rows, this.props.list.rows)) return; + + this.cache.clearAll(); + if (this._list) this._list.wrappedInstance.recomputeRowHeights(); } recalculateRowHeights(index) { From f4d53b048e2d1bb66070063afd57f67390d8316b Mon Sep 17 00:00:00 2001 From: Jordan Chong Date: Fri, 27 Apr 2018 16:06:33 -0700 Subject: [PATCH 3/4] only recalculate below changed row --- lib/SortableItem/index.js | 6 ++++++ lib/SortableList/index.js | 8 -------- src/SortableItem/index.js | 5 +++++ src/SortableList/index.js | 7 ------- 4 files changed, 11 insertions(+), 15 deletions(-) diff --git a/lib/SortableItem/index.js b/lib/SortableItem/index.js index d1df29f..1feada3 100644 --- a/lib/SortableItem/index.js +++ b/lib/SortableItem/index.js @@ -69,6 +69,12 @@ var SortableItem = function (_React$PureComponent) { captureDraggingState: true }); } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps) { + if (window._ && window._.isEqual(prevProps, this.props)) return; + this.recalculateRowHeights(); + } }, { key: 'recalculateRowHeights', value: function recalculateRowHeights() { diff --git a/lib/SortableList/index.js b/lib/SortableList/index.js index f52b033..8cb8758 100644 --- a/lib/SortableList/index.js +++ b/lib/SortableList/index.js @@ -90,14 +90,6 @@ var SortableList = function (_React$PureComponent) { captureDraggingState: true }); } - }, { - key: 'componentDidUpdate', - value: function componentDidUpdate(prevProps) { - if (window._ && window._.isEqual(prevProps.list.rows, this.props.list.rows)) return; - - this.cache.clearAll(); - if (this._list) this._list.wrappedInstance.recomputeRowHeights(); - } }, { key: 'recalculateRowHeights', value: function recalculateRowHeights(index) { diff --git a/src/SortableItem/index.js b/src/SortableItem/index.js index 167028a..4213b03 100644 --- a/src/SortableItem/index.js +++ b/src/SortableItem/index.js @@ -21,6 +21,11 @@ class SortableItem extends React.PureComponent { }); } + componentDidUpdate(prevProps) { + if (window._ && window._.isEqual(prevProps, this.props)) return; + this.recalculateRowHeights(); + } + recalculateRowHeights() { const { recalculateRowHeights, rowIndex} = this.props; recalculateRowHeights(rowIndex); diff --git a/src/SortableList/index.js b/src/SortableList/index.js index 2d16e28..d3637e1 100644 --- a/src/SortableList/index.js +++ b/src/SortableList/index.js @@ -38,13 +38,6 @@ class SortableList extends React.PureComponent { }); } - componentDidUpdate(prevProps) { - if (window._ && window._.isEqual(prevProps.list.rows, this.props.list.rows)) return; - - this.cache.clearAll(); - if (this._list) this._list.wrappedInstance.recomputeRowHeights(); - } - recalculateRowHeights(index) { this.cache.clear(index); if (this._list) this._list.wrappedInstance.recomputeRowHeights(index + 1); From 2b1cca2fc30ddd77641712342d45032c9ce5eee6 Mon Sep 17 00:00:00 2001 From: Jordan Chong Date: Fri, 27 Apr 2018 16:35:42 -0700 Subject: [PATCH 4/4] try stuff --- lib/SortableItem/index.js | 6 ------ lib/SortableList/index.js | 21 +++++++++++++++++++++ src/SortableItem/index.js | 5 ----- src/SortableList/index.js | 19 +++++++++++++++++++ 4 files changed, 40 insertions(+), 11 deletions(-) diff --git a/lib/SortableItem/index.js b/lib/SortableItem/index.js index 1feada3..d1df29f 100644 --- a/lib/SortableItem/index.js +++ b/lib/SortableItem/index.js @@ -69,12 +69,6 @@ var SortableItem = function (_React$PureComponent) { captureDraggingState: true }); } - }, { - key: 'componentDidUpdate', - value: function componentDidUpdate(prevProps) { - if (window._ && window._.isEqual(prevProps, this.props)) return; - this.recalculateRowHeights(); - } }, { key: 'recalculateRowHeights', value: function recalculateRowHeights() { diff --git a/lib/SortableList/index.js b/lib/SortableList/index.js index 8cb8758..a95dfb5 100644 --- a/lib/SortableList/index.js +++ b/lib/SortableList/index.js @@ -90,6 +90,27 @@ var SortableList = function (_React$PureComponent) { captureDraggingState: true }); } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps) { + 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(index) { diff --git a/src/SortableItem/index.js b/src/SortableItem/index.js index 4213b03..167028a 100644 --- a/src/SortableItem/index.js +++ b/src/SortableItem/index.js @@ -21,11 +21,6 @@ class SortableItem extends React.PureComponent { }); } - componentDidUpdate(prevProps) { - if (window._ && window._.isEqual(prevProps, this.props)) return; - this.recalculateRowHeights(); - } - recalculateRowHeights() { const { recalculateRowHeights, rowIndex} = this.props; recalculateRowHeights(rowIndex); diff --git a/src/SortableList/index.js b/src/SortableList/index.js index d3637e1..f0d6e88 100644 --- a/src/SortableList/index.js +++ b/src/SortableList/index.js @@ -38,6 +38,25 @@ class SortableList extends React.PureComponent { }); } + componentDidUpdate(prevProps) { + 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); + } + } + + 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);