react-native-tvos 0.85.2-0 → 0.86.0-0rc2

package/src/private/components/virtualcollection/VirtualCollectionView.js

@@ -0,0 +1,238 @@
+/**
+ * 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 {ModeChangeEvent} from '../virtualview/VirtualView';
+import type {Item, VirtualCollection} from './Virtual';
+
+import VirtualView from '../virtualview/VirtualView';
+import {
+  VirtualViewMode,
+  createHiddenVirtualView,
+} from '../virtualview/VirtualView';
+import FlingItemOverlay from './debug/FlingItemOverlay';
+import * as React from 'react';
+import {useCallback, useMemo, useState} from 'react';
+
+export type VirtualCollectionLayoutComponent<TLayoutProps extends {...}> =
+  component(
+    children: ReadonlyArray<React.Node>,
+    spacer: React.Node,
+    ...TLayoutProps
+  );
+
+export type VirtualCollectionGenerator = Readonly<{
+  initial: Readonly<{
+    itemCount: number,
+    spacerStyle: (itemCount: number) => ViewStyleProp,
+  }>,
+  next: (event: ModeChangeEvent) => {
+    itemCount: number,
+    spacerStyle: (itemCount: number) => ViewStyleProp,
+  },
+}>;
+
+export type VirtualCollectionViewComponent<TLayoutProps extends {...}> =
+  component<+TItem extends Item>(
+    children: (item: TItem, key: string) => React.Node,
+    items: VirtualCollection<TItem>,
+    itemToKey?: (TItem) => string,
+    removeClippedSubviews?: boolean,
+    testID?: ?string,
+    ...TLayoutProps
+  );
+
+/**
+ * Creates a component that virtually renders a collection of items and manages
+ * lazy rendering, memoization, and pagination. The resulting component accepts
+ * the following base props:
+ *
+ * - `children`: A function maps an item to a React node.
+ * - `items`: A collection of items to render.
+ * - `itemToKey`: A function maps an item to a unique key.
+ *
+ * The first argument is a layout component that defines layout of the item and
+ * spacer. It always receives the following props:
+ *
+ * - `children`: An array of React nodes (for items rendered so far).
+ * - `spacer`: A React node (estimates layout for items not yet rendered).
+ *
+ * The layout component must render `children` and `spacer`. It can also define
+ * additional props that will be passed through from the resulting component.
+ *
+ * The second argument is a generator that defines the initial rendering and
+ * pagination behavior. The initial rendering behavior is defined by the
+ * `initial` property with the following properties:
+ *
+ * - `itemCount`: Number of items to render initially.
+ * - `spacerStyle`: A function that estimates the layout of the spacer. It
+ *   receives the number of items being rendered as an argument.
+ *
+ * The pagination behavior is defined by the `next` function that receives a
+ * `ModeChangeEvent` and then returns an object with the following properties:
+ *
+ * - `itemCount`: Number of additional items needed to fill `thresholdRect`.
+ * - `spacerStyle`: A function that estimates the layout of the spacer. It
+ *   receives the number of items being rendered as an argument.
+ *
+ */
+export function createVirtualCollectionView<TLayoutProps extends {...}>(
+  VirtualLayout: VirtualCollectionLayoutComponent<TLayoutProps>,
+  {initial, next}: VirtualCollectionGenerator,
+): VirtualCollectionViewComponent<TLayoutProps> {
+  component VirtualCollectionView<+TItem extends Item>(
+    children: (item: TItem, key: string) => React.Node,
+    items: VirtualCollection<TItem>,
+    itemToKey: TItem => string = defaultItemToKey,
+    removeClippedSubviews: boolean = false,
+    testID?: ?string,
+    ...layoutProps: TLayoutProps
+  ) {
+    const [desiredItemCount, setDesiredItemCount] = useState(
+      Math.ceil(initial.itemCount),
+    );
+
+    const renderItem = useMemoCallback(
+      useCallback(
+        (item: TItem) => {
+          const key = itemToKey(item);
+          return (
+            <VirtualView
+              key={key}
+              nativeID={key}
+              removeClippedSubviews={removeClippedSubviews}>
+              {FlingItemOverlay == null ? null : (
+                <FlingItemOverlay nativeID={key} />
+              )}
+              {children(item, key)}
+            </VirtualView>
+          );
+        },
+        [children, itemToKey, removeClippedSubviews],
+      ),
+    );
+
+    const mountedItemCount = Math.min(desiredItemCount, items.size);
+    const mountedItemViews = Array.from(
+      {length: mountedItemCount},
+      (_, index) => renderItem(items.at(index)),
+    );
+
+    const virtualItemCount = items.size - mountedItemCount;
+    const virtualItemSpacer = useMemo(
+      () =>
+        virtualItemCount === 0 ? null : (
+          <VirtualCollectionSpacer
+            nativeID={`${testID ?? ''}:Spacer`}
+            virtualItemCount={virtualItemCount}
+            onRenderMoreItems={(itemCount: number) => {
+              setDesiredItemCount(
+                prevElementCount => prevElementCount + itemCount,
+              );
+            }}
+          />
+        ),
+      [virtualItemCount, testID],
+    );
+
+    return (
+      <VirtualLayout {...layoutProps} spacer={virtualItemSpacer}>
+        {mountedItemViews}
+      </VirtualLayout>
+    );
+  }
+
+  function createSpacerView(spacerStyle: (itemCount: number) => ViewStyleProp) {
+    component SpacerView(
+      itemCount: number,
+      ref?: React.RefSetter<React.RefOf<VirtualView> | null>,
+      ...props: Omit<React.PropsOf<VirtualView>, 'ref'>
+    ) {
+      const HiddenVirtualView = useMemo(
+        () => createHiddenVirtualView(spacerStyle(itemCount)),
+        [itemCount],
+      );
+      return <HiddenVirtualView ref={ref} {...props} />;
+    }
+    return SpacerView;
+  }
+
+  const initialSpacerView = {
+    SpacerView: createSpacerView(initial.spacerStyle),
+  };
+
+  component VirtualCollectionSpacer(
+    nativeID: string,
+    virtualItemCount: number,
+
+    onRenderMoreItems: (itemCount: number) => void,
+  ) {
+    // NOTE: Store `SpacerView` in a wrapper object because otherwise, `useState`
+    // will confuse `SpacerView` (a component) as being an updater function.
+    const [{SpacerView}, setSpacerView] = useState(initialSpacerView);
+
+    const handleModeChange = (event: ModeChangeEvent) => {
+      if (event.mode === VirtualViewMode.Hidden) {
+        // This should never happen; this starts hidden and otherwise unmounts.
+        return;
+      }
+      const {itemCount, spacerStyle} = next(event);
+
+      // Refine the estimated item size when computing spacer size.
+      setSpacerView({
+        SpacerView: createSpacerView(spacerStyle),
+      });
+
+      // Render more items to fill `thresholdRect`.
+      onRenderMoreItems(Math.min(Math.ceil(itemCount), virtualItemCount));
+    };
+
+    return (
+      <SpacerView
+        itemCount={virtualItemCount}
+        nativeID={nativeID}
+        onModeChange={handleModeChange}
+      />
+    );
+  }
+
+  return VirtualCollectionView;
+}
+
+hook useMemoCallback<TInput extends interface {}, TOutput>(
+  callback: TInput => TOutput,
+): TInput => TOutput {
+  return useMemo(() => memoize(callback), [callback]);
+}
+
+function memoize<TInput extends interface {}, TOutput>(
+  callback: TInput => TOutput,
+): TInput => TOutput {
+  const cache = new WeakMap<TInput, TOutput>();
+  return (input: TInput) => {
+    let output = cache.get(input);
+    if (output == null) {
+      output = callback(input);
+      cache.set(input, output);
+    }
+    return output;
+  };
+}
+
+function defaultItemToKey(item: Item): string {
+  // $FlowExpectedError[prop-missing] - Flow cannot model this dynamic pattern.
+  const key = item.key;
+  if (typeof key !== 'string') {
+    throw new TypeError(
+      `Expected 'id' of item to be a string, got: ${typeof key}`,
+    );
+  }
+  return key;
+}

