@office-iss/react-native-win32 0.71.5 → 0.72.0-preview.2

package/Libraries/Lists/FillRateHelper.js

@@ -10,244 +10,10 @@
 
 'use strict';
 
-import type {FrameMetricProps} from './VirtualizedListProps';
+import {typeof FillRateHelper as FillRateHelperType} from '@react-native/virtualized-lists';
 
-export type FillRateInfo = Info;
-
-class Info {
-  any_blank_count: number = 0;
-  any_blank_ms: number = 0;
-  any_blank_speed_sum: number = 0;
-  mostly_blank_count: number = 0;
-  mostly_blank_ms: number = 0;
-  pixels_blank: number = 0;
-  pixels_sampled: number = 0;
-  pixels_scrolled: number = 0;
-  total_time_spent: number = 0;
-  sample_count: number = 0;
-}
-
-type FrameMetrics = {
-  inLayout?: boolean,
-  length: number,
-  offset: number,
-  ...
-};
-
-const DEBUG = false;
-
-let _listeners: Array<(Info) => void> = [];
-let _minSampleCount = 10;
-let _sampleRate = DEBUG ? 1 : null;
-
-/**
- * A helper class for detecting when the maximem fill rate of `VirtualizedList` is exceeded.
- * By default the sampling rate is set to zero and this will do nothing. If you want to collect
- * samples (e.g. to log them), make sure to call `FillRateHelper.setSampleRate(0.0-1.0)`.
- *
- * Listeners and sample rate are global for all `VirtualizedList`s - typical usage will combine with
- * `SceneTracker.getActiveScene` to determine the context of the events.
- */
-class FillRateHelper {
-  _anyBlankStartTime: ?number = null;
-  _enabled = false;
-  _getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics;
-  _info: Info = new Info();
-  _mostlyBlankStartTime: ?number = null;
-  _samplesStartTime: ?number = null;
-
-  static addListener(callback: FillRateInfo => void): {
-    remove: () => void,
-    ...
-  } {
-    if (_sampleRate === null) {
-      console.warn('Call `FillRateHelper.setSampleRate` before `addListener`.');
-    }
-    _listeners.push(callback);
-    return {
-      remove: () => {
-        _listeners = _listeners.filter(listener => callback !== listener);
-      },
-    };
-  }
-
-  static setSampleRate(sampleRate: number) {
-    _sampleRate = sampleRate;
-  }
-
-  static setMinSampleCount(minSampleCount: number) {
-    _minSampleCount = minSampleCount;
-  }
-
-  constructor(
-    getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics,
-  ) {
-    this._getFrameMetrics = getFrameMetrics;
-    this._enabled = (_sampleRate || 0) > Math.random();
-    this._resetData();
-  }
-
-  activate() {
-    if (this._enabled && this._samplesStartTime == null) {
-      DEBUG && console.debug('FillRateHelper: activate');
-      this._samplesStartTime = global.performance.now();
-    }
-  }
-
-  deactivateAndFlush() {
-    if (!this._enabled) {
-      return;
-    }
-    const start = this._samplesStartTime; // const for flow
-    if (start == null) {
-      DEBUG &&
-        console.debug('FillRateHelper: bail on deactivate with no start time');
-      return;
-    }
-    if (this._info.sample_count < _minSampleCount) {
-      // Don't bother with under-sampled events.
-      this._resetData();
-      return;
-    }
-    const total_time_spent = global.performance.now() - start;
-    const info: any = {
-      ...this._info,
-      total_time_spent,
-    };
-    if (DEBUG) {
-      const derived = {
-        avg_blankness: this._info.pixels_blank / this._info.pixels_sampled,
-        avg_speed: this._info.pixels_scrolled / (total_time_spent / 1000),
-        avg_speed_when_any_blank:
-          this._info.any_blank_speed_sum / this._info.any_blank_count,
-        any_blank_per_min:
-          this._info.any_blank_count / (total_time_spent / 1000 / 60),
-        any_blank_time_frac: this._info.any_blank_ms / total_time_spent,
-        mostly_blank_per_min:
-          this._info.mostly_blank_count / (total_time_spent / 1000 / 60),
-        mostly_blank_time_frac: this._info.mostly_blank_ms / total_time_spent,
-      };
-      for (const key in derived) {
-        // $FlowFixMe[prop-missing]
-        derived[key] = Math.round(1000 * derived[key]) / 1000;
-      }
-      console.debug('FillRateHelper deactivateAndFlush: ', {derived, info});
-    }
-    _listeners.forEach(listener => listener(info));
-    this._resetData();
-  }
-
-  computeBlankness(
-    props: {
-      ...FrameMetricProps,
-      initialNumToRender?: ?number,
-      ...
-    },
-    cellsAroundViewport: {
-      first: number,
-      last: number,
-      ...
-    },
-    scrollMetrics: {
-      dOffset: number,
-      offset: number,
-      velocity: number,
-      visibleLength: number,
-      ...
-    },
-  ): number {
-    if (
-      !this._enabled ||
-      props.getItemCount(props.data) === 0 ||
-      cellsAroundViewport.last < cellsAroundViewport.first ||
-      this._samplesStartTime == null
-    ) {
-      return 0;
-    }
-    const {dOffset, offset, velocity, visibleLength} = scrollMetrics;
-
-    // Denominator metrics that we track for all events - most of the time there is no blankness and
-    // we want to capture that.
-    this._info.sample_count++;
-    this._info.pixels_sampled += Math.round(visibleLength);
-    this._info.pixels_scrolled += Math.round(Math.abs(dOffset));
-    const scrollSpeed = Math.round(Math.abs(velocity) * 1000); // px / sec
-
-    // Whether blank now or not, record the elapsed time blank if we were blank last time.
-    const now = global.performance.now();
-    if (this._anyBlankStartTime != null) {
-      this._info.any_blank_ms += now - this._anyBlankStartTime;
-    }
-    this._anyBlankStartTime = null;
-    if (this._mostlyBlankStartTime != null) {
-      this._info.mostly_blank_ms += now - this._mostlyBlankStartTime;
-    }
-    this._mostlyBlankStartTime = null;
-
-    let blankTop = 0;
-    let first = cellsAroundViewport.first;
-    let firstFrame = this._getFrameMetrics(first, props);
-    while (
-      first <= cellsAroundViewport.last &&
-      (!firstFrame || !firstFrame.inLayout)
-    ) {
-      firstFrame = this._getFrameMetrics(first, props);
-      first++;
-    }
-    // Only count blankTop if we aren't rendering the first item, otherwise we will count the header
-    // as blank.
-    if (firstFrame && first > 0) {
-      blankTop = Math.min(
-        visibleLength,
-        Math.max(0, firstFrame.offset - offset),
-      );
-    }
-    let blankBottom = 0;
-    let last = cellsAroundViewport.last;
-    let lastFrame = this._getFrameMetrics(last, props);
-    while (
-      last >= cellsAroundViewport.first &&
-      (!lastFrame || !lastFrame.inLayout)
-    ) {
-      lastFrame = this._getFrameMetrics(last, props);
-      last--;
-    }
-    // Only count blankBottom if we aren't rendering the last item, otherwise we will count the
-    // footer as blank.
-    if (lastFrame && last < props.getItemCount(props.data) - 1) {
-      const bottomEdge = lastFrame.offset + lastFrame.length;
-      blankBottom = Math.min(
-        visibleLength,
-        Math.max(0, offset + visibleLength - bottomEdge),
-      );
-    }
-    const pixels_blank = Math.round(blankTop + blankBottom);
-    const blankness = pixels_blank / visibleLength;
-    if (blankness > 0) {
-      this._anyBlankStartTime = now;
-      this._info.any_blank_speed_sum += scrollSpeed;
-      this._info.any_blank_count++;
-      this._info.pixels_blank += pixels_blank;
-      if (blankness > 0.5) {
-        this._mostlyBlankStartTime = now;
-        this._info.mostly_blank_count++;
-      }
-    } else if (scrollSpeed < 0.01 || Math.abs(dOffset) < 1) {
-      this.deactivateAndFlush();
-    }
-    return blankness;
-  }
-
-  enabled(): boolean {
-    return this._enabled;
-  }
-
-  _resetData() {
-    this._anyBlankStartTime = null;
-    this._info = new Info();
-    this._mostlyBlankStartTime = null;
-    this._samplesStartTime = null;
-  }
-}
+const FillRateHelper: FillRateHelperType =
+  require('@react-native/virtualized-lists').FillRateHelper;
 
