Add typings for React render callback children (#8109)

modules/react/src/deckgl.ts

@@ -30,7 +30,7 @@ import {
 import {Deck} from '@deck.gl/core';
 import useIsomorphicLayoutEffect from './utils/use-isomorphic-layout-effect';
 
-import extractJSXLayers from './utils/extract-jsx-layers';
+import extractJSXLayers, {DeckGLRenderCallback} from './utils/extract-jsx-layers';
 import positionChildrenUnderViews from './utils/position-children-under-views';
 import extractStyles from './utils/extract-styles';
 
@@ -58,7 +58,7 @@ export type DeckGLProps = Omit<
   Deck?: typeof Deck;
   width?: string | number;
   height?: string | number;
-  children?: React.ReactNode;
+  children?: React.ReactNode | DeckGLRenderCallback;
   ContextProvider?: React.Context<DeckGLContextValue>['Provider'];
 };
 

modules/react/src/utils/extract-jsx-layers.ts

@@ -3,10 +3,39 @@ import {createElement} from 'react';
 import {inheritsFrom} from './inherits-from';
 import {Layer, View} from '@deck.gl/core';
 import {isComponent} from './evaluate-children';
-import type {LayersList} from '@deck.gl/core';
+import type {LayersList, Viewport} from '@deck.gl/core';
+
+export type DeckGLRenderCallbackArgs = {
+  /**
+   * the left offset of the current view, in pixels
+   */
+  x: number;
+  /**
+   * the top offset of the current view, in pixels
+   */
+  y: number;
+  /**
+   * the width of the current view, in pixels
+   */
+  width: number;
+  /**
+   * the height of the current view, in pixels
+   */
+  height: number;
+  /**
+   * the view state of the current view
+   */
+  viewState: any;
+  /**
+   * the `Viewport` instance of the current view
+   */
+  viewport: Viewport;
+};
+
+export type DeckGLRenderCallback = (args: DeckGLRenderCallbackArgs) => React.ReactNode;
 
 // recursively wrap render callbacks in `View`
-function wrapInView(node: React.ReactNode): React.ReactNode {
+function wrapInView(node: React.ReactNode | DeckGLRenderCallback): React.ReactNode {
   if (typeof node === 'function') {
     // React.Children does not traverse functions.
     // All render callbacks must be protected under a <View>
@@ -33,7 +62,7 @@ export default function extractJSXLayers({
   layers = [],
   views = null
 }: {
-  children?: React.ReactNode;
+  children?: React.ReactNode | DeckGLRenderCallback;
   layers?: LayersList;
   views?: View | View[] | null;
 }): {