package/src/private/components/virtualcollection/column/VirtualColumn.js

@@ -0,0 +1,43 @@
+/**
+ * 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 {Item, VirtualCollection} from '../Virtual';
+
+import {createVirtualCollectionView} from '../VirtualCollectionView';
+import VirtualColumnGenerator from './VirtualColumnGenerator';
+import * as React from 'react';
+
+component VirtualColumnLayout(
+  children: ReadonlyArray<React.Node>,
+  spacer: React.Node,
+) {
+  return (
+    <>
+      {children}
+      {spacer}
+    </>
+  );
+}
+
+const VirtualColumn = createVirtualCollectionView(
+  VirtualColumnLayout,
+  VirtualColumnGenerator,
+);
+
+// TODO: Figure out component generic resolution.
+// @see https://fb.workplace.com/groups/flow/posts/29355518614070041
+// export default VirtualColumn as VirtualCollectionViewComponent<VirtualColumnLayoutProps>;
+export default VirtualColumn as component<+TItem extends Item>(
+  children: (item: TItem, key: string) => React.Node,
+  items: VirtualCollection<TItem>,
+  itemToKey?: (TItem) => string,
+  removeClippedSubviews?: boolean,
+  testID?: ?string,
+);

package/src/private/components/virtualcollection/column/VirtualColumnGenerator.js

@@ -0,0 +1,72 @@
+/**
+ * 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 ReadOnlyElement from '../../../webapis/dom/nodes/ReadOnlyElement';
+import type {ModeChangeEvent} from '../../virtualview/VirtualView';
+import type {VirtualCollectionGenerator} from '../VirtualCollectionView';
+
+import ReactNativeElement from '../../../webapis/dom/nodes/ReactNativeElement';
+import {
+  FALLBACK_ESTIMATED_HEIGHT,
+  INITIAL_NUM_TO_RENDER,
+} from '../FlingConstants';
+
+function isVirtualView(element: ReadOnlyElement) {
+  // True for `VirtualView` and `VirtualViewExperimental`.
+  return element.nodeName.startsWith('RN:VirtualView');
+}
+
+const VirtualColumnGenerator: VirtualCollectionGenerator = {
+  initial: {
+    itemCount: INITIAL_NUM_TO_RENDER,
+    spacerStyle: (itemCount: number) => ({
+      height: itemCount * FALLBACK_ESTIMATED_HEIGHT,
+    }),
+  },
+  next({target, targetRect, thresholdRect}: ModeChangeEvent) {
+    if (!(target instanceof ReactNativeElement)) {
+      throw new Error(
+        'Expected target to be a ReactNativeElement. VirtualColumn requires DOM APIs to be enabled in React Native.',
+      );
+    }
+
+    const heightToFill =
+      Math.min(
+        targetRect.y + targetRect.height,
+        thresholdRect.y + thresholdRect.height,
+      ) - Math.max(targetRect.y, thresholdRect.y);
+
+    // Estimate each item's size by averaging up to the 3 last items.
+    let previous: ReadOnlyElement = target;
+    let count = 0;
+    let maybePrevious = previous.previousElementSibling;
+    while (count < 3 && maybePrevious != null && isVirtualView(maybePrevious)) {
+      previous = maybePrevious;
+      count++;
+      maybePrevious = previous.previousElementSibling;
+    }
+
+    const itemHeight =
+      count > 0
+        ? (target.getBoundingClientRect().top -
+            previous.getBoundingClientRect().top) /
+          count
+        : FALLBACK_ESTIMATED_HEIGHT;
+
+    return {
+      itemCount: heightToFill / itemHeight,
+      spacerStyle: (itemCount: number) => ({
+        height: itemCount * itemHeight,
+      }),
+    };
+  },
+};
+
+export default VirtualColumnGenerator;

package/src/private/components/virtualcollection/debug/FlingItemOverlay.js

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+
+const FlingItemOverlay: ?component(nativeID: string) = null;
+
+export default FlingItemOverlay;

package/src/private/components/virtualcollection/dom/getScrollParent.js

@@ -0,0 +1,43 @@
+/**
+ * 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 ReactNativeElement from '../../../webapis/dom/nodes/ReactNativeElement';
+import isScrollableNode from './isScrollableNode';
+
+/**
+ * Finds the nearest ancestor of the supplied node that is a scrollable node.
+ *
+ * Unlike the web-equivalent function, the return type is nullable because the
+ * root is not an implicitly scrollable node.
+ */
+export default function getScrollParent(
+  node: ReactNativeElement,
+): ReactNativeElement | null {
+  let element: ReactNativeElement | null = node;
+  while (element != null) {
+    if (isScrollableNode(element)) {
+      return element;
+    }
+    const parent = element.parentElement;
+    // Currently, the only subclass of `ReadOnlyNode` is `ReactNativeElement`.
+    if (parent instanceof ReactNativeElement || parent == null) {
+      element = parent;
+    } else {
+      console.error(
+        'Expected `element.parentElement` to be `?ReactNativeElement`, got: %s',
+        parent,
+      );
+      element = null;
+    }
+    // So this is equivalent to a null check with type safety.
+    element = parent instanceof ReactNativeElement ? parent : null;
+  }
+  return null;
+}

