@office-iss/react-native-win32 0.71.4 → 0.72.0-preview.1

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;

package/Libraries/Lists/ViewabilityHelper.js

@@ -10,351 +10,15 @@
 
 'use strict';
 
-import type {FrameMetricProps} from './VirtualizedListProps';
+export type {
+  ViewToken,
+  ViewabilityConfig,
+  ViewabilityConfigCallbackPair,
+} from '@react-native/virtualized-lists';
 
-const invariant = require('invariant');
+import {typeof ViewabilityHelper as ViewabilityHelperType} from '@react-native/virtualized-lists';
 
-export type ViewToken = {
-  item: any,
-  key: string,
-  index: ?number,
-  isViewable: boolean,
-  section?: any,
-  ...
-};
-
-export type ViewabilityConfigCallbackPair = {
-  viewabilityConfig: ViewabilityConfig,
-  onViewableItemsChanged: (info: {
-    viewableItems: Array<ViewToken>,
-    changed: Array<ViewToken>,
-    ...
-  }) => void,
-  ...
-};
-
-export type ViewabilityConfig = {|
-  /**
-   * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
-   * viewability callback will be fired. A high number means that scrolling through content without
-   * stopping will not mark the content as viewable.
-   */
-  minimumViewTime?: number,
-
-  /**
-   * Percent of viewport that must be covered for a partially occluded item to count as
-   * "viewable", 0-100. Fully visible items are always considered viewable. A value of 0 means
-   * that a single pixel in the viewport makes the item viewable, and a value of 100 means that
-   * an item must be either entirely visible or cover the entire viewport to count as viewable.
-   */
-  viewAreaCoveragePercentThreshold?: number,
-
-  /**
-   * Similar to `viewAreaPercentThreshold`, but considers the percent of the item that is visible,
-   * rather than the fraction of the viewable area it covers.
-   */
-  itemVisiblePercentThreshold?: number,
-
-  /**
-   * Nothing is considered viewable until the user scrolls or `recordInteraction` is called after
-   * render.
-   */
-  waitForInteraction?: boolean,
-|};
-
-/**
- * A Utility class for calculating viewable items based on current metrics like scroll position and
- * layout.
- *
- * An item is said to be in a "viewable" state when any of the following
- * is true for longer than `minimumViewTime` milliseconds (after an interaction if `waitForInteraction`
- * is true):
- *
- * - Occupying >= `viewAreaCoveragePercentThreshold` of the view area XOR fraction of the item
- *   visible in the view area >= `itemVisiblePercentThreshold`.
- * - Entirely visible on screen
- */
-class ViewabilityHelper {
-  _config: ViewabilityConfig;
-  _hasInteracted: boolean = false;
-  _timers: Set<number> = new Set();
-  _viewableIndices: Array<number> = [];
-  _viewableItems: Map<string, ViewToken> = new Map();
-
-  constructor(
-    config: ViewabilityConfig = {viewAreaCoveragePercentThreshold: 0},
-  ) {
-    this._config = config;
-  }
-
-  /**
-   * Cleanup, e.g. on unmount. Clears any pending timers.
-   */
-  dispose() {
-    /* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
-     * comment suppresses an error found when Flow v0.63 was deployed. To see
-     * the error delete this comment and run Flow. */
-    this._timers.forEach(clearTimeout);
-  }
-
-  /**
-   * Determines which items are viewable based on the current metrics and config.
-   */
-  computeViewableItems(
-    props: FrameMetricProps,
-    scrollOffset: number,
-    viewportHeight: number,
-    getFrameMetrics: (
-      index: number,
-      props: FrameMetricProps,
-    ) => ?{
-      length: number,
-      offset: number,
-      ...
-    },
-    // Optional optimization to reduce the scan size
-    renderRange?: {
-      first: number,
-      last: number,
-      ...
-    },
-  ): Array<number> {
-    const itemCount = props.getItemCount(props.data);
-    const {itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold} =
-      this._config;
-    const viewAreaMode = viewAreaCoveragePercentThreshold != null;
-    const viewablePercentThreshold = viewAreaMode
-      ? viewAreaCoveragePercentThreshold
-      : itemVisiblePercentThreshold;
-    invariant(
-      viewablePercentThreshold != null &&
-        (itemVisiblePercentThreshold != null) !==
-          (viewAreaCoveragePercentThreshold != null),
-      'Must set exactly one of itemVisiblePercentThreshold or viewAreaCoveragePercentThreshold',
-    );
-    const viewableIndices = [];
-    if (itemCount === 0) {
-      return viewableIndices;
-    }
-    let firstVisible = -1;
-    const {first, last} = renderRange || {first: 0, last: itemCount - 1};
-    if (last >= itemCount) {
-      console.warn(
-        'Invalid render range computing viewability ' +
-          JSON.stringify({renderRange, itemCount}),
-      );
-      return [];
-    }
-    for (let idx = first; idx <= last; idx++) {
-      const metrics = getFrameMetrics(idx, props);
-      if (!metrics) {
-        continue;
-      }
-      const top = metrics.offset - scrollOffset;
-      const bottom = top + metrics.length;
-      if (top < viewportHeight && bottom > 0) {
-        firstVisible = idx;
-        if (
-          _isViewable(
-            viewAreaMode,
-            viewablePercentThreshold,
-            top,
-            bottom,
-            viewportHeight,
-            metrics.length,
-          )
-        ) {
-          viewableIndices.push(idx);
-        }
-      } else if (firstVisible >= 0) {
-        break;
-      }
-    }
-    return viewableIndices;
-  }
-
-  /**
-   * Figures out which items are viewable and how that has changed from before and calls
-   * `onViewableItemsChanged` as appropriate.
-   */
-  onUpdate(
-    props: FrameMetricProps,
-    scrollOffset: number,
-    viewportHeight: number,
-    getFrameMetrics: (
-      index: number,
-      props: FrameMetricProps,
-    ) => ?{
-      length: number,
-      offset: number,
-      ...
-    },
-    createViewToken: (
-      index: number,
-      isViewable: boolean,
-      props: FrameMetricProps,
-    ) => ViewToken,
-    onViewableItemsChanged: ({
-      viewableItems: Array<ViewToken>,
-      changed: Array<ViewToken>,
-      ...
-    }) => void,
-    // Optional optimization to reduce the scan size
-    renderRange?: {
-      first: number,
-      last: number,
-      ...
-    },
-  ): void {
-    const itemCount = props.getItemCount(props.data);
-    if (
-      (this._config.waitForInteraction && !this._hasInteracted) ||
-      itemCount === 0 ||
-      !getFrameMetrics(0, props)
-    ) {
-      return;
-    }
-    let viewableIndices: Array<number> = [];
-    if (itemCount) {
-      viewableIndices = this.computeViewableItems(
-        props,
-        scrollOffset,
-        viewportHeight,
-        getFrameMetrics,
-        renderRange,
-      );
-    }
-    if (
-      this._viewableIndices.length === viewableIndices.length &&
-      this._viewableIndices.every((v, ii) => v === viewableIndices[ii])
-    ) {
-      // We might get a lot of scroll events where visibility doesn't change and we don't want to do
-      // extra work in those cases.
-      return;
-    }
-    this._viewableIndices = viewableIndices;
-    if (this._config.minimumViewTime) {
-      const handle: TimeoutID = setTimeout(() => {
-        /* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
-         * comment suppresses an error found when Flow v0.63 was deployed. To
-         * see the error delete this comment and run Flow. */
-        this._timers.delete(handle);
-        this._onUpdateSync(
-          props,
-          viewableIndices,
-          onViewableItemsChanged,
-          createViewToken,
-        );
-      }, this._config.minimumViewTime);
-      /* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
-       * comment suppresses an error found when Flow v0.63 was deployed. To see
-       * the error delete this comment and run Flow. */
-      this._timers.add(handle);
-    } else {
-      this._onUpdateSync(
-        props,
-        viewableIndices,
-        onViewableItemsChanged,
-        createViewToken,
-      );
-    }
-  }
-
-  /**
-   * clean-up cached _viewableIndices to evaluate changed items on next update
-   */
-  resetViewableIndices() {
-    this._viewableIndices = [];
-  }
-
-  /**
-   * Records that an interaction has happened even if there has been no scroll.
-   */
-  recordInteraction() {
-    this._hasInteracted = true;
-  }
-
-  _onUpdateSync(
-    props: FrameMetricProps,
-    viewableIndicesToCheck: Array<number>,
-    onViewableItemsChanged: ({
-      changed: Array<ViewToken>,
-      viewableItems: Array<ViewToken>,
-      ...
-    }) => void,
-    createViewToken: (
-      index: number,
-      isViewable: boolean,
-      props: FrameMetricProps,
-    ) => ViewToken,
-  ) {
-    // Filter out indices that have gone out of view since this call was scheduled.
-    viewableIndicesToCheck = viewableIndicesToCheck.filter(ii =>
-      this._viewableIndices.includes(ii),
-    );
-    const prevItems = this._viewableItems;
-    const nextItems = new Map(
-      viewableIndicesToCheck.map(ii => {
-        const viewable = createViewToken(ii, true, props);
-        return [viewable.key, viewable];
-      }),
-    );
-
-    const changed = [];
-    for (const [key, viewable] of nextItems) {
-      if (!prevItems.has(key)) {
-        changed.push(viewable);
-      }
-    }
-    for (const [key, viewable] of prevItems) {
-      if (!nextItems.has(key)) {
-        changed.push({...viewable, isViewable: false});
-      }
-    }
-    if (changed.length > 0) {
-      this._viewableItems = nextItems;
-      onViewableItemsChanged({
-        viewableItems: Array.from(nextItems.values()),
-        changed,
-        viewabilityConfig: this._config,
-      });
-    }
-  }
-}
-
-function _isViewable(
-  viewAreaMode: boolean,
-  viewablePercentThreshold: number,
-  top: number,
-  bottom: number,
-  viewportHeight: number,
-  itemLength: number,
-): boolean {
-  if (_isEntirelyVisible(top, bottom, viewportHeight)) {
-    return true;
-  } else {
-    const pixels = _getPixelsVisible(top, bottom, viewportHeight);
-    const percent =
-      100 * (viewAreaMode ? pixels / viewportHeight : pixels / itemLength);
-    return percent >= viewablePercentThreshold;
-  }
-}
-
-function _getPixelsVisible(
-  top: number,
-  bottom: number,
-  viewportHeight: number,
-): number {
-  const visibleHeight = Math.min(bottom, viewportHeight) - Math.max(top, 0);
-  return Math.max(0, visibleHeight);
-}
-
-function _isEntirelyVisible(
-  top: number,
-  bottom: number,
-  viewportHeight: number,
-): boolean {
-  return top >= 0 && bottom <= viewportHeight && bottom > top;
-}
+const ViewabilityHelper: ViewabilityHelperType =
+  require('@react-native/virtualized-lists').ViewabilityHelper;
 
 module.exports = ViewabilityHelper;