@deck.gl/react 8.8.13 → 8.8.15

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/react",
   "description": "React Components for deck.gl",
   "license": "MIT",
-  "version": "8.8.13",
+  "version": "8.8.15",
   "publishConfig": {
     "access": "public"
   },
@@ -31,5 +31,5 @@
     "react": ">=16.3",
     "react-dom": ">=16.3"
   },
-  "gitHead": "663a5575e6359c499acaabfe57ee158f164b336c"
+  "gitHead": "c0b508f246014b2bd655de060066757ad8622261"
 }

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
-declare const useIsomorphicLayoutEffect: typeof useEffect;
+import { useLayoutEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 export default useIsomorphicLayoutEffect;
 //# 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.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAkB,MAAM,OAAO,CAAC;AAEjD,QAAA,MAAM,yBAAyB,kBAA8D,CAAC;AAE9F,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"use-isomorphic-layout-effect.d.ts","sourceRoot":"","sources":["../../src/utils/use-isomorphic-layout-effect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,eAAe,EAAC,MAAM,OAAO,CAAC;AAEjD,QAAA,MAAM,yBAAyB,wBAA8D,CAAC;AAE9F,eAAe,yBAAyB,CAAC"}

package/typed/deckgl.js

@@ -1,194 +0,0 @@
-// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-import { createElement, useRef, useState, useMemo, useEffect, useImperativeHandle, forwardRef } from 'react';
-import { Deck } from '@deck.gl/core';
-import useIsomorphicLayoutEffect from './utils/use-isomorphic-layout-effect';
-import extractJSXLayers from './utils/extract-jsx-layers';
-import positionChildrenUnderViews from './utils/position-children-under-views';
-import extractStyles from './utils/extract-styles';
-/* eslint-disable max-statements, accessor-pairs */
-function getRefHandles(thisRef) {
-    const handles = {
-        pickObject: opts => thisRef.deck.pickObject(opts),
-        pickMultipleObjects: opts => thisRef.deck.pickMultipleObjects(opts),
-        pickObjects: opts => thisRef.deck.pickObjects(opts)
-    };
-    Object.defineProperty(handles, 'deck', {
-        get: () => thisRef.deck
-    });
-    return handles;
-}
-function redrawDeck(thisRef) {
-    if (thisRef.redrawReason) {
-        // Only redraw if we have received a dirty flag
-        thisRef.deck._drawLayers(thisRef.redrawReason);
-        thisRef.redrawReason = null;
-    }
-}
-function createDeckInstance(thisRef, props) {
-    // Allows a subclass of Deck to be used
-    // TODO - update propTypes / defaultProps?
-    const DeckClass = props.Deck || Deck;
-    const deck = new DeckClass({
-        ...props,
-        style: null,
-        width: '100%',
-        height: '100%',
-        // The Deck's animation loop is independent from React's render cycle, causing potential
-        // synchronization issues. We provide this custom render function to make sure that React
-        // and Deck update on the same schedule.
-        _customRender: redrawReason => {
-            // Save the dirty flag for later
-            thisRef.redrawReason = redrawReason;
-            // Viewport/view state is passed to child components as props.
-            // If they have changed, we need to trigger a React rerender to update children props.
-            const viewports = deck.viewManager.getViewports();
-            if (thisRef.lastRenderedViewports !== viewports) {
-                // Viewports have changed, update children props first.
-                // This will delay the Deck canvas redraw till after React update (in useLayoutEffect)
-                // so that the canvas does not get rendered before the child components update.
-                thisRef.forceUpdate(v => v + 1);
-            }
-            else {
-                redrawDeck(thisRef);
-            }
-        }
-    });
-    return deck;
-}
-const DeckGL = forwardRef((props, ref) => {
-    // A reference to persistent states
-    const _thisRef = useRef({});
-    const thisRef = _thisRef.current;
-    // A mechanism to force redraw
-    const [version, setVersion] = useState(0);
-    thisRef.forceUpdate = setVersion;
-    // DOM refs
-    const containerRef = useRef(null);
-    const canvasRef = useRef(null);
-    // extract any deck.gl layers masquerading as react elements from props.children
-    const jsxProps = useMemo(() => extractJSXLayers(props), [props.layers, props.views, props.children]);
-    // Callbacks
-    let inRender = true;
-    const handleViewStateChange = params => {
-        if (inRender && props.viewState) {
-            // Callback may invoke a state update. Defer callback to after render() to avoid React error
-            // In React StrictMode, render is executed twice and useEffect/useLayoutEffect is executed once
-            // Store deferred parameters in ref so that we can access it in another render
-            thisRef.viewStateUpdateRequested = params;
-            return null;
-        }
-        thisRef.viewStateUpdateRequested = null;
-        return props.onViewStateChange(params);
-    };
-    const handleInteractionStateChange = params => {
-        if (inRender) {
-            // Callback may invoke a state update. Defer callback to after render() to avoid React error
-            // In React StrictMode, render is executed twice and useEffect/useLayoutEffect is executed once
-            // Store deferred parameters in ref so that we can access it in another render
-            thisRef.interactionStateUpdateRequested = params;
-        }
-        else {
-            thisRef.interactionStateUpdateRequested = null;
-            props.onInteractionStateChange(params);
-        }
-    };
-    // Update Deck's props. If Deck needs redraw, this will trigger a call to `_customRender` in
-    // the next animation frame.
-    // Needs to be called both from initial mount, and when new props are received
-    const deckProps = useMemo(() => {
-        const forwardProps = {
-            ...props,
-            // Override user styling props. We will set the canvas style in render()
-            style: null,
-            width: '100%',
-            height: '100%',
-            layers: jsxProps.layers,
-            views: jsxProps.views,
-            onViewStateChange: handleViewStateChange,
-            onInteractionStateChange: handleInteractionStateChange
-        };
-        // The defaultValue for _customRender is null, which would overwrite the definition
-        // of _customRender. Remove to avoid frequently redeclaring the method here.
-        delete forwardProps._customRender;
-        if (thisRef.deck) {
-            thisRef.deck.setProps(forwardProps);
-        }
-        return forwardProps;
-    }, [props]);
-    useEffect(() => {
-        thisRef.deck = createDeckInstance(thisRef, {
-            ...deckProps,
-            parent: containerRef.current,
-            canvas: canvasRef.current
-        });
-        return () => thisRef.deck.finalize();
-    }, []);
-    useIsomorphicLayoutEffect(() => {
-        // render has just been called. The children are positioned based on the current view state.
-        // Redraw Deck canvas immediately, if necessary, using the current view state, so that it
-        // matches the child components.
-        redrawDeck(thisRef);
-        // Execute deferred callbacks
-        const { viewStateUpdateRequested, interactionStateUpdateRequested } = thisRef;
-        if (viewStateUpdateRequested) {
-            handleViewStateChange(viewStateUpdateRequested);
-        }
-        if (interactionStateUpdateRequested) {
-            handleInteractionStateChange(interactionStateUpdateRequested);
-        }
-    });
-    useImperativeHandle(ref, () => getRefHandles(thisRef), []);
-    const { viewManager } = thisRef.deck || {};
-    const currentViewports = viewManager && viewManager.getViewports();
-    const { ContextProvider, width, height, id, style } = props;
-    const { containerStyle, canvasStyle } = useMemo(() => extractStyles({ width, height, style }), [width, height, style]);
-    // Props changes may lead to 3 types of updates:
-    // 1. Only the WebGL canvas - updated in Deck's render cycle (next animation frame)
-    // 2. Only the DOM - updated in React's lifecycle (now)
-    // 3. Both the WebGL canvas and the DOM - defer React rerender to next animation frame just
-    //    before Deck redraw to ensure perfect synchronization & avoid excessive redraw
-    //    This is because multiple changes may happen to Deck between two frames e.g. transition
-    if ((!thisRef.viewStateUpdateRequested && thisRef.lastRenderedViewports === currentViewports) || // case 2
-        thisRef.version !== version // case 3 just before deck redraws
-    ) {
-        thisRef.lastRenderedViewports = currentViewports;
-        thisRef.version = version;
-        // Render the background elements (typically react-map-gl instances)
-        // using the view descriptors
-        const childrenUnderViews = positionChildrenUnderViews({
-            children: jsxProps.children,
-            deck: thisRef.deck,
-            ContextProvider
-        });
-        const canvas = createElement('canvas', {
-            key: 'canvas',
-            id: id || 'deckgl-overlay',
-            ref: canvasRef,
-            style: canvasStyle
-        });
-        // Render deck.gl as the last child
-        thisRef.control = createElement('div', { id: `${id || 'deckgl'}-wrapper`, ref: containerRef, style: containerStyle }, [canvas, childrenUnderViews]);
-    }
-    inRender = false;
-    return thisRef.control;
-});
-DeckGL.defaultProps = Deck.defaultProps;
-export default DeckGL;

package/typed/index.js

@@ -1,21 +0,0 @@
-// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-export { default as DeckGL } from './deckgl';
-export { default } from './deckgl';

package/typed/utils/evaluate-children.js

@@ -1,33 +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;
-}

