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

Libraries/Experimental/IncrementalGroup.js

@@ -14,6 +14,8 @@
 const Incremental = require('Incremental');
 const React = require('React');
 
+const infoLog = require('infoLog');
+
 let _groupCounter = -1;
 const DEBUG = false;
 
@@ -31,12 +33,12 @@ import type {Props, Context} from 'Incremental';
  * See Incremental.js for more info.
  */
 class IncrementalGroup extends React.Component {
-  props: Props;
+  props: Props & {disabled?: boolean};
   context: Context;
   _groupInc: string;
   componentWillMount() {
     this._groupInc = `g${++_groupCounter}-`;
-    DEBUG && console.log(
+    DEBUG && infoLog(
       'create IncrementalGroup with id ' + this.getGroupId()
     );
   }

Libraries/Experimental/ViewabilityHelper.js

@@ -20,19 +20,20 @@
 const ViewabilityHelper = {
   computeViewableRows(
     viewablePercentThreshold: number,
-    rowFrames: Array<Object>,
+    rowFrames: {[key: string]: Object},
+    data: Array<{rowKey: string, rowData: any}>,
     scrollOffsetY: number,
     viewportHeight: number
   ): Array<number> {
-    var viewableRows = [];
-    var firstVisible = -1;
-    for (var idx = 0; idx < rowFrames.length; idx++) {
-      var frame = rowFrames[idx];
+    const viewableRows = [];
+    let firstVisible = -1;
+    for (let idx = 0; idx < data.length; idx++) {
+      const frame = rowFrames[data[idx].rowKey];
       if (!frame) {
         continue;
       }
-      var top = frame.y - scrollOffsetY;
-      var bottom = top + frame.height;
+      const top = frame.y - scrollOffsetY;
+      const bottom = top + frame.height;
       if ((top < viewportHeight) && (bottom > 0)) {
         firstVisible = idx;
         if (_isViewable(
@@ -67,7 +68,7 @@ function _getPercentOccupied(
   bottom: number,
   viewportHeight: number
 ): number {
-  var visibleHeight = Math.min(bottom, viewportHeight) - Math.max(top, 0);
+  let visibleHeight = Math.min(bottom, viewportHeight) - Math.max(top, 0);
   visibleHeight = Math.max(0, visibleHeight);
   return Math.max(0, visibleHeight * 100 / viewportHeight);
 }