+export type {FillRateInfo} from '@react-native/virtualized-lists';
 module.exports = FillRateHelper;

package/Libraries/Lists/FlatList.d.ts

@@ -12,7 +12,7 @@ import type {
   ListRenderItem,
   ViewToken,
   VirtualizedListProps,
-} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
 import type {StyleProp} from '../StyleSheet/StyleSheet';
 import type {ViewStyle} from '../StyleSheet/StyleSheetTypes';
@@ -41,7 +41,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
 
   /**
    * An array (or array-like list) of items to render. Other data types can be
-   * used by targetting VirtualizedList directly.
+   * used by targeting VirtualizedList directly.
    */
   data: ArrayLike<ItemT> | null | undefined;
 
@@ -50,7 +50,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    * If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop,
    * stick it here and treat it immutably.
    */
-  extraData?: any;
+  extraData?: any | undefined;
 
   /**
    * `getItemLayout` is an optional optimization that lets us skip measurement of dynamic
@@ -66,7 +66,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    */
   getItemLayout?:
     | ((
-        data: Array<ItemT> | null | undefined,
+        data: ArrayLike<ItemT> | null | undefined,
         index: number,
       ) => {length: number; offset: number; index: number})
     | undefined;
@@ -104,19 +104,6 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    */
   numColumns?: number | undefined;
 
