@office-iss/react-native-win32 0.80.0-preview.1 → 0.81.0-preview.1

package/src/private/components/virtualview/VirtualView.js

@@ -0,0 +1,145 @@
+/**
+ * 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-local
+ * @format
+ */
+
+import type {ViewStyleProp} from '../../../../Libraries/StyleSheet/StyleSheet';
+import type {NativeSyntheticEvent} from '../../../../Libraries/Types/CoreEventTypes';
+import type ReadOnlyElement from '../../webapis/dom/nodes/ReadOnlyElement';
+import type {NativeModeChangeEvent} from './VirtualViewNativeComponent';
+
+import StyleSheet from '../../../../Libraries/StyleSheet/StyleSheet';
+import VirtualViewNativeComponent from './VirtualViewNativeComponent';
+import nullthrows from 'nullthrows';
+import * as React from 'react';
+import {startTransition, useState} from 'react';
+
+// @see VirtualViewNativeComponent
+export enum VirtualViewMode {
+  Visible = 0,
+  Prerender = 1,
+  Hidden = 2,
+}
+
+// @see VirtualViewNativeComponent
+export enum VirtualViewRenderState {
+  Unknown = 0,
+  Rendered = 1,
+  None = 2,
+}
+
+export type Rect = $ReadOnly<{
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+}>;
+
+export type ModeChangeEvent = $ReadOnly<{
+  ...Omit<NativeModeChangeEvent, 'mode'>,
+  mode: VirtualViewMode,
+  target: ReadOnlyElement,
+}>;
+
+type VirtualViewComponent = component(
+  children?: React.Node,
+  nativeID?: string,
+  ref?: ?React.RefSetter<React.ElementRef<typeof VirtualViewNativeComponent>>,
+  style?: ?ViewStyleProp,
+  onModeChange?: (event: ModeChangeEvent) => void,
+);
+
+type HiddenHeight = number;
+const NotHidden = null;
+
+type State = HiddenHeight | typeof NotHidden;
+
+function createVirtualView(initialState: State): VirtualViewComponent {
+  const initialHidden = initialState !== NotHidden;
+
+  component VirtualView(
+    children?: React.Node,
+    nativeID?: string,
+    ref?: ?React.RefSetter<React.ElementRef<typeof VirtualViewNativeComponent>>,
+    style?: ?ViewStyleProp,
+    onModeChange?: (event: ModeChangeEvent) => void,
+  ) {
+    const [state, setState] = useState<State>(initialState);
+    if (__DEV__) {
+      _logs.states?.push(state);
+    }
+    const isHidden = state !== NotHidden;
+
+    const handleModeChange = (
+      event: NativeSyntheticEvent<NativeModeChangeEvent>,
+    ) => {
+      const mode = nullthrows(VirtualViewMode.cast(event.nativeEvent.mode));
+      const emitModeChange =
+        onModeChange == null
+          ? null
+          : onModeChange.bind(null, {
+              mode,
+              // $FlowIgnore[incompatible-cast]
+              target: event.currentTarget as ReadOnlyElement,
+              targetRect: event.nativeEvent.targetRect,
+              thresholdRect: event.nativeEvent.thresholdRect,
+            });
+
+      match (mode) {
+        VirtualViewMode.Visible => {
+          setState(NotHidden);
+          emitModeChange?.();
+        }
+        VirtualViewMode.Prerender => {
+          startTransition(() => {
+            setState(NotHidden);
+            emitModeChange?.();
+          });
+        }
+        VirtualViewMode.Hidden => {
+          const {height} = event.nativeEvent.targetRect;
+          startTransition(() => {
+            setState(height as HiddenHeight);
+            emitModeChange?.();
+          });
+        }
+      }
+    };
+
+    return (
+      <VirtualViewNativeComponent
+        initialHidden={initialHidden}
+        nativeID={nativeID}
+        ref={ref}
+        renderState={
+          (isHidden
+            ? VirtualViewRenderState.None
+            : VirtualViewRenderState.Rendered) as number
+        }
+        style={
+          isHidden
+            ? StyleSheet.compose(style, {
+                height: Math.abs(nullthrows(state) as HiddenHeight),
+              })
+            : style
+        }
+        onModeChange={handleModeChange}>
+        {isHidden ? null : children}
+      </VirtualViewNativeComponent>
+    );
+  }
+  return VirtualView;
+}
+
+export default createVirtualView(NotHidden) as VirtualViewComponent;
+
+export function createHiddenVirtualView(height: number): VirtualViewComponent {
+  return createVirtualView(height as HiddenHeight);
+}
+
+export const _logs: {states?: Array<State>} = {};

package/src/private/components/virtualview/VirtualViewNativeComponent.js

