@planet/maps 10.3.0 → 11.0.0-dev.1740075628963

package/Map.js

@@ -15,7 +15,8 @@
  */
 import OLMap from 'ol/Map.js';
 import propTypes from 'prop-types';
-import {Component, createElement, createRef, forwardRef} from 'react';
+import {MAP} from './internal/config.js';
+import {createElement, useCallback, useEffect, useRef} from 'react';
 import {render, updateInstanceFromProps} from './internal/render.js';
 
 const defaultDivStyle = {
@@ -23,38 +24,51 @@ const defaultDivStyle = {
   width: '100%',
 };
 
-class Map extends Component {
-  constructor(props) {
-    super(props);
+export default function Map({
+  id,
+  style = defaultDivStyle,
+  className,
+  children,
+  ref,
+  options,
+  ...mapProps
+}) {
+  const targetRef = useRef();
+  const mapRef = useRef();
 
-    this.targetRef = createRef();
+  const getMap = useCallback(() => {
+    // avoid creating new map when options object is different
+    if (mapRef.current) {
+      return mapRef.current;
+    }
+
+    const map = new OLMap(options);
+    mapRef.current = map;
+    return map;
+  }, [options]);
 
-    const {id, style, className, innerRef, options, ...mapProps} = props;
-    this.map = new OLMap({...options});
-    if (innerRef) {
-      if (typeof innerRef === 'function') {
-        innerRef(this.map);
+  useEffect(() => {
+    const map = getMap();
+    map.setTarget(targetRef.current);
+  }, [getMap]);
+
+  useEffect(() => {
+    const map = getMap();
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(map);
       } else {
-        innerRef.current = this.map;
+        ref.current = map;
       }
     }
-    updateInstanceFromProps(this.map, mapProps);
-  }
-
-  componentDidMount() {
-    this.map.setTarget(this.targetRef.current);
-    render(this.props.children, this.map);
-  }
-
-  componentDidUpdate() {
-    // TODO: apply map prop changes
-    render(this.props.children, this.map);
-  }
+    if (!mapRef.current) {
+      return;
+    }
+    updateInstanceFromProps(map, MAP, {}, mapProps);
+    render(children, map);
+  }, [children, getMap, mapProps, ref]);
 
-  render() {
-    const {id, style = defaultDivStyle, className} = this.props;
-    return createElement('div', {ref: this.targetRef, id, style, className});
-  }
+  return createElement('div', {ref: targetRef, id, style, className});
 }
 
 Map.propTypes = {
@@ -62,12 +76,9 @@ Map.propTypes = {
   id: propTypes.string,
   style: propTypes.object,
   children: propTypes.node,
-  innerRef: propTypes.oneOfType([
+  options: propTypes.object,
+  ref: propTypes.oneOfType([
     propTypes.func,
     propTypes.shape({current: propTypes.any}),
   ]),
 };
-
-export default forwardRef((props, ref) =>
-  createElement(Map, {innerRef: ref, ...props}),
-);

package/Overlay.js

@@ -15,10 +15,8 @@
  */
 import OLOverlay from 'ol/Overlay.js';
 import {OVERLAY} from './internal/config.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Overlay = forwardRef((props, ref) => {
-  return createElement(OVERLAY, {cls: OLOverlay, ref, ...props});
-});
-
-export default Overlay;
+export default function Overlay(props) {
+  return createElement(OVERLAY, {cls: OLOverlay, ...props});
+}

package/View.js

@@ -15,10 +15,8 @@
  */
 import OLView from 'ol/View.js';
 import {VIEW} from './internal/config.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const View = forwardRef((props, ref) => {
-  return createElement(VIEW, {cls: OLView, ref, ...props});
-});
-
-export default View;
+export default function View(props) {
+  return createElement(VIEW, {cls: OLView, ...props});
+}

package/control/Attribution.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLAttribution from 'ol/control/Attribution.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Attribution = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLAttribution, ref, ...props});
-});
-
-export default Attribution;
+export default function Attribution(props) {
+  return createElement('control', {cls: OLAttribution, ...props});
+}

package/control/Control.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLControl from 'ol/control/Control.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Control = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLControl, ref, ...props});
-});
-
-export default Control;
+export default function Control(props) {
+  return createElement('control', {cls: OLControl, ...props});
+}

