@deck.gl/react 8.8.0-alpha.5 → 8.8.0-beta.2

package/typed/utils/extract-styles.js

@@ -0,0 +1,32 @@
+const CANVAS_ONLY_STYLES = {
+    mixBlendMode: null
+};
+export default function extractStyles({ width, height, style }) {
+    // This styling is enforced for correct positioning with children
+    const containerStyle = {
+        position: 'absolute',
+        zIndex: 0,
+        left: 0,
+        top: 0,
+        width,
+        height
+    };
+    // Fill the container
+    const canvasStyle = {
+        left: 0,
+        top: 0
+    };
+    if (style) {
+        for (const key in style) {
+            if (key in CANVAS_ONLY_STYLES) {
+                // apply style to the canvas, but not deck's children, e.g. mix-blend-mode
+                canvasStyle[key] = style[key];
+            }
+            else {
+                // apply style to the container, e.g. position/flow settings
+                containerStyle[key] = style[key];
+            }
+        }
+    }
+    return { containerStyle, canvasStyle };
+}

package/typed/utils/inherits-from.d.ts

@@ -1,2 +1,2 @@
-export function inheritsFrom(Type: any, ParentType: any): boolean;
+export declare function inheritsFrom<T>(Type: any, ParentType: T): Type is T;
 //# sourceMappingURL=inherits-from.d.ts.map

package/typed/utils/inherits-from.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inherits-from.d.ts","sourceRoot":"","sources":["../../src/utils/inherits-from.js"],"names":[],"mappings":"AACA,kEAQC"}
+{"version":3,"file":"inherits-from.d.ts","sourceRoot":"","sources":["../../src/utils/inherits-from.ts"],"names":[],"mappings":"AACA,wBAAgB,YAAY,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC,CAQnE"}

package/typed/utils/inherits-from.js

@@ -0,0 +1,10 @@
+// Check if one JavaScript class inherits from another
+export function inheritsFrom(Type, ParentType) {
+    while (Type) {
+        if (Type === ParentType) {
+            return true;
+        }
+        Type = Object.getPrototypeOf(Type);
+    }
+    return false;
+}

package/typed/utils/position-children-under-views.d.ts

@@ -1,6 +1,15 @@
+import * as React from 'react';
+import type { Deck, DeckProps, Viewport } from '@deck.gl/core/typed';
+import type { EventManager } from 'mjolnir.js';
+export declare type DeckGLContextValue = {
+    viewport: Viewport;
+    container: HTMLElement;
+    eventManager: EventManager;
+    onViewStateChange: DeckProps['onViewStateChange'];
+};
 export default function positionChildrenUnderViews({ children, deck, ContextProvider }: {
-    children: any;
-    deck: any;
-    ContextProvider: any;
-}): any[];
+    children: React.ReactNode[];
+    deck?: Deck;
+    ContextProvider?: React.Context<DeckGLContextValue>['Provider'];
+}): React.ReactNode[];
 //# sourceMappingURL=position-children-under-views.d.ts.map