package/src/private/components/virtualcollection/dom/isScrollableNode.js

@@ -0,0 +1,22 @@
+/**
+ * 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 ReactNativeElement from '../../../webapis/dom/nodes/ReactNativeElement';
+
+/**
+ * Checks whether the supplied node is a scrollable node, ignoring whether
+ * there is sufficient content to scroll or whether scrolling is disabled.
+ */
+export default function isScrollableNode(node: ReactNativeElement): boolean {
+  // Applies for vertical and horizontal `ScrollView` on both Android and iOS.
+  // The content container might have a different `nodeName`, but its parent
+  // always has this `nodeName`.
+  return node.nodeName === 'RN:ScrollView';
+}

package/src/private/components/virtualcollection/row/VirtualRow.js

@@ -0,0 +1,43 @@
+/**
+ * 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 {Item, VirtualCollection} from '../Virtual';
+
+import {createVirtualCollectionView} from '../VirtualCollectionView';
+import VirtualRowGenerator from './VirtualRowGenerator';
+import * as React from 'react';
+
+component VirtualRowLayout(
+  children: ReadonlyArray<React.Node>,
+  spacer: React.Node,
+) {
+  return (
+    <>
+      {children}
+      {spacer}
+    </>
+  );
+}
+
+const VirtualRow = createVirtualCollectionView(
+  VirtualRowLayout,
+  VirtualRowGenerator,
+);
+
+// TODO: Figure out component generic resolution.
+// @see https://fb.workplace.com/groups/flow/posts/29355518614070041
+// export default VirtualRow as VirtualCollectionViewComponent<VirtualRowLayoutProps>;
+export default VirtualRow as component<+TItem extends Item>(
+  children: (item: TItem, key: string) => React.Node,
+  items: VirtualCollection<TItem>,
+  itemToKey?: (TItem) => string,
+  removeClippedSubviews?: boolean,
+  testID?: ?string,
+);

package/src/private/components/virtualcollection/row/VirtualRowGenerator.js

@@ -0,0 +1,72 @@
+/**
+ * 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 ReadOnlyElement from '../../../webapis/dom/nodes/ReadOnlyElement';
+import type {ModeChangeEvent} from '../../virtualview/VirtualView';
+import type {VirtualCollectionGenerator} from '../VirtualCollectionView';
+
+import ReactNativeElement from '../../../webapis/dom/nodes/ReactNativeElement';
+import {
+  FALLBACK_ESTIMATED_WIDTH,
+  INITIAL_NUM_TO_RENDER,
+} from '../FlingConstants';
+
+function isVirtualView(element: ReadOnlyElement) {
+  // True for `VirtualView` and `VirtualViewExperimental`.
+  return element.nodeName.startsWith('RN:VirtualView');
+}
+
+const VirtualRowGenerator: VirtualCollectionGenerator = {
+  initial: {
+    itemCount: INITIAL_NUM_TO_RENDER,
+    spacerStyle: (itemCount: number) => ({
+      width: itemCount * FALLBACK_ESTIMATED_WIDTH,
+    }),
+  },
+  next({target, targetRect, thresholdRect}: ModeChangeEvent) {
+    if (!(target instanceof ReactNativeElement)) {
+      throw new Error(
+        'Expected target to be a ReactNativeElement. VirtualRow requires DOM APIs to be enabled in React Native.',
+      );
+    }
+
+    const widthToFill =
+      Math.min(
+        targetRect.x + targetRect.width,
+        thresholdRect.x + thresholdRect.width,
+      ) - Math.max(targetRect.x, thresholdRect.x);
+
+    // Estimate each item's size by averaging up to the 3 last items.
+    let previous: ReadOnlyElement = target;
+    let count = 0;
+    let maybePrevious = previous.previousElementSibling;
+    while (count < 3 && maybePrevious != null && isVirtualView(maybePrevious)) {
+      previous = maybePrevious;
+      count++;
+      maybePrevious = previous.previousElementSibling;
+    }
+
+    const itemWidth =
+      count > 0
+        ? (target.getBoundingClientRect().left -
+            previous.getBoundingClientRect().left) /
+          count
+        : FALLBACK_ESTIMATED_WIDTH;
+
+    return {
+      itemCount: widthToFill / itemWidth,
+      spacerStyle: (itemCount: number) => ({
+        width: itemCount * itemWidth,
+      }),
+    };
+  },
+};
+
+export default VirtualRowGenerator;

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

@@ -26,14 +26,14 @@ export type ReactRenderer = {
 };
 type AttachedRendererEventPayload = {id: number, renderer: ReactRenderer};
 
-const reactDevToolsHook = (window: any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
+const reactDevToolsHook = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
 invariant(
   Boolean(reactDevToolsHook),
   'getInspectorDataForViewAtPoint should not be used if React DevTools hook is not injected',
 );
 
 const renderers: Array<ReactRenderer> = Array.from(
-  (window: any).__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values(),
+  (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values(),
 );
 
 const appendRenderer = ({renderer}: AttachedRendererEventPayload) =>

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

@@ -44,7 +44,7 @@ function ensureExternalInspectionAPI(
       disable: onDisable,
     };
     // $FlowFixMe[prop-missing] Initializing global API for DevTools communication
-    (global: $FlowFixMe).__EXTERNAL_INSPECTION__ = api;
+    (global as $FlowFixMe).__EXTERNAL_INSPECTION__ = api;
     return api;
   }
   __EXTERNAL_INSPECTION__.enable = onEnable;

package/src/private/devsupport/devmenu/specs/NativeDevMenu.js

@@ -19,4 +19,4 @@ export interface Spec extends TurboModule {
   +setHotLoadingEnabled: (enabled: boolean) => void;
 }
 
-export default (TurboModuleRegistry.getEnforcing<Spec>('DevMenu'): Spec);
+export default TurboModuleRegistry.getEnforcing<Spec>('DevMenu') as Spec;

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

@@ -28,6 +28,6 @@ export interface Spec extends TurboModule {
   +getReloadAndProfileConfig: () => ReloadAndProfileConfig;
 }
 
-export default (TurboModuleRegistry.get<Spec>(
+export default TurboModuleRegistry.get<Spec>(
   'ReactDevToolsRuntimeSettingsModule',
-): ?Spec);
+) as ?Spec;

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

@@ -17,6 +17,6 @@ export interface Spec extends TurboModule {
   +getGlobalHookSettings: () => ?string;
 }
 
-export default (TurboModuleRegistry.get<Spec>(
+export default TurboModuleRegistry.get<Spec>(
   'ReactDevToolsSettingsManager',
-): ?Spec);
+) as ?Spec;