package/typed/utils/extract-jsx-layers.js

@@ -1,77 +0,0 @@
-import React, { createElement } from 'react';
-import { inheritsFrom } from './inherits-from';
-import { Layer, View } from '@deck.gl/core';
-// recursively wrap render callbacks in `View`
-function wrapInView(node) {
-    if (!node) {
-        return node;
-    }
-    if (typeof node === 'function') {
-        // React.Children does not traverse functions.
-        // All render callbacks must be protected under a <View>
-        return createElement(View, {}, node);
-    }
-    if (Array.isArray(node)) {
-        return node.map(wrapInView);
-    }
-    if (node.type === React.Fragment) {
-        return wrapInView(node.props.children);
-    }
-    if (inheritsFrom(node.type, View)) {
-        return node;
-    }
-    return node;
-}
-// extracts any deck.gl layers masquerading as react elements from props.children
-export default function extractJSXLayers({ children, layers, views }) {
-    const reactChildren = []; // extract real react elements (i.e. not deck.gl layers)
-    const jsxLayers = []; // extracted layer from react children, will add to deck.gl layer array
-    const jsxViews = {};
-    // React.children
-    React.Children.forEach(wrapInView(children), reactElement => {
-        if (reactElement) {
-            // For some reason Children.forEach doesn't filter out `null`s
-            const ElementType = reactElement.type;
-            if (inheritsFrom(ElementType, Layer)) {
-                const layer = createLayer(ElementType, reactElement.props);
-                jsxLayers.push(layer);
-            }
-            else {
-                reactChildren.push(reactElement);
-            }
-            // empty id => default view
-            if (ElementType !== View && inheritsFrom(ElementType, View) && reactElement.props.id) {
-                const view = new ElementType(reactElement.props);
-                jsxViews[view.id] = view;
-            }
-        }
-    });
-    // Avoid modifying views if no JSX views were found
-    if (Object.keys(jsxViews).length > 0) {
-        // If a view is specified in both views prop and JSX, use the one in views
-        if (Array.isArray(views)) {
-            views.forEach(view => {
-                jsxViews[view.id] = view;
-            });
-        }
-        else if (views) {
-            jsxViews[views.id] = views;
-        }
-        views = Object.values(jsxViews);
-    }
-    // Avoid modifying layers array if no JSX layers were found
-    layers = jsxLayers.length > 0 ? [...jsxLayers, ...layers] : layers;
-    return { layers, children: reactChildren, views };
-}
-function createLayer(LayerType, reactProps) {
-    const props = {};
-    // Layer.defaultProps is treated as ReactElement.defaultProps and merged into react props
-    // Remove them
-    const defaultProps = LayerType.defaultProps || {};
-    for (const key in reactProps) {
-        if (defaultProps[key] !== reactProps[key]) {
-            props[key] = reactProps[key];
-        }
-    }
-    return new LayerType(props);
-}

package/typed/utils/extract-styles.js

@@ -1,32 +0,0 @@
-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.js

@@ -1,10 +0,0 @@
-// 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.js

@@ -1,75 +0,0 @@
-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.js

@@ -1,5 +0,0 @@
-// 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;