package/typed/utils/position-children-under-views.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position-children-under-views.d.ts","sourceRoot":"","sources":["../../src/utils/position-children-under-views.js"],"names":[],"mappings":"AAOA;;;;UA+EC"}
+{"version":3,"file":"position-children-under-views.d.ts","sourceRoot":"","sources":["../../src/utils/position-children-under-views.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAC;AAE7C,oBAAY,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,iBAAiB,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;CACnD,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,EACjD,QAAQ,EACR,IAAI,EACJ,eAAe,EAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,eAAe,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,UAAU,CAAC,CAAC;CACjE,GAAG,KAAK,CAAC,SAAS,EAAE,CAyFpB"}

package/typed/utils/position-children-under-views.js

@@ -0,0 +1,75 @@
+import { createElement } from 'react';
+import { View } from '@deck.gl/core';
+import { inheritsFrom } from './inherits-from';
+import evaluateChildren from './evaluate-children';
+// Iterate over views and reposition children associated with views
+// TODO - Can we supply a similar function for the non-React case?
+export default function positionChildrenUnderViews({ children, deck, ContextProvider }) {
+    const { viewManager } = deck || {};
+    if (!viewManager || !viewManager.views.length) {
+        return [];
+    }
+    const views = {};
+    const defaultViewId = viewManager.views[0].id;
+    // Sort children by view id
+    for (const child of children) {
+        // Unless child is a View, position / render as part of the default view
+        let viewId = defaultViewId;
+        let viewChildren = child;
+        if (inheritsFrom(child.type, View)) {
+            viewId = child.props.id || defaultViewId;
+            viewChildren = child.props.children;
+        }
+        const viewport = viewManager.getViewport(viewId);
+        const viewState = viewManager.getViewState(viewId);
+        // Drop (auto-hide) elements with viewId that are not matched by any current view
+        if (viewport) {
+            const { x, y, width, height } = viewport;
+            // Resolve potentially relative dimensions using the deck.gl container size
+            viewChildren = evaluateChildren(viewChildren, {
+                x,
+                y,
+                width,
+                height,
+                viewport,
+                viewState
+            });
+            if (!views[viewId]) {
+                views[viewId] = {
+                    viewport,
+                    children: []
+                };
+            }
+            views[viewId].children.push(viewChildren);
+        }
+    }
+    // Render views
+    return Object.keys(views).map(viewId => {
+        const { viewport, children: viewChildren } = views[viewId];
+        const { x, y, width, height } = viewport;
+        const style = {
+            position: 'absolute',
+            left: x,
+            top: y,
+            width,
+            height
+        };
+        const key = `view-${viewId}`;
+        // If children is passed as an array, React will throw the "each element in a list needs
+        // a key" warning. Sending each child as separate arguments removes this requirement.
+        const viewElement = createElement('div', { key, id: key, style }, ...viewChildren);
+        if (ContextProvider) {
+            const contextValue = {
+                viewport,
+                container: deck.canvas.offsetParent,
+                eventManager: deck.eventManager,
+                onViewStateChange: params => {
+                    params.viewId = viewId;
+                    deck._onViewStateChange(params);
+                }
+            };
+            return createElement(ContextProvider, { key, value: contextValue }, viewElement);
+        }
+        return viewElement;
+    });
+}

package/typed/utils/use-isomorphic-layout-effect.d.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 export default useIsomorphicLayoutEffect;
-declare const useIsomorphicLayoutEffect: any;
 //# sourceMappingURL=use-isomorphic-layout-effect.d.ts.map

package/typed/utils/use-isomorphic-layout-effect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-isomorphic-layout-effect.d.ts","sourceRoot":"","sources":["../../src/utils/use-isomorphic-layout-effect.js"],"names":[],"mappings":";AAIA,6CAA8F"}
+{"version":3,"file":"use-isomorphic-layout-effect.d.ts","sourceRoot":"","sources":["../../src/utils/use-isomorphic-layout-effect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAkB,MAAM,OAAO,CAAC;AAEjD,QAAA,MAAM,yBAAyB,kBAA8D,CAAC;AAE9F,eAAe,yBAAyB,CAAC"}

package/typed/utils/use-isomorphic-layout-effect.js

@@ -0,0 +1,5 @@
+// From https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts
+// useLayoutEffect but does not trigger warning in server-side rendering
+import { useEffect, useLayoutEffect } from 'react';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export default useIsomorphicLayoutEffect;

package/src/utils/evaluate-children.js

@@ -1,38 +0,0 @@
-import {cloneElement} from 'react';
-
-const MAP_STYLE = {position: 'absolute', zIndex: -1};
-
-export default function evaluateChildren(children, childProps) {
-  if (!children) {
-    return children;
-  }
-  if (typeof children === 'function') {
-    return children(childProps);
-  }
-  if (Array.isArray(children)) {
-    return children.map(child => evaluateChildren(child, childProps));
-  }
-
-  // Special treatment for react-map-gl's Map component
-  // to support shorthand use case <DeckGL><StaticMap /></DeckGL>
-  if (isReactMap(children)) {
-    // Place map under the canvas
-    childProps.style = MAP_STYLE;
-    return cloneElement(children, childProps);
-  }
-  if (needsDeckGLViewProps(children)) {
-    return cloneElement(children, childProps);
-  }
-  return children;
-}
-
-function isReactMap(child) {
-  const componentClass = child && child.type;
-  const componentProps = componentClass && componentClass.defaultProps;
-  return componentProps && componentProps.mapStyle;
-}
-
-function needsDeckGLViewProps(child) {
-  const componentClass = child && child.type;
-  return componentClass && componentClass.deckGLViewProps;
-}