package/control/FullScreen.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLFullScreen from 'ol/control/FullScreen.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const FullScreen = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLFullScreen, ref, ...props});
-});
-
-export default FullScreen;
+export default function FullScreen(props) {
+  return createElement('control', {cls: OLFullScreen, ...props});
+}

package/control/MousePosition.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLMousePosition from 'ol/control/MousePosition.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const MousePosition = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLMousePosition, ref, ...props});
-});
-
-export default MousePosition;
+export default function MousePosition(props) {
+  return createElement('control', {cls: OLMousePosition, ...props});
+}

package/control/OverviewMap.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLOverviewMap from 'ol/control/OverviewMap.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const OverviewMap = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLOverviewMap, ref, ...props});
-});
-
-export default OverviewMap;
+export default function OverviewMap(props) {
+  return createElement('control', {cls: OLOverviewMap, ...props});
+}

package/control/Rotate.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLRotate from 'ol/control/Rotate.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Rotate = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLRotate, ref, ...props});
-});
-
-export default Rotate;
+export default function Rotate(props) {
+  return createElement('control', {cls: OLRotate, ...props});
+}

package/control/ScaleLine.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLScaleLine from 'ol/control/ScaleLine.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const ScaleLine = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLScaleLine, ref, ...props});
-});
-
-export default ScaleLine;
+export default function ScaleLine(props) {
+  return createElement('control', {cls: OLScaleLine, ...props});
+}

package/control/Zoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLZoom from 'ol/control/Zoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Zoom = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLZoom, ref, ...props});
-});
-
-export default Zoom;
+export default function Zoom(props) {
+  return createElement('control', {cls: OLZoom, ...props});
+}

package/control/ZoomSlider.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLZoomSlider from 'ol/control/ZoomSlider.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const ZoomSlider = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLZoomSlider, ref, ...props});
-});
-
-export default ZoomSlider;
+export default function ZoomSlider(props) {
+  return createElement('control', {cls: OLZoomSlider, ...props});
+}

package/control/ZoomToExtent.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLZoomToExtent from 'ol/control/ZoomToExtent.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const ZoomToExtent = forwardRef((props, ref) => {
-  return createElement('control', {cls: OLZoomToExtent, ref, ...props});
-});
-
-export default ZoomToExtent;
+export default function ZoomToExtent(props) {
+  return createElement('control', {cls: OLZoomToExtent, ...props});
+}

package/interaction/DblClickDragZoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDblClickDragZoom from 'ol/interaction/DblClickDragZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DblClickDragZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDblClickDragZoom, ref, ...props});
-});
-
-export default DblClickDragZoom;
+export default function DblClickDragZoom(props) {
+  return createElement('interaction', {cls: OLDblClickDragZoom, ...props});
+}

package/interaction/DoubleClickZoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDoubleClickZoom from 'ol/interaction/DoubleClickZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DoubleClickZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDoubleClickZoom, ref, ...props});
-});
-
-export default DoubleClickZoom;
+export default function DoubleClickZoom(props) {
+  return createElement('interaction', {cls: OLDoubleClickZoom, ...props});
+}

package/interaction/DragAndDrop.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDragAndDrop from 'ol/interaction/DragAndDrop.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragAndDrop = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDragAndDrop, ref, ...props});
-});
-
-export default DragAndDrop;
+export default function DragAndDrop(props) {
+  return createElement('interaction', {cls: OLDragAndDrop, ...props});
+}

package/interaction/DragBox.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDragBox from 'ol/interaction/DragBox.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragBox = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDragBox, ref, ...props});
-});
-
-export default DragBox;
+export default function DragBox(props) {
+  return createElement('interaction', {cls: OLDragBox, ...props});
+}

package/interaction/DragPan.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDragPan from 'ol/interaction/DragPan.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragPan = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDragPan, ref, ...props});
-});
-
-export default DragPan;
+export default function DragPan(props) {
+  return createElement('interaction', {cls: OLDragPan, ...props});
+}

package/interaction/DragRotate.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDragRotate from 'ol/interaction/DragRotate.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragRotate = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDragRotate, ref, ...props});
-});
-
-export default DragRotate;
+export default function DragRotate(props) {
+  return createElement('interaction', {cls: OLDragRotate, ...props});
+}

package/interaction/DragRotateAndZoom.js

@@ -15,14 +15,8 @@
  * limitations under the License.
  */
 import OLDragRotateAndZoom from 'ol/interaction/DragRotateAndZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragRotateAndZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {
