@office-iss/react-native-win32 0.81.2 → 0.82.0-preview.2

package/Libraries/Interaction/InteractionManager.js

@@ -4,176 +4,32 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 
 import type {EventSubscription} from '../vendor/emitter/EventEmitter';
-import type {Task} from './TaskQueue';
 
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
-import EventEmitter from '../vendor/emitter/EventEmitter';
-
-const BatchedBridge = require('../BatchedBridge/BatchedBridge').default;
-const TaskQueue = require('./TaskQueue').default;
 const invariant = require('invariant');
 
-export type {Task, SimpleTask, PromiseTask} from './TaskQueue';
-
-export type Handle = number;
-
-const _emitter = new EventEmitter<{
-  interactionComplete: [],
-  interactionStart: [],
-}>();
-
-const DEBUG_DELAY: 0 = 0;
-const DEBUG: false = false;
-
-const InteractionManagerImpl = {
-  Events: {
-    interactionStart: 'interactionStart',
-    interactionComplete: 'interactionComplete',
-  },
-
-  /**
-   * Schedule a function to run after all interactions have completed. Returns a cancellable
-   * "promise".
-   */
-  runAfterInteractions(task: ?Task): {
-    then: <U>(
-      onFulfill?: ?(void) => ?(Promise<U> | U),
-      onReject?: ?(error: mixed) => ?(Promise<U> | U),
-    ) => Promise<U>,
-    cancel: () => void,
-    ...
-  } {
-    const tasks: Array<Task> = [];
-    const promise = new Promise((resolve: () => void) => {
-      _scheduleUpdate();
-      if (task) {
-        tasks.push(task);
-      }
-      tasks.push({
-        run: resolve,
-        name: 'resolve ' + ((task && task.name) || '?'),
-      });
-      _taskQueue.enqueueTasks(tasks);
-    });
-    return {
-      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-      then: promise.then.bind(promise),
-      cancel: function () {
-        _taskQueue.cancelTasks(tasks);
-      },
-    };
-  },
-
-  /**
-   * Notify manager that an interaction has started.
-   */
-  createInteractionHandle(): Handle {
-    DEBUG && console.log('InteractionManager: create interaction handle');
-    _scheduleUpdate();
-    const handle = ++_inc;
-    _addInteractionSet.add(handle);
-    return handle;
-  },
-
-  /**
-   * Notify manager that an interaction has completed.
-   */
-  clearInteractionHandle(handle: Handle) {
-    DEBUG && console.log('InteractionManager: clear interaction handle');
-    invariant(!!handle, 'InteractionManager: Must provide a handle to clear.');
-    _scheduleUpdate();
-    _addInteractionSet.delete(handle);
-    _deleteInteractionSet.add(handle);
-  },
-
-  // $FlowFixMe[unclear-type] unclear type of _emitter
-  // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-  addListener: _emitter.addListener.bind(_emitter) as (
-    eventType: string,
-    // $FlowFixMe[unclear-type] unclear type of arguments
-    listener: (...args: any) => mixed,
-    context: mixed,
-  ) => EventSubscription,
-
-  /**
-   * A positive number will use setTimeout to schedule any tasks after the
-   * eventLoopRunningTime hits the deadline value, otherwise all tasks will be
-   * executed in one setImmediate batch (default).
-   */
-  setDeadline(deadline: number) {
-    _deadline = deadline;
-  },
+export type SimpleTask = {
+  name: string,
+  run: () => void,
 };
+export type PromiseTask = {
+  name: string,
+  gen: () => Promise<void>,
+};
+export type Task = SimpleTask | PromiseTask | (() => void);
 
