Skip to content

Commit

Permalink
Add typings for React render callback children (#8109)
Browse files Browse the repository at this point in the history
  • Loading branch information
mz8i authored Sep 13, 2023
1 parent a5d6e87 commit 247e9ef
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 5 deletions.
4 changes: 2 additions & 2 deletions modules/react/src/deckgl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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'];
};

Expand Down
35 changes: 32 additions & 3 deletions modules/react/src/utils/extract-jsx-layers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -33,7 +62,7 @@ export default function extractJSXLayers({
layers = [],
views = null
}: {
children?: React.ReactNode;
children?: React.ReactNode | DeckGLRenderCallback;
layers?: LayersList;
views?: View | View[] | null;
}): {
Expand Down

0 comments on commit 247e9ef

Please sign in to comment.