@@ -0,0 +1,90 @@
+/**
+ * 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-local
+ * @format
+ */
+
+import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+} from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';
+
+import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
+
+export type NativeModeChangeEvent = $ReadOnly<{
+  /**
+   * Virtualization mode of the target view.
+   *
+   * - `0`: Target view is visible.
+   * - `1`: Target view is hidden, but can be prerendered.
+   * - `2`: Target view is hidden.
+   *
+   * WORKAROUND: As of this writing, codegen doesn't support enums, so we need
+   * to convert `number` into an enum in `VirtualView`.
+   */
+  mode: Int32,
+
+  /**
+   * Rect of the target view, relative to the nearest ancestor scroll container.
+   */
+  targetRect: $ReadOnly<{
+    x: Double,
+    y: Double,
+    width: Double,
+    height: Double,
+  }>,
+
+  /**
+   * Rect of the threshold that determines the mode of the target view, relative
+   * to the nearest ancestor scroll container.
+   *
+   * - `Visible`: Rect in which the target view is visible.
+   * - `Prerender`: Rect in which the target view is prerendered.
+   * - `Hidden`: Unused, without any guarantees.
+   *
+   * This can be used to determine whether and how much new content to render.
+   */
+  thresholdRect: $ReadOnly<{
+    x: Double,
+    y: Double,
+    width: Double,
+    height: Double,
+  }>,
+}>;
+
+type VirtualViewNativeProps = $ReadOnly<{
+  ...ViewProps,
+
+  /**
+   * Whether the initial mode should be `Hidden`.
+   */
+  initialHidden?: boolean,
+
+  /**
+   * Render state of children.
+   *
+   * - `0`: Reserved to represent unknown future values.
+   * - `1`: Children are rendered.
+   * - `2`: Children are not rendered.
+   *
+   * WORKAROUND: As of this writing, codegen doesn't support enums, so we need
+   * to convert `number` into an enum in `VirtualView`.
+   */
+  renderState: Int32,
+
+  /**
+   * See `NativeModeChangeEvent`.
+   */
+  onModeChange?: ?DirectEventHandler<NativeModeChangeEvent>,
+}>;
+
+export default codegenNativeComponent<VirtualViewNativeProps>('VirtualView', {
+  interfaceOnly: true,
+}) as HostComponent<VirtualViewNativeProps>;

package/src/private/devsupport/devmenu/elementinspector/BorderBox.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/BoxInspector.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/ElementBox.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/ElementProperties.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/Inspector.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/InspectorOverlay.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/InspectorPanel.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/NetworkOverlay.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/ReactDevToolsOverlay.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 import type {InspectedViewRef} from '../../../../../Libraries/ReactNative/AppContainer-dev';

package/src/private/devsupport/devmenu/elementinspector/StyleInspector.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/XHRInterceptor.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/elementinspector/getInspectorDataForViewAtPoint.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 import type {TouchedViewDataAtPoint} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';

package/src/private/devsupport/devmenu/elementinspector/resolveBoxStyle.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/devmenu/perfmonitor/PerformanceOverlay.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 'use strict';

package/src/private/devsupport/rndevtools/FuseboxSessionObserver.js

@@ -6,7 +6,6 @@
  *
  * @flow strict
  * @format
- * @oncall react_native
  */
 
 class FuseboxSessionObserver {

package/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.android.js

@@ -4,17 +4,16 @@
  * 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 NativeReactDevToolsSettingsManager from './specs/NativeReactDevToolsSettingsManager';
 
-module.exports = {
-  setGlobalHookSettings(settings: string) {
-    NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings);
-  },
-  getGlobalHookSettings(): ?string {
-    return NativeReactDevToolsSettingsManager?.getGlobalHookSettings();
-  },
-};
+export function setGlobalHookSettings(settings: string) {
+  NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings);
+}
+
+export function getGlobalHookSettings(): ?string {
+  return NativeReactDevToolsSettingsManager?.getGlobalHookSettings();
+}

package/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.ios.js

@@ -12,19 +12,16 @@ import Settings from '../../../../Libraries/Settings/Settings';
 
 const GLOBAL_HOOK_SETTINGS = 'ReactDevTools::HookSettings';
 
-const ReactDevToolsSettingsManager = {
-  setGlobalHookSettings(settings: string): void {
-    Settings.set({
-      [GLOBAL_HOOK_SETTINGS]: settings,
-    });
-  },
-  getGlobalHookSettings(): ?string {
-    const value = Settings.get(GLOBAL_HOOK_SETTINGS);
-    if (typeof value === 'string') {
-      return value;
-    }
-    return null;
-  },
-};
+export function setGlobalHookSettings(settings: string) {
+  Settings.set({
+    [GLOBAL_HOOK_SETTINGS]: settings,
+  });
+}
 
-module.exports = ReactDevToolsSettingsManager;
+export function getGlobalHookSettings(): ?string {
+  const value = Settings.get(GLOBAL_HOOK_SETTINGS);
+  if (typeof value === 'string') {
+    return value;
+  }
+  return null;
+}

package/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.win32.js

@@ -4,17 +4,16 @@
  * 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 NativeReactDevToolsSettingsManager from './specs/NativeReactDevToolsSettingsManager';
 
-module.exports = {
-  setGlobalHookSettings(settings: string) {
-    NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings);
-  },
-  getGlobalHookSettings(): ?string {
-    return NativeReactDevToolsSettingsManager?.getGlobalHookSettings();
-  },
-};
+export function setGlobalHookSettings(settings: string) {
+  NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings);
+}
+
+export function getGlobalHookSettings(): ?string {
+  return NativeReactDevToolsSettingsManager?.getGlobalHookSettings();
+}

package/src/private/devsupport/rndevtools/setUpFuseboxReactDevToolsDispatcher.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 type JSONValue =

package/src/private/devsupport/rndevtools/specs/NativeReactDevToolsRuntimeSettingsModule.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 import type {TurboModule} from '../../../../../Libraries/TurboModule/RCTExport';