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

package/Libraries/Inspector/InspectorOverlay.win32.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {PressEvent} from '../Types/CoreEventTypes';
+
+const View = require('../Components/View/View');
+const StyleSheet = require('../StyleSheet/StyleSheet');
 // const Dimensions = require('../Utilities/Dimensions'); [Win32]
 const ElementBox = require('./ElementBox');
 const React = require('react');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const View = require('../Components/View/View');
-
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
-import type {PressEvent} from '../Types/CoreEventTypes';
 
 type Inspected = $ReadOnly<{|
   frame?: Object,

package/Libraries/Inspector/InspectorPanel.js

@@ -10,17 +10,19 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+
+import SafeAreaView from '../Components/SafeAreaView/SafeAreaView';
+
+const ScrollView = require('../Components/ScrollView/ScrollView');
+const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
+const View = require('../Components/View/View');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Text = require('../Text/Text');
 const ElementProperties = require('./ElementProperties');
 const NetworkOverlay = require('./NetworkOverlay');
 const PerformanceOverlay = require('./PerformanceOverlay');
 const React = require('react');
-const ScrollView = require('../Components/ScrollView/ScrollView');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
-const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
-const View = require('../Components/View/View');
-
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 
 type Props = $ReadOnly<{|
   devtoolsIsOpen: boolean,
@@ -84,7 +86,7 @@ class InspectorPanel extends React.Component<Props> {
       contents = <View style={styles.waiting}>{this.renderWaiting()}</View>;
     }
     return (
-      <View style={styles.container}>
+      <SafeAreaView style={styles.container}>
         {!this.props.devtoolsIsOpen && contents}
         <View style={styles.buttonRow}>
           <InspectorPanelButton
@@ -108,7 +110,7 @@ class InspectorPanel extends React.Component<Props> {
             onClick={this.props.setTouchTargeting}
           />
         </View>
-      </View>
+      </SafeAreaView>
     );
   }
 }
@@ -120,7 +122,7 @@ type InspectorPanelButtonProps = $ReadOnly<{|
 |}>;
 
 class InspectorPanelButton extends React.Component<InspectorPanelButtonProps> {
-  render() {
+  render(): React.Node {
     return (
       <TouchableHighlight
         onPress={() => this.props.onClick(!this.props.pressed)}

package/Libraries/Inspector/NetworkOverlay.js

@@ -95,7 +95,11 @@ class NetworkOverlay extends React.Component<Props, State> {
   // scroll to the bottom as new network requests come in, or if the user has
   // intentionally scrolled away from the bottom - to instead flash the scroll bar
   // and keep the current position
-  _requestsListViewScrollMetrics = {
+  _requestsListViewScrollMetrics: {
+    contentLength: number,
+    offset: number,
+    visibleLength: number,
+  } = {
     offset: 0,
     visibleLength: 0,
     contentLength: 0,
@@ -147,7 +151,7 @@ class NetworkOverlay extends React.Component<Props, State> {
       this.setState(({requests}) => {
         const networkRequestInfo = requests[xhrIndex];
         if (!networkRequestInfo.requestHeaders) {
-          networkRequestInfo.requestHeaders = {};
+          networkRequestInfo.requestHeaders = ({}: {[any]: any});
         }
         networkRequestInfo.requestHeaders[header] = value;
         return {requests};
@@ -363,7 +367,7 @@ class NetworkOverlay extends React.Component<Props, State> {
     );
   };
 
-  _renderItemDetail(id: number) {
+  _renderItemDetail(id: number): React.Node {
     const requestItem = this.state.requests[id];
     const details = Object.keys(requestItem).map(key => {
       if (key === 'id') {

package/Libraries/Inspector/PerformanceOverlay.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
-const PerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
-const React = require('react');
+const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
-const View = require('../Components/View/View');
+const PerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
+const React = require('react');
 
 class PerformanceOverlay extends React.Component<{...}> {
   render(): React.Node {

package/Libraries/Inspector/StyleInspector.js

@@ -10,10 +10,10 @@
 
 'use strict';
 
-const React = require('react');
+const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
-const View = require('../Components/View/View');
+const React = require('react');
 
 class StyleInspector extends React.Component<$FlowFixMeProps> {
   render(): React.Node {

package/Libraries/Inspector/getInspectorDataForViewAtPoint.js

@@ -0,0 +1,71 @@
+/**
+ * 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
+ * @flow
+ */
+
+import type {
+  HostComponent,
+  TouchedViewDataAtPoint,
+} from '../Renderer/shims/ReactNativeTypes';
+
+const invariant = require('invariant');
+const React = require('react');
+
+export type HostRef = React.ElementRef<HostComponent<mixed>>;
+export type ReactRenderer = {
+  rendererConfig: {
+    getInspectorDataForViewAtPoint: (
+      inspectedView: ?HostRef,
+      locationX: number,
+      locationY: number,
+      callback: Function,
+    ) => void,
+    ...
+  },
+};
+
+const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+const renderers = findRenderers();
+
+function findRenderers(): $ReadOnlyArray<ReactRenderer> {
+  const allRenderers = Array.from(hook.renderers.values());
+  invariant(
+    allRenderers.length >= 1,
+    'Expected to find at least one React Native renderer on DevTools hook.',
+  );
+  return allRenderers;
+}
+
+module.exports = function getInspectorDataForViewAtPoint(
+  inspectedView: ?HostRef,
+  locationX: number,
+  locationY: number,
+  callback: (viewData: TouchedViewDataAtPoint) => boolean,
+) {
+  let shouldBreak = false;
+  // Check all renderers for inspector data.
+  for (let i = 0; i < renderers.length; i++) {
+    if (shouldBreak) {
+      break;
+    }
+    const renderer = renderers[i];
+    if (renderer?.rendererConfig?.getInspectorDataForViewAtPoint != null) {
+      renderer.rendererConfig.getInspectorDataForViewAtPoint(
+        inspectedView,
+        locationX,
+        locationY,
+        viewData => {
+          // Only return with non-empty view data since only one renderer will have this view.
+          if (viewData && viewData.hierarchy.length > 0) {
+            shouldBreak = callback(viewData);
+          }
+        },
+      );
+    }
+  }
+};

package/Libraries/Interaction/BridgeSpyStallHandler.js

@@ -11,10 +11,10 @@
 'use strict';
 
 import type {SpyData} from '../BatchedBridge/MessageQueue';
-const JSEventLoopWatchdog = require('./JSEventLoopWatchdog');
 
 const MessageQueue = require('../BatchedBridge/MessageQueue');
 const infoLog = require('../Utilities/infoLog');
+const JSEventLoopWatchdog = require('./JSEventLoopWatchdog');
 
 const BridgeSpyStallHandler = {
   register: function () {

package/Libraries/Interaction/InteractionManager.d.ts

@@ -0,0 +1,74 @@
+/**
+ * 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 {EmitterSubscription} from '../vendor/emitter/EventEmitter';
+
+export type Handle = number;
+
+export type SimpleTask = {
+  name: string;
+  gen: () => void;
+};
+export type PromiseTask = {
+  name: string;
+  gen: () => Promise<any>;
+};
+
+export interface InteractionManagerStatic {
+  Events: {
+    interactionStart: string;
+    interactionComplete: string;
+  };
+
+  /**
+   * Adds a listener to be invoked when events of the specified type are
+   * emitted. An optional calling context may be provided. The data arguments
+   * emitted will be passed to the listener function.
+   *
+   * @param eventType - Name of the event to listen to
+   * @param listener - Function to invoke when the specified event is
+   *   emitted
+   * @param context - Optional context object to use when invoking the
+   *   listener
+   */
+  addListener(
+    eventType: string,
+    listener: (...args: any[]) => any,
+    context?: any,
+  ): EmitterSubscription;
+
+  /**
+   * Schedule a function to run after all interactions have completed.
+   * Returns a cancellable
+   */
+  runAfterInteractions(task?: (() => any) | SimpleTask | PromiseTask): {
+    then: (onfulfilled?: () => any, onrejected?: () => any) => Promise<any>;
+    done: (...args: any[]) => any;
+    cancel: () => void;
+  };
+
+  /**
+   * Notify manager that an interaction has started.
+   */
+  createInteractionHandle(): Handle;
+
+  /**
+   * Notify manager that an interaction has completed.
+   */
+  clearInteractionHandle(handle: Handle): void;
+
+  /**
+   * 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): void;
+}
+
+export const InteractionManager: InteractionManagerStatic;

package/Libraries/Interaction/InteractionManager.js

@@ -8,16 +8,16 @@
  * @flow strict-local
  */
 
-const BatchedBridge = require('../BatchedBridge/BatchedBridge');
-const TaskQueue = require('./TaskQueue');
+import type {Task} from './TaskQueue';
+
+import EventEmitter from '../vendor/emitter/EventEmitter';
 
+const BatchedBridge = require('../BatchedBridge/BatchedBridge');
 const infoLog = require('../Utilities/infoLog');
+const TaskQueue = require('./TaskQueue');
 const invariant = require('invariant');
 
-import EventEmitter from '../vendor/emitter/EventEmitter';
-
 export type Handle = number;
-import type {Task} from './TaskQueue';
 
 const _emitter = new EventEmitter<{
   interactionComplete: [],
@@ -150,9 +150,9 @@ const InteractionManager = {
   },
 };
 
-const _interactionSet = new Set();
-const _addInteractionSet = new Set();
-const _deleteInteractionSet = new Set();
+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;

package/Libraries/Interaction/NativeFrameRateLogger.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Interaction/PanResponder.d.ts

@@ -0,0 +1,202 @@
+/**
+ * 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 {GestureResponderHandlers} from '../../types/public/ReactNativeRenderer';
+import {GestureResponderEvent} from '../Types/CoreEventTypes';
+
+export interface PanResponderGestureState {
+  /**
+   *  ID of the gestureState- persisted as long as there at least one touch on
+   */
+  stateID: number;
+
+  /**
+   *  the latest screen coordinates of the recently-moved touch
+   */
+  moveX: number;
+
+  /**
+   *  the latest screen coordinates of the recently-moved touch
+   */
+  moveY: number;
+
+  /**
+   * the screen coordinates of the responder grant
+   */
+  x0: number;
+
+  /**
+   * the screen coordinates of the responder grant
+   */
+  y0: number;
+
+  /**
+   * accumulated distance of the gesture since the touch started
+   */
+  dx: number;
+
+  /**
+   * accumulated distance of the gesture since the touch started
+   */
+  dy: number;
+
+  /**
+   * current velocity of the gesture
+   */
+  vx: number;
+
+  /**
+   * current velocity of the gesture
+   */
+  vy: number;
+
+  /**
+   * Number of touches currently on screen
+   */
+  numberActiveTouches: number;
+
+  // All `gestureState` accounts for timeStamps up until:
+  _accountsForMovesUpTo: number;
+}
+
+/**
+ * @see documentation of GestureResponderHandlers
+ */
+export interface PanResponderCallbacks {
+  onMoveShouldSetPanResponder?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => boolean)
+    | undefined;
+  onStartShouldSetPanResponder?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => boolean)
+    | undefined;
+  onPanResponderGrant?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => void)
+    | undefined;
+  onPanResponderMove?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => void)
+    | undefined;
+  onPanResponderRelease?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => void)
+    | undefined;
+  onPanResponderTerminate?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => void)
+    | undefined;
+
+  onMoveShouldSetPanResponderCapture?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => boolean)
+    | undefined;
+  onStartShouldSetPanResponderCapture?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => boolean)
+    | undefined;
+  onPanResponderReject?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => void)
+    | undefined;
+  onPanResponderStart?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => void)
+    | undefined;
+  onPanResponderEnd?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => void)
+    | undefined;
+  onPanResponderTerminationRequest?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => boolean)
+    | undefined;
+  onShouldBlockNativeResponder?:
+    | ((
+        e: GestureResponderEvent,
+        gestureState: PanResponderGestureState,
+      ) => boolean)
+    | undefined;
+}
+
+export interface PanResponderInstance {
+  panHandlers: GestureResponderHandlers;
+}
+
+/**
+ * PanResponder reconciles several touches into a single gesture.
+ * It makes single-touch gestures resilient to extra touches,
+ * and can be used to recognize simple multi-touch gestures.
+ *
+ * It provides a predictable wrapper of the responder handlers provided by the gesture responder system.
+ * For each handler, it provides a new gestureState object alongside the normal event.
+ */
+export interface PanResponderStatic {
+  /**
+   * @param config Enhanced versions of all of the responder callbacks
+   * that provide not only the typical `ResponderSyntheticEvent`, but also the
+   * `PanResponder` gesture state.  Simply replace the word `Responder` with
+   * `PanResponder` in each of the typical `onResponder*` callbacks. For
+   * example, the `config` object would look like:
+   *
+   *  - `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
+   *  - `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
+   *  - `onStartShouldSetPanResponder: (e, gestureState) => {...}`
+   *  - `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
+   *  - `onPanResponderReject: (e, gestureState) => {...}`
+   *  - `onPanResponderGrant: (e, gestureState) => {...}`
+   *  - `onPanResponderStart: (e, gestureState) => {...}`
+   *  - `onPanResponderEnd: (e, gestureState) => {...}`
+   *  - `onPanResponderRelease: (e, gestureState) => {...}`
+   *  - `onPanResponderMove: (e, gestureState) => {...}`
+   *  - `onPanResponderTerminate: (e, gestureState) => {...}`
+   *  - `onPanResponderTerminationRequest: (e, gestureState) => {...}`
+   *  - `onShouldBlockNativeResponder: (e, gestureState) => {...}`
+   *
+   *  In general, for events that have capture equivalents, we update the
+   *  gestureState once in the capture phase and can use it in the bubble phase
+   *  as well.
+   *
+   *  Be careful with onStartShould* callbacks. They only reflect updated
+   *  `gestureState` for start/end events that bubble/capture to the Node.
+   *  Once the node is the responder, you can rely on every start/end event
+   *  being processed by the gesture and `gestureState` being updated
+   *  accordingly. (numberActiveTouches) may not be totally accurate unless you
+   *  are the responder.
+   */
+  create(config: PanResponderCallbacks): PanResponderInstance;
+}
+
+export const PanResponder: PanResponderStatic;
+export type PanResponder = PanResponderStatic;