-const _interactionSet = new Set<number | Handle>();
-const _addInteractionSet = new Set<number | Handle>();
-const _deleteInteractionSet = new Set<Handle>();
-const _taskQueue = new TaskQueue({onMoreTasks: _scheduleUpdate});
-let _nextUpdateHandle: $FlowFixMe | TimeoutID = 0;
-let _inc = 0;
-let _deadline = -1;
-
-/**
- * Schedule an asynchronous update to the interaction state.
- */
-function _scheduleUpdate() {
-  if (!_nextUpdateHandle) {
-    if (_deadline > 0) {
-      _nextUpdateHandle = setTimeout(_processUpdate, 0 + DEBUG_DELAY);
-    } else {
-      _nextUpdateHandle = setImmediate(_processUpdate);
-    }
-  }
-}
-
-/**
- * Notify listeners, process queue, etc
- */
-function _processUpdate() {
-  _nextUpdateHandle = 0;
-
-  const interactionCount = _interactionSet.size;
-  _addInteractionSet.forEach(handle => _interactionSet.add(handle));
-  _deleteInteractionSet.forEach(handle => _interactionSet.delete(handle));
-  const nextInteractionCount = _interactionSet.size;
-
-  if (interactionCount !== 0 && nextInteractionCount === 0) {
-    // transition from 1+ --> 0 interactions
-    /* $FlowFixMe[prop-missing] Natural Inference rollout. See
-     * https://fburl.com/workplace/6291gfvu */
-    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
-     * https://fburl.com/workplace/6291gfvu */
-    _emitter.emit(InteractionManager.Events.interactionComplete);
-  } else if (interactionCount === 0 && nextInteractionCount !== 0) {
-    // transition from 0 --> 1+ interactions
-    /* $FlowFixMe[prop-missing] Natural Inference rollout. See
-     * https://fburl.com/workplace/6291gfvu */
-    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
-     * https://fburl.com/workplace/6291gfvu */
-    _emitter.emit(InteractionManager.Events.interactionStart);
-  }
+export type Handle = number;
 
-  // process the queue regardless of a transition
-  if (nextInteractionCount === 0) {
-    while (_taskQueue.hasTasksToProcess()) {
-      _taskQueue.processNext();
-      if (
-        _deadline > 0 &&
-        BatchedBridge.getEventLoopRunningTime() >= _deadline
-      ) {
-        // Hit deadline before processing all tasks, so process more later.
-        _scheduleUpdate();
-        break;
-      }
-    }
-  }
-  _addInteractionSet.clear();
-  _deleteInteractionSet.clear();
+// NOTE: The original implementation of `InteractionManager` never rejected
+// the returned promise. This preserves that behavior in the stub.
+function reject(error: Error): void {
+  setTimeout(() => {
+    throw error;
+  }, 0);
 }
 
 /**
@@ -227,11 +83,106 @@ function _processUpdate() {
  *
  * @deprecated
  */
-const InteractionManager = (
-  ReactNativeFeatureFlags.disableInteractionManager()
-    ? // $FlowFixMe[incompatible-variance]
-      require('./InteractionManagerStub').default
-    : InteractionManagerImpl
-) as typeof InteractionManagerImpl;
+const InteractionManagerStub = {
+  Events: {
+    interactionStart: 'interactionStart',
+    interactionComplete: 'interactionComplete',
+  },
+
+  /**
+   * Schedule a function to run after all interactions have completed. Returns a cancellable
+   * "promise".
+   *
+   * @deprecated
+   */
+  runAfterInteractions(task: ?Task): {
+    then: <U>(
+      onFulfill?: ?(void) => ?(Promise<U> | U),
+      onReject?: ?(error: mixed) => ?(Promise<U> | U),
+    ) => Promise<U>,
+    cancel: () => void,
+    ...
+  } {
+    let immediateID: ?$FlowFixMe;
+    const promise = new Promise(resolve => {
+      immediateID = setImmediate(() => {
+        if (typeof task === 'object' && task !== null) {
+          if (typeof task.gen === 'function') {
+            task.gen().then(resolve, reject);
+          } else if (typeof task.run === 'function') {
+            try {
+              task.run();
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          } else {
+            reject(new TypeError(`Task "${task.name}" missing gen or run.`));
+          }
+        } else if (typeof task === 'function') {
+          try {
+            task();
+            resolve();
+          } catch (error) {
+            reject(error);
+          }
+        } else {
+          reject(new TypeError('Invalid task of type: ' + typeof task));
+        }
+      });
+    });
+
+    return {
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
+      then: promise.then.bind(promise),
+      cancel() {
+        clearImmediate(immediateID);
+      },
+    };
+  },
+
+  /**
+   * Notify manager that an interaction has started.
+   *
+   * @deprecated
+   */
+  createInteractionHandle(): Handle {
+    return -1;
+  },
+
+  /**
+   * Notify manager that an interaction has completed.
+   *
+   * @deprecated
+   */
+  clearInteractionHandle(handle: Handle) {
+    invariant(!!handle, 'InteractionManager: Must provide a handle to clear.');
+  },
+
+  /**
+   * @deprecated
+   */
+  addListener(
+    eventType: string,
+    // $FlowFixMe[unclear-type]
+    listener: (...args: any) => mixed,
+    context: mixed,
+  ): EventSubscription {
+    return {
+      remove() {},
+    };
+  },
+
+  /**
+   * A positive number will use setTimeout to schedule any tasks after the
+   * eventLoopRunningTime hits the deadline value, otherwise all tasks will be
+   * executed in one setImmediate batch (default).
+   *
+   * @deprecated
+   */
+  setDeadline(deadline: number) {
+    // Do nothing.
+  },
+};
 
-export default InteractionManager;
+export default InteractionManagerStub;

package/Libraries/Interaction/PanResponder.js

@@ -12,7 +12,6 @@
 
 import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 
-const InteractionManager = require('./InteractionManager').default;
 const TouchHistoryMath = require('./TouchHistoryMath').default;
 
 const currentCentroidXOfTouchesChangedAfter =
@@ -31,9 +30,6 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY;
  * single-touch gestures resilient to extra touches, and can be used to
  * recognize simple multi-touch gestures.
  *
- * By default, `PanResponder` holds an `InteractionManager` handle to block
- * long-running JS events from interrupting active gestures.
- *
  * It provides a predictable wrapper of the responder handlers provided by the
  * [gesture responder system](docs/gesture-responder-system.html).
  * For each handler, it provides a new `gestureState` object alongside the
@@ -405,9 +401,6 @@ const PanResponder = {
     getInteractionHandle: () => ?number,
     panHandlers: GestureResponderHandlerMethods,
   } {
-    const interactionState = {
-      handle: (null: ?number),
-    };
     const gestureState: PanResponderGestureState = {
       // Useful for debugging
       stateID: Math.random(),
@@ -422,7 +415,7 @@ const PanResponder = {
       numberActiveTouches: 0,
       _accountsForMovesUpTo: 0,
     };
-    const panHandlers = {
+    const panHandlers: GestureResponderHandlerMethods = {
       onStartShouldSetResponder(event: GestureResponderEvent): boolean {
         return config.onStartShouldSetPanResponder == null
           ? false
@@ -464,10 +457,6 @@ const PanResponder = {
       },
 
       onResponderGrant(event: GestureResponderEvent): boolean {
-        if (!interactionState.handle) {
-          interactionState.handle =
-            InteractionManager.createInteractionHandle();
-        }
         gestureState.x0 = currentCentroidX(event.touchHistory);
         gestureState.y0 = currentCentroidY(event.touchHistory);
         gestureState.dx = 0;
@@ -482,21 +471,11 @@ const PanResponder = {
       },
 
       onResponderReject(event: GestureResponderEvent): void {
-        clearInteractionHandle(
-          interactionState,
-          config.onPanResponderReject,
-          event,
-          gestureState,
-        );
+        config.onPanResponderReject?.call(undefined, event, gestureState);
       },
 
       onResponderRelease(event: GestureResponderEvent): void {
-        clearInteractionHandle(
-          interactionState,
-          config.onPanResponderRelease,
-          event,
-          gestureState,
-        );
+        config.onPanResponderRelease?.call(undefined, event, gestureState);
         PanResponder._initializeGestureState(gestureState);
       },
 
@@ -529,21 +508,11 @@ const PanResponder = {
       onResponderEnd(event: GestureResponderEvent): void {
         const touchHistory = event.touchHistory;
         gestureState.numberActiveTouches = touchHistory.numberActiveTouches;
-        clearInteractionHandle(
-          interactionState,
-          config.onPanResponderEnd,
-          event,
-          gestureState,
-        );
+        config.onPanResponderEnd?.call(undefined, event, gestureState);
       },
 
       onResponderTerminate(event: GestureResponderEvent): void {
-        clearInteractionHandle(
-          interactionState,
-          config.onPanResponderTerminate,
-          event,
-          gestureState,
-        );
+        config.onPanResponderTerminate?.call(undefined, event, gestureState);
         PanResponder._initializeGestureState(gestureState);
       },
 
@@ -556,27 +525,13 @@ const PanResponder = {
     return {
       panHandlers,
       getInteractionHandle(): ?number {
-        return interactionState.handle;
+        // TODO: Deprecate and delete this method.
+        return null;
       },
     };
   },
 };
 
-function clearInteractionHandle(
-  interactionState: {handle: ?number, ...},
-  callback: ?(ActiveCallback | PassiveCallback),
-  event: GestureResponderEvent,
-  gestureState: PanResponderGestureState,
-) {
-  if (interactionState.handle) {
-    InteractionManager.clearInteractionHandle(interactionState.handle);
-    interactionState.handle = null;
-  }
-  if (callback) {
-    callback(event, gestureState);
-  }
-}
-
 export type PanResponderInstance = ReturnType<(typeof PanResponder)['create']>;
 
 export default PanResponder;

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -108,6 +108,8 @@ function configureNext(
   if (UIManager?.configureNextLayoutAnimation) {
     UIManager.configureNextLayoutAnimation(
       config,
+      /* $FlowFixMe[constant-condition] Error discovered during Constant
+       * Condition roll out. See https://fburl.com/workplace/1v97vimq. */
       onAnimationComplete ?? function () {},
       onAnimationDidFail ??
         function () {} /* this should never be called in Non-Fabric */,

package/Libraries/Lists/FlatList.js

@@ -432,7 +432,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
         }));
     } else if (this.props.onViewableItemsChanged) {
       this._virtualizedListPairs.push({
-        /* $FlowFixMe[incompatible-call] (>=0.63.0 site=react_native_fb) This
+        /* $FlowFixMe[incompatible-type] (>=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. */
         viewabilityConfig: this.props.viewabilityConfig,
@@ -569,7 +569,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
         .join(':');
     }
 
-    // $FlowFixMe[incompatible-call] Can't call keyExtractor with an array
+    // $FlowFixMe[incompatible-type] Can't call keyExtractor with an array
     return keyExtractor(items, index);
   };
 
@@ -626,11 +626,10 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
     const render = (props: ListRenderItemInfo<ItemT>): React.Node => {
       if (ListItemComponent) {
         // $FlowFixMe[not-a-component] Component isn't valid
-        // $FlowFixMe[incompatible-type-arg] Component isn't valid
-        // $FlowFixMe[incompatible-return] Component isn't valid
+        // $FlowFixMe[incompatible-type] Component isn't valid
         return <ListItemComponent {...props} />;
       } else if (renderItem) {
-        // $FlowFixMe[incompatible-call]
+        // $FlowFixMe[incompatible-type]
         return renderItem(props);
       } else {
         return null;
@@ -648,7 +647,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
           <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
             {item.map((it, kk) => {
               const element = render({
-                // $FlowFixMe[incompatible-call]
+                // $FlowFixMe[incompatible-type]
                 item: it,
                 index: index * cols + kk,
                 separators: info.separators,

package/Libraries/LogBox/Data/LogBoxData.js

@@ -20,7 +20,6 @@ import type {
 
 import DebuggerSessionObserver from '../../../src/private/devsupport/rndevtools/FuseboxSessionObserver';
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
-import NativeDevSettings from '../../NativeModules/specs/NativeDevSettings';
 import NativeLogBox from '../../NativeModules/specs/NativeLogBox';
 import LogBoxLog from './LogBoxLog';
 import {parseLogBoxException} from './parseLogBoxLog';
@@ -443,7 +442,7 @@ export function withSubscription(
     componentDidCatch(err: Error, errorInfo: {componentStack: string, ...}) {
       /* $FlowFixMe[class-object-subtyping] added when improving typing for
        * this parameters */
-      // $FlowFixMe[incompatible-call]
+      // $FlowFixMe[incompatible-type]
       reportLogBoxError(err, errorInfo.componentStack);
     }
 
@@ -493,6 +492,10 @@ function showFuseboxWarningsMigrationMessageOnce() {
     return;
   }
   hasShownFuseboxWarningsMigrationMessage = true;
+
+  const NativeDevSettings =
+    require('../../NativeModules/specs/NativeDevSettings').default;
+
   appendNewLog(
     new LogBoxLog({
       level: 'warn',

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -509,7 +509,7 @@ export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {
   return {
     ...parseInterpolation(argsWithoutComponentStack),
     componentStack,
-    /* $FlowFixMe[incompatible-return] Natural Inference rollout. See
+    /* $FlowFixMe[incompatible-type] Natural Inference rollout. See
      * https://fburl.com/workplace/6291gfvu */
     componentStackType,
   };

package/Libraries/LogBox/UI/LogBoxInspectorHeader.win32.js

@@ -61,7 +61,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           id="logbox_header_button_prev"
           disabled={props.total <= 1}
           level={props.level}
-          image={require('./LogBoxImages/chevron-left.png')}
+          image={new String('←')}
           onPress={() => props.onSelectIndex(prevIndex)}
         />
         <View style={styles.title}>
@@ -73,7 +73,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           id="logbox_header_button_next"
           disabled={props.total <= 1}
           level={props.level}
-          image={require('./LogBoxImages/chevron-right.png')}
+          image={new String('→')}
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -42,7 +42,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
             useNativeDriver: true,
           }),
         );
-        // $FlowFixMe[incompatible-call]
+        // $FlowFixMe[incompatible-type]
         setState({
           animation,
           rotate: animated.interpolate({

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js

@@ -44,7 +44,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
             useNativeDriver: true,
           }),
         );
-        // $FlowFixMe[incompatible-call]
+        // $FlowFixMe[incompatible-type]
         setState({
           animation,
           rotate: animated.interpolate({

package/Libraries/Modal/Modal.js

@@ -292,7 +292,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
       backgroundColor:
         this.props.transparent === true
           ? 'transparent'
-          : this.props.backdropColor ?? 'white',
+          : (this.props.backdropColor ?? 'white'),
     };
 
     let animationType = this.props.animationType || 'none';
@@ -370,13 +370,13 @@ const styles = StyleSheet.create({
   modal: {
     position: 'absolute',
   },
-  /* $FlowFixMe[incompatible-call] Natural Inference rollout. See
+  /* $FlowFixMe[incompatible-type] Natural Inference rollout. See
    * https://fburl.com/workplace/6291gfvu */
   container: {
     /* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb) This
      * comment suppresses an error found when Flow v0.111 was deployed. To see
      * the error, delete this comment and run Flow. */
-    // $FlowFixMe[incompatible-call]
+    // $FlowFixMe[incompatible-type]
     [side]: 0,
     top: 0,
     flex: 1,

package/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -108,7 +108,7 @@ export function get<Config: {...}>(
     return viewConfig;
   });
 
-  // $FlowFixMe[incompatible-return] `NativeComponent` is actually string!
+  // $FlowFixMe[incompatible-type] `NativeComponent` is actually string!
   return name;
 }
 

package/Libraries/NativeComponent/ViewConfig.js

@@ -32,7 +32,7 @@ export function createViewConfig(
       PlatformBaseViewConfig.directEventTypes,
       partialViewConfig.directEventTypes,
     ),
-    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[incompatible-type]
     validAttributes: composeIndexers(
       // $FlowFixMe[incompatible-call] `style` property confuses Flow.
       PlatformBaseViewConfig.validAttributes,
@@ -47,6 +47,6 @@ function composeIndexers<T>(
   maybeB: ?{+[string]: T},
 ): {+[string]: T} {
   return maybeA == null || maybeB == null
-    ? maybeA ?? maybeB ?? {}
+    ? (maybeA ?? maybeB ?? {})
     : {...maybeA, ...maybeB};
 }

package/Libraries/Network/RCTNetworking.android.js

@@ -53,7 +53,7 @@ const RCTNetworking = {
     listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription {
-    // $FlowFixMe[incompatible-call]
+    // $FlowFixMe[incompatible-type]
     return emitter.addListener(eventType, listener, context);
   },
 

package/Libraries/Network/RCTNetworking.ios.js

@@ -23,7 +23,7 @@ const RCTNetworking = {
     listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription {
-    // $FlowFixMe[incompatible-call]
+    // $FlowFixMe[incompatible-type]
     return RCTDeviceEventEmitter.addListener(eventType, listener, context);
   },
 

package/Libraries/Network/RCTNetworking.win32.js

@@ -23,7 +23,7 @@ const RCTNetworking = {
     listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
     context?: mixed,
   ): EventSubscription {
-    // $FlowFixMe[incompatible-call]
+    // $FlowFixMe[incompatible-type]
     return RCTDeviceEventEmitter.addListener(eventType, listener, context);
   },