@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

package/Libraries/Lists/SectionList.d.ts

@@ -0,0 +1,300 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+import type {
+  ListRenderItemInfo,
+  VirtualizedListWithoutRenderItemProps,
+} from './VirtualizedList';
+import type {
+  ScrollView,
+  ScrollViewProps,
+} from '../Components/ScrollView/ScrollView';
+import {NodeHandle} from '../ReactNative/RendererProxy';
+import {StyleProp} from '../StyleSheet/StyleSheet';
+import {ViewStyle} from '../StyleSheet/StyleSheetTypes';
+
+/**
+ * @see https://reactnative.dev/docs/sectionlist
+ */
+
+type DefaultSectionT = {
+  [key: string]: any;
+};
+
+export interface SectionBase<ItemT, SectionT = DefaultSectionT> {
+  data: ReadonlyArray<ItemT>;
+
+  key?: string | undefined;
+
+  renderItem?: SectionListRenderItem<ItemT, SectionT> | undefined;
+
+  ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;
+
+  keyExtractor?: ((item: ItemT, index: number) => string) | undefined;
+}
+
+export type SectionListData<ItemT, SectionT = DefaultSectionT> = SectionBase<
+  ItemT,
+  SectionT
+> &
+  SectionT;
+
+/**
+ * @see https://reactnative.dev/docs/sectionlist.html#props
+ */
+
+export interface SectionListRenderItemInfo<ItemT, SectionT = DefaultSectionT>
+  extends ListRenderItemInfo<ItemT> {
+  section: SectionListData<ItemT, SectionT>;
+}
+
+export type SectionListRenderItem<ItemT, SectionT = DefaultSectionT> = (
+  info: SectionListRenderItemInfo<ItemT, SectionT>,
+) => React.ReactElement | null;
+
+export interface SectionListProps<ItemT, SectionT = DefaultSectionT>
+  extends VirtualizedListWithoutRenderItemProps<ItemT> {
+  /**
+   * Rendered in between adjacent Items within each section.
+   */
+  ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;
+
+  /**
+   * Rendered when the list is empty.
+   */
+  ListEmptyComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+
+  /**
+   * Rendered at the very end of the list.
+   */
+  ListFooterComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+
+  /**
+   * Styling for internal View for ListFooterComponent
+   */
+  ListFooterComponentStyle?: StyleProp<ViewStyle> | undefined | null;
+
+  /**
+   * Rendered at the very beginning of the list.
+   */
+  ListHeaderComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+
+  /**
+   * Styling for internal View for ListHeaderComponent
+   */
+  ListHeaderComponentStyle?: StyleProp<ViewStyle> | undefined | null;
+
+  /**
+   * Rendered in between each section.
+   */
+  SectionSeparatorComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+
+  /**
+   * A marker property for telling the list to re-render (since it implements PureComponent).
+   * 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;
+
+  /**
+   * `getItemLayout` is an optional optimization that lets us skip measurement of dynamic
+   * content if you know the height of items a priori. getItemLayout is the most efficient,
+   * and is easy to use if you have fixed height items, for example:
+   * ```
+   * getItemLayout={(data, index) => (
+   *   {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
+   * )}
+   * ```
+   */
+  getItemLayout?:
+    | ((
+        data: SectionListData<ItemT, SectionT>[] | null,
+        index: number,
+      ) => {length: number; offset: number; index: number})
+    | undefined;
+
+  /**
+   * How many items to render in the initial batch
+   */
+  initialNumToRender?: number | undefined;
+
+  /**
+   * Reverses the direction of scroll. Uses scale transforms of -1.
+   */
+  inverted?: boolean | null | undefined;
+
+  /**
+   * Used to extract a unique key for a given item at the specified index. Key is used for caching
+   * and as the react key to track item re-ordering. The default extractor checks `item.key`, then
+   * falls back to using the index, like React does.
+   */
+  keyExtractor?: ((item: ItemT, index: number) => string) | 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.
+   */
+  onRefresh?: (() => void) | null | undefined;
+
+  /**
+   * Used to handle failures when scrolling to an index that has not been measured yet.
+   * Recommended action is to either compute your own offset and `scrollTo` it, or scroll as far
+   * as possible and then try again after more items have been rendered.
+   */
+  onScrollToIndexFailed?:
+    | ((info: {
+        index: number;
+        highestMeasuredFrameIndex: number;
+        averageItemLength: number;
+      }) => void)
+    | undefined;
+
+  /**
+   * Set this true while waiting for new data from a refresh.
+   */
+  refreshing?: boolean | null | undefined;
+
+  /**
+   * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
+   */
+  renderItem?: SectionListRenderItem<ItemT, SectionT> | undefined;
+
+  /**
+   * Rendered at the top of each section. Sticky headers are not yet supported.
+   */
+  renderSectionHeader?:
+    | ((info: {
+        section: SectionListData<ItemT, SectionT>;
+      }) => React.ReactElement | null)
+    | undefined;
+
+  /**
+   * Rendered at the bottom of each section.
+   */
+  renderSectionFooter?:
+    | ((info: {
+        section: SectionListData<ItemT, SectionT>;
+      }) => React.ReactElement | null)
+    | undefined;
+
+  /**
+   * An array of objects with data for each section.
+   */
+  sections: ReadonlyArray<SectionListData<ItemT, SectionT>>;
+
+  /**
+   * Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
+   */
+  renderScrollComponent?:
+    | ((props: ScrollViewProps) => React.ReactElement<ScrollViewProps>)
+    | undefined;
+
+  /**
+   * Note: may have bugs (missing content) in some circumstances - use at your own risk.
+   *
+   * This may improve scroll performance for large lists.
+   */
+  removeClippedSubviews?: boolean | undefined;
+
+  /**
+   * Makes section headers stick to the top of the screen until the next one pushes it off.
+   * Only enabled by default on iOS because that is the platform standard there.
+   */
+  stickySectionHeadersEnabled?: boolean | undefined;
+
+  /**
+   * Uses legacy MetroListView instead of default VirtualizedSectionList
+   */
+  legacyImplementation?: boolean | undefined;
+}
+
+export interface SectionListScrollParams {
+  animated?: boolean | undefined;
+  itemIndex: number;
+  sectionIndex: number;
+  viewOffset?: number | undefined;
+  viewPosition?: number | undefined;
+}
+
+export class SectionList<
+  ItemT = any,
+  SectionT = DefaultSectionT,
+> extends React.Component<SectionListProps<ItemT, SectionT>> {
+  /**
+   * 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
+   * (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.
+   */
+  scrollToLocation(params: SectionListScrollParams): void;
+
+  /**
+   * Tells the list an interaction has occurred, which should trigger viewability calculations, e.g.
+   * if `waitForInteractions` is true and the user has not scrolled. This is typically called by
+   * taps on items or by navigation actions.
+   */
+  recordInteraction(): void;
+
+  /**
+   * Displays the scroll indicators momentarily.
+   *
+   * @platform ios
+   */
+  flashScrollIndicators(): void;
+
+  /**
+   * Provides a handle to the underlying scroll responder.
+   */
+  getScrollResponder(): ScrollView | undefined;
+
+  /**
+   * Provides a handle to the underlying scroll node.
+   */
+  getScrollableNode(): NodeHandle | undefined;
+}
+
+/* This definition is deprecated because it extends the wrong base type */
+export interface SectionListStatic<ItemT, SectionT = DefaultSectionT>
+  extends React.ComponentClass<SectionListProps<ItemT, SectionT>> {
+  /**
+   * 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
+   * (and may be covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle.
+   */
+  scrollToLocation?(params: SectionListScrollParams): void;
+}

