Skip to content

Commit 5e91a2a

Browse files
sahrensFacebook Github Bot 5
authored andcommitted
Fix 95% of WindowedListView jumpiness
Summary: - Replace some fixes that were accidentally lost in local rebase that prevent jumpiness when incremental is disabled. - Require each row to have a key specified by the caller to prevent jumping because of accidental duplicates or unneeded/problematic row re-rendering because of legit re-ordering. Reviewed By: steveluscher Differential Revision: D3322006 fbshipit-source-id: 0019aab07cb1fe2b148a14b5818de53aa373eb50
1 parent 942b933 commit 5e91a2a

3 files changed

Lines changed: 114 additions & 94 deletions

File tree

Libraries/Experimental/IncrementalGroup.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
const Incremental = require('Incremental');
1515
const React = require('React');
1616

17+
const infoLog = require('infoLog');
18+
1719
let _groupCounter = -1;
1820
const DEBUG = false;
1921

@@ -31,12 +33,12 @@ import type {Props, Context} from 'Incremental';
3133
* See Incremental.js for more info.
3234
*/
3335
class IncrementalGroup extends React.Component {
34-
props: Props;
36+
props: Props & {disabled?: boolean};
3537
context: Context;
3638
_groupInc: string;
3739
componentWillMount() {
3840
this._groupInc = `g${++_groupCounter}-`;
39-
DEBUG && console.log(
41+
DEBUG && infoLog(
4042
'create IncrementalGroup with id ' + this.getGroupId()
4143
);
4244
}

Libraries/Experimental/ViewabilityHelper.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,20 @@
2020
const ViewabilityHelper = {
2121
computeViewableRows(
2222
viewablePercentThreshold: number,
23-
rowFrames: Array<Object>,
23+
rowFrames: {[key: string]: Object},
24+
data: Array<{rowKey: string, rowData: any}>,
2425
scrollOffsetY: number,
2526
viewportHeight: number
2627
): Array<number> {
27-
var viewableRows = [];
28-
var firstVisible = -1;
29-
for (var idx = 0; idx < rowFrames.length; idx++) {
30-
var frame = rowFrames[idx];
28+
const viewableRows = [];
29+
let firstVisible = -1;
30+
for (let idx = 0; idx < data.length; idx++) {
31+
const frame = rowFrames[data[idx].rowKey];
3132
if (!frame) {
3233
continue;
3334
}
34-
var top = frame.y - scrollOffsetY;
35-
var bottom = top + frame.height;
35+
const top = frame.y - scrollOffsetY;
36+
const bottom = top + frame.height;
3637
if ((top < viewportHeight) && (bottom > 0)) {
3738
firstVisible = idx;
3839
if (_isViewable(
@@ -67,7 +68,7 @@ function _getPercentOccupied(
6768
bottom: number,
6869
viewportHeight: number
6970
): number {
70-
var visibleHeight = Math.min(bottom, viewportHeight) - Math.max(top, 0);
71+
let visibleHeight = Math.min(bottom, viewportHeight) - Math.max(top, 0);
7172
visibleHeight = Math.max(0, visibleHeight);
7273
return Math.max(0, visibleHeight * 100 / viewportHeight);
7374
}

0 commit comments

Comments
 (0)