-    cls: OLDragRotateAndZoom,
-    ref,
-    ...props,
-  });
-});
-
-export default DragRotateAndZoom;
+export default function DragRotateAndZoom(props) {
+  return createElement('interaction', {cls: OLDragRotateAndZoom, ...props});
+}

package/interaction/DragZoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDragZoom from 'ol/interaction/DragZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const DragZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDragZoom, ref, ...props});
-});
-
-export default DragZoom;
+export default function DragZoom(props) {
+  return createElement('interaction', {cls: OLDragZoom, ...props});
+}

package/interaction/Draw.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLDraw from 'ol/interaction/Draw.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Draw = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLDraw, ref, ...props});
-});
-
-export default Draw;
+export default function Draw(props) {
+  return createElement('interaction', {cls: OLDraw, ...props});
+}

package/interaction/Extent.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLExtent from 'ol/interaction/Extent.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Extent = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLExtent, ref, ...props});
-});
-
-export default Extent;
+export default function Extent(props) {
+  return createElement('interaction', {cls: OLExtent, ...props});
+}

package/interaction/Interaction.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLInteraction from 'ol/interaction/Interaction.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Interaction = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLInteraction, ref, ...props});
-});
-
-export default Interaction;
+export default function Interaction(props) {
+  return createElement('interaction', {cls: OLInteraction, ...props});
+}

package/interaction/KeyboardPan.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLKeyboardPan from 'ol/interaction/KeyboardPan.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const KeyboardPan = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLKeyboardPan, ref, ...props});
-});
-
-export default KeyboardPan;
+export default function KeyboardPan(props) {
+  return createElement('interaction', {cls: OLKeyboardPan, ...props});
+}

package/interaction/KeyboardZoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLKeyboardZoom from 'ol/interaction/KeyboardZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const KeyboardZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLKeyboardZoom, ref, ...props});
-});
-
-export default KeyboardZoom;
+export default function KeyboardZoom(props) {
+  return createElement('interaction', {cls: OLKeyboardZoom, ...props});
+}

package/interaction/Link.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLLink from 'ol/interaction/Link.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Link = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLLink, ref, ...props});
-});
-
-export default Link;
+export default function Link(props) {
+  return createElement('interaction', {cls: OLLink, ...props});
+}

package/interaction/Modify.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLModify from 'ol/interaction/Modify.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Modify = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLModify, ref, ...props});
-});
-
-export default Modify;
+export default function Modify(props) {
+  return createElement('interaction', {cls: OLModify, ...props});
+}

package/interaction/MouseWheelZoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLMouseWheelZoom from 'ol/interaction/MouseWheelZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const MouseWheelZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLMouseWheelZoom, ref, ...props});
-});
-
-export default MouseWheelZoom;
+export default function MouseWheelZoom(props) {
+  return createElement('interaction', {cls: OLMouseWheelZoom, ...props});
+}

package/interaction/PinchRotate.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLPinchRotate from 'ol/interaction/PinchRotate.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const PinchRotate = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLPinchRotate, ref, ...props});
-});
-
-export default PinchRotate;
+export default function PinchRotate(props) {
+  return createElement('interaction', {cls: OLPinchRotate, ...props});
+}

package/interaction/PinchZoom.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLPinchZoom from 'ol/interaction/PinchZoom.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const PinchZoom = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLPinchZoom, ref, ...props});
-});
-
-export default PinchZoom;
+export default function PinchZoom(props) {
+  return createElement('interaction', {cls: OLPinchZoom, ...props});
+}

package/interaction/Pointer.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLPointer from 'ol/interaction/Pointer.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Pointer = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLPointer, ref, ...props});
-});
-
-export default Pointer;
+export default function Pointer(props) {
+  return createElement('interaction', {cls: OLPointer, ...props});
+}

package/interaction/Property.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLProperty from 'ol/interaction/Property.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Property = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLProperty, ref, ...props});
-});
-
-export default Property;
+export default function Property(props) {
+  return createElement('interaction', {cls: OLProperty, ...props});
+}

package/interaction/Select.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLSelect from 'ol/interaction/Select.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Select = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLSelect, ref, ...props});
-});
-
-export default Select;
+export default function Select(props) {
+  return createElement('interaction', {cls: OLSelect, ...props});
+}