-  /**
-   * Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
-   */
-  onEndReached?: ((info: {distanceFromEnd: number}) => void) | null | undefined;
-
-  /**
-   * How far from the end (in units of visible length of the list) the bottom edge of the
-   * list must be from the end of the content to trigger the `onEndReached` callback.
-   * Thus a value of 0.5 will trigger `onEndReached` when the end of the content is
-   * within half the visible length of the list.
-   */
-  onEndReachedThreshold?: number | null | undefined;
-
   /**
    * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
    * Make sure to also set the refreshing prop correctly.
@@ -145,7 +132,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    * _renderItem = ({item}) => (
    *   <TouchableOpacity onPress={() => this._onPress(item)}>
    *     <Text>{item.title}</Text>
-   *   <TouchableOpacity/>
+   *   </TouchableOpacity>
    * );
    * ...
    * <FlatList data={[{title: 'Title Text', key: 'item1'}]} renderItem={this._renderItem} />
@@ -157,7 +144,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   /**
    * See `ViewabilityHelper` for flow type and further documentation.
    */
-  viewabilityConfig?: any;
+  viewabilityConfig?: any | undefined;
 
   /**
    * Note: may have bugs (missing content) in some circumstances - use at your own risk.
@@ -179,9 +166,10 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   fadingEdgeLength?: number | undefined;
 }
 
-export class FlatList<ItemT = any> extends React.Component<
-  FlatListProps<ItemT>
-> {
+export abstract class FlatListComponent<
+  ItemT,
+  Props,
+> extends React.Component<Props> {
   /**
    * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
    */
@@ -249,3 +237,8 @@ export class FlatList<ItemT = any> extends React.Component<
   // TODO: use `unknown` instead of `any` for Typescript >= 3.0
   setNativeProps: (props: {[key: string]: any}) => void;
 }
+
+export class FlatList<ItemT = any> extends FlatListComponent<
+  ItemT,
+  FlatListProps<ItemT>
+> {}

package/Libraries/Lists/FlatList.js

@@ -11,14 +11,17 @@
 import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
+  RenderItemProps,
+  RenderItemType,
   ViewabilityConfigCallbackPair,
   ViewToken,
-} from './ViewabilityHelper';
-import type {RenderItemProps, RenderItemType} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 
 import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