package/Libraries/Lists/SectionList.js

@@ -10,17 +10,17 @@
 
 'use strict';
 
-import Platform from '../Utilities/Platform';
-import * as React from 'react';
-import VirtualizedSectionList from './VirtualizedSectionList';
-
 import type {ScrollResponderType} from '../Components/ScrollView/ScrollView';
 import type {
-  SectionBase as _SectionBase,
   Props as VirtualizedSectionListProps,
   ScrollToLocationParamsType,
+  SectionBase as _SectionBase,
 } from './VirtualizedSectionList';
 
+import Platform from '../Utilities/Platform';
+import VirtualizedSectionList from './VirtualizedSectionList';
+import * as React from 'react';
+
 type Item = any;
 
 export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;

package/Libraries/Lists/SectionListModern.js

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

package/Libraries/Lists/StateSafePureComponent.js

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+/**
+ * `setState` is called asynchronously, and should not rely on the value of
+ * `this.props` or `this.state`:
+ * https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
+ *
+ * SafePureComponent adds runtime enforcement, to catch cases where these
+ * variables are read in a state updater function, instead of the ones passed
+ * in.
+ */
+export default class StateSafePureComponent<
+  Props,
+  State: interface {},
+> extends React.PureComponent<Props, State> {
+  _inAsyncStateUpdate = false;
+
+  constructor(props: Props) {
+    super(props);
+    this._installSetStateHooks();
+  }
+
+  setState(
+    partialState: ?($Shape<State> | ((State, Props) => ?$Shape<State>)),
+    callback?: () => mixed,
+  ): void {
+    if (typeof partialState === 'function') {
+      super.setState((state, props) => {
+        this._inAsyncStateUpdate = true;
+        let ret;
+        try {
+          ret = partialState(state, props);
+        } catch (err) {
+          throw err;
+        } finally {
+          this._inAsyncStateUpdate = false;
+        }
+        return ret;
+      }, callback);
+    } else {
+      super.setState(partialState, callback);
+    }
+  }
+
+  _installSetStateHooks() {
+    const that = this;
+    let {props, state} = this;
+
+    Object.defineProperty(this, 'props', {
+      get() {
+        invariant(
+          !that._inAsyncStateUpdate,
+          '"this.props" should not be accessed during state updates',
+        );
+        return props;
+      },
+      set(newProps: Props) {
+        props = newProps;
+      },
+    });
+    Object.defineProperty(this, 'state', {
+      get() {
+        invariant(
+          !that._inAsyncStateUpdate,
+          '"this.state" should not be acceessed during state updates',
+        );
+        return state;
+      },
+      set(newState: State) {
+        state = newState;
+      },
+    });
+  }
+}