-import VirtualizedList from './VirtualizedList';
-import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
+import {
+  VirtualizedList,
+  keyExtractor as defaultKeyExtractor,
+} from '@react-native/virtualized-lists';
 import memoizeOne from 'memoize-one';
 
 const View = require('../Components/View/View');
@@ -31,7 +34,7 @@ const React = require('react');
 type RequiredProps<ItemT> = {|
   /**
    * An array (or array-like list) of items to render. Other data types can be
-   * used by targetting VirtualizedList directly.
+   * used by targeting VirtualizedList directly.
    */
   data: ?$ArrayLike<ItemT>,
 |};
@@ -88,7 +91,7 @@ type OptionalProps<ItemT> = {|
    * specify `ItemSeparatorComponent`.
    */
   getItemLayout?: (
-    data: ?Array<ItemT>,
+    data: ?$ArrayLike<ItemT>,
     index: number,
   ) => {
     length: number,

package/Libraries/Lists/SectionList.d.ts

@@ -11,7 +11,7 @@ import type * as React from 'react';
 import type {
   ListRenderItemInfo,
   VirtualizedListWithoutRenderItemProps,
-} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 import type {
   ScrollView,
   ScrollViewProps,
@@ -75,7 +75,7 @@ export interface SectionListProps<ItemT, SectionT = DefaultSectionT>
    * If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop,
    * stick it here and treat it immutably.
    */
-  extraData?: any;
+  extraData?: any | undefined;
 
   /**
    * `getItemLayout` is an optional optimization that lets us skip measurement of dynamic
@@ -210,10 +210,9 @@ export interface SectionListScrollParams {
   viewPosition?: number | undefined;
 }
 
-export class SectionList<
-  ItemT = any,
-  SectionT = DefaultSectionT,
-> extends React.Component<SectionListProps<ItemT, SectionT>> {
+export abstract class SectionListComponent<
+  Props,
+> extends React.Component<Props> {
   /**
    * Scrolls to the item at the specified sectionIndex and itemIndex (within the section)
    * positioned in the viewable area such that viewPosition 0 places it at the top
@@ -246,6 +245,11 @@ export class SectionList<
   getScrollableNode(): NodeHandle | undefined;
 }
 
+export class SectionList<
+  ItemT = any,
+  SectionT = DefaultSectionT,
+> extends SectionListComponent<SectionListProps<ItemT, SectionT>> {}
+
 /* This definition is deprecated because it extends the wrong base type */
 export interface SectionListStatic<ItemT, SectionT = DefaultSectionT>
   extends React.ComponentClass<SectionListProps<ItemT, SectionT>> {

package/Libraries/Lists/SectionList.js

@@ -12,13 +12,13 @@
 
 import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {
-  Props as VirtualizedSectionListProps,
   ScrollToLocationParamsType,
   SectionBase as _SectionBase,
-} from './VirtualizedSectionList';
+  VirtualizedSectionListProps,
+} from '@react-native/virtualized-lists';
 
 import Platform from '../Utilities/Platform';
-import VirtualizedSectionList from './VirtualizedSectionList';
+import {VirtualizedSectionList} from '@react-native/virtualized-lists';
 import * as React from 'react';
 
 type Item = any;
@@ -248,7 +248,9 @@ export default class SectionList<
         {...restProps}
         stickySectionHeadersEnabled={stickySectionHeadersEnabled}
         ref={this._captureRef}
+        // $FlowFixMe[missing-local-annot]
         getItemCount={items => items.length}
+        // $FlowFixMe[missing-local-annot]
         getItem={(items, index) => items[index]}
       />
     );

package/Libraries/Lists/SectionListModern.js

@@ -12,14 +12,14 @@
 
 import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {
-  Props as VirtualizedSectionListProps,
   ScrollToLocationParamsType,
   SectionBase as _SectionBase,
-} from './VirtualizedSectionList';
+  VirtualizedSectionListProps,
+} from '@react-native/virtualized-lists';
 import type {AbstractComponent, Element, ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
-import VirtualizedSectionList from './VirtualizedSectionList';
+import {VirtualizedSectionList} from '@react-native/virtualized-lists';
 import React, {forwardRef, useImperativeHandle, useRef} from 'react';
 
 type Item = any;