package/Libraries/Lists/ViewabilityHelper.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import type {FrameMetricProps} from './VirtualizedListProps';
+
 const invariant = require('invariant');
 
 export type ViewToken = {
@@ -99,10 +101,13 @@ class ViewabilityHelper {
    * Determines which items are viewable based on the current metrics and config.
    */
   computeViewableItems(
-    itemCount: number,
+    props: FrameMetricProps,
     scrollOffset: number,
     viewportHeight: number,
-    getFrameMetrics: (index: number) => ?{
+    getFrameMetrics: (
+      index: number,
+      props: FrameMetricProps,
+    ) => ?{
       length: number,
       offset: number,
       ...
@@ -114,6 +119,7 @@ class ViewabilityHelper {
       ...
     },
   ): Array<number> {
+    const itemCount = props.getItemCount(props.data);
     const {itemVisiblePercentThreshold, viewAreaCoveragePercentThreshold} =
       this._config;
     const viewAreaMode = viewAreaCoveragePercentThreshold != null;
@@ -140,7 +146,7 @@ class ViewabilityHelper {
       return [];
     }
     for (let idx = first; idx <= last; idx++) {
-      const metrics = getFrameMetrics(idx);
+      const metrics = getFrameMetrics(idx, props);
       if (!metrics) {
         continue;
       }
@@ -172,15 +178,22 @@ class ViewabilityHelper {
    * `onViewableItemsChanged` as appropriate.
    */
   onUpdate(
-    itemCount: number,
+    props: FrameMetricProps,
     scrollOffset: number,
     viewportHeight: number,
-    getFrameMetrics: (index: number) => ?{
+    getFrameMetrics: (
+      index: number,
+      props: FrameMetricProps,
+    ) => ?{
       length: number,
       offset: number,
       ...
     },
-    createViewToken: (index: number, isViewable: boolean) => ViewToken,
+    createViewToken: (
+      index: number,
+      isViewable: boolean,
+      props: FrameMetricProps,
+    ) => ViewToken,
     onViewableItemsChanged: ({
       viewableItems: Array<ViewToken>,
       changed: Array<ViewToken>,
@@ -193,17 +206,18 @@ class ViewabilityHelper {
       ...
     },
   ): void {
+    const itemCount = props.getItemCount(props.data);
     if (
       (this._config.waitForInteraction && !this._hasInteracted) ||
       itemCount === 0 ||
-      !getFrameMetrics(0)
+      !getFrameMetrics(0, props)
     ) {
       return;
     }
-    let viewableIndices = [];
+    let viewableIndices: Array<number> = [];
     if (itemCount) {
       viewableIndices = this.computeViewableItems(
-        itemCount,
+        props,
         scrollOffset,
         viewportHeight,
         getFrameMetrics,
@@ -220,12 +234,13 @@ class ViewabilityHelper {
     }
     this._viewableIndices = viewableIndices;
     if (this._config.minimumViewTime) {
-      const handle = setTimeout(() => {
+      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,
@@ -237,6 +252,7 @@ class ViewabilityHelper {
       this._timers.add(handle);
     } else {
       this._onUpdateSync(
+        props,
         viewableIndices,
         onViewableItemsChanged,
         createViewToken,
@@ -259,13 +275,18 @@ class ViewabilityHelper {
   }
 
   _onUpdateSync(
+    props: FrameMetricProps,
     viewableIndicesToCheck: Array<number>,
     onViewableItemsChanged: ({
       changed: Array<ViewToken>,
       viewableItems: Array<ViewToken>,
       ...
     }) => void,
-    createViewToken: (index: number, isViewable: boolean) => ViewToken,
+    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 =>
@@ -274,7 +295,7 @@ class ViewabilityHelper {
     const prevItems = this._viewableItems;
     const nextItems = new Map(
       viewableIndicesToCheck.map(ii => {
-        const viewable = createViewToken(ii, true);
+        const viewable = createViewToken(ii, true, props);
         return [viewable.key, viewable];
       }),
     );

package/Libraries/Lists/VirtualizeUtils.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import invariant from 'invariant';
+import type {FrameMetricProps} from './VirtualizedListProps';
 
 /**
  * Used to find the indices of the frames that overlap the given offsets. Useful for finding the
@@ -19,14 +19,18 @@ import invariant from 'invariant';
  */
 export function elementsThatOverlapOffsets(
   offsets: Array<number>,
-  itemCount: number,
-  getFrameMetrics: (index: number) => {
+  props: FrameMetricProps,
+  getFrameMetrics: (
+    index: number,
+    props: FrameMetricProps,
+  ) => {
     length: number,
     offset: number,
     ...
   },
   zoomScale: number = 1,
 ): Array<number> {
+  const itemCount = props.getItemCount(props.data);
   const result = [];
   for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
     const currentOffset = offsets[offsetIndex];
@@ -36,7 +40,7 @@ export function elementsThatOverlapOffsets(
     while (left <= right) {
       // eslint-disable-next-line no-bitwise
       const mid = left + ((right - left) >>> 1);
-      const frame = getFrameMetrics(mid);
+      const frame = getFrameMetrics(mid, props);
       const scaledOffsetStart = frame.offset * zoomScale;
       const scaledOffsetEnd = (frame.offset + frame.length) * zoomScale;
 
@@ -95,16 +99,17 @@ export function newRangeCount(
  * biased in the direction of scroll.
  */
 export function computeWindowedRenderLimits(
-  data: any,
-  getItemCount: (data: any) => number,
+  props: FrameMetricProps,
   maxToRenderPerBatch: number,
   windowSize: number,
   prev: {
     first: number,
     last: number,
-    ...
   },
-  getFrameMetricsApprox: (index: number) => {
+  getFrameMetricsApprox: (
+    index: number,
+    props: FrameMetricProps,
+  ) => {
     length: number,
     offset: number,
     ...
@@ -120,11 +125,10 @@ export function computeWindowedRenderLimits(
 ): {
   first: number,
   last: number,
-  ...
 } {
-  const itemCount = getItemCount(data);
+  const itemCount = props.getItemCount(props.data);
   if (itemCount === 0) {
-    return prev;
+    return {first: 0, last: -1};
   }
   const {offset, velocity, visibleLength, zoomScale = 1} = scrollMetrics;
 
@@ -148,7 +152,7 @@ export function computeWindowedRenderLimits(
   const overscanEnd = Math.max(0, visibleEnd + leadFactor * overscanLength);
 
   const lastItemOffset =
-    getFrameMetricsApprox(itemCount - 1).offset * zoomScale;
+    getFrameMetricsApprox(itemCount - 1, props).offset * zoomScale;
   if (lastItemOffset < overscanBegin) {
     // Entire list is before our overscan window
     return {
@@ -160,7 +164,7 @@ export function computeWindowedRenderLimits(
   // Find the indices that correspond to the items at the render boundaries we're targeting.
   let [overscanFirst, first, last, overscanLast] = elementsThatOverlapOffsets(
     [overscanBegin, visibleBegin, visibleEnd, overscanEnd],
-    itemCount,
+    props,
     getFrameMetricsApprox,
     zoomScale,
   );