v3.0.2

PaulLeCam · Nov 8, 2020 · 8ca7548 · 8ca7548
1 parent 116a8f9
commit 8ca7548
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 105 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## v3.0.2 (2020-11-08)
+
+Further fixes for panes support
+
 ## v3.0.1 (2020-11-07)
 
 - Fixed `pane` prop support

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-leaflet/core",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React Leaflet core",
   "main": "cjs/index.js",
   "module": "esm/index.js",

diff --git a/packages/core/src/path.ts b/packages/core/src/path.ts
@@ -5,6 +5,7 @@ import { useLeafletContext } from './context'
 import { LeafletElement, ElementHook } from './element'
 import { useEventHandlers } from './events'
 import { InteractiveLayerProps, useLayerLifecycle } from './layer'
+import { withPane } from './pane'
 
 export interface PathProps extends InteractiveLayerProps {
   pathOptions?: PathOptions
@@ -34,7 +35,7 @@ export function createPathHook<
 >(useElement: ElementHook<E, P>) {
   return function usePath(props: P): ReturnType<ElementHook<E, P>> {
     const context = useLeafletContext()
-    const elementRef = useElement(props, context)
+    const elementRef = useElement(withPane(props, context), context)
 
     useEventHandlers(elementRef.current, props.eventHandlers)
     useLayerLifecycle(elementRef.current, context)

diff --git a/packages/react-leaflet/package.json b/packages/react-leaflet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "React components for Leaflet maps",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -43,7 +43,7 @@
     "umd/*"
   ],
   "dependencies": {
-    "@react-leaflet/core": "^1.0.0"
+    "@react-leaflet/core": "^1.0.2"
   },
   "peerDependencies": {
     "leaflet": "^1.7.1",

diff --git a/packages/react-leaflet/src/Pane.tsx b/packages/react-leaflet/src/Pane.tsx
@@ -1,16 +1,11 @@
 import {
+  LeafletContextInterface,
   LeafletProvider,
   addClassName,
-  removeClassName,
   useLeafletContext,
 } from '@react-leaflet/core'
-import React, {
-  CSSProperties,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react'
+import React, { CSSProperties, ReactNode, useEffect, useMemo } from 'react'
+import { createPortal } from 'react-dom'
 
 const DEFAULT_PANES = [
   'mapPane',
@@ -22,14 +17,6 @@ const DEFAULT_PANES = [
   'tooltipPane',
 ]
 
-const PANE_STYLES: CSSProperties = {
-  position: 'absolute',
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-}
-
 function omitPane(obj: Record<string, unknown>, pane: string) {
   const { [pane]: _p, ...others } = obj
   return others
@@ -43,93 +30,71 @@ export interface PaneProps {
   style?: CSSProperties
 }
 
-export function Pane(props: PaneProps) {
-  const context = useLeafletContext()
-  const paneElementRef = useRef<HTMLElement | null>(null)
-  const propsRef = useRef<PaneProps>(props)
+function createPane(
+  props: PaneProps,
+  context: LeafletContextInterface,
+): HTMLElement {
+  const name = props.name
 
-  function applyStyles(paneElement: HTMLElement) {
-    if (props.className != null) {
-      addClassName(paneElement, props.className)
-    }
-    if (props.style != null) {
-      Object.keys(props.style).forEach((key) => {
-        // @ts-ignore
-        paneElement.style[key] = props.style[key]
-      })
-    }
+  if (DEFAULT_PANES.indexOf(name) !== -1) {
+    throw new Error(
+      `You must use a unique name for a pane that is not a default Leaflet pane: ${name}`,
+    )
+  }
+  if (context.map.getPane(name) != null) {
+    throw new Error(`A pane with this name already exists: ${name}`)
   }
 
-  function createPane() {
-    const name = props.name
+  const parentPaneName = props.pane ?? context.pane
+  const parentPane = parentPaneName
+    ? context.map.getPane(parentPaneName)
+    : undefined
+  const element = context.map.createPane(name, parentPane)
 
-    if (DEFAULT_PANES.indexOf(name) !== -1) {
-      throw new Error(
-        `You must use a unique name for a pane that is not a default Leaflet pane: ${name}`,
-      )
-    }
-    if (context.map.getPane(name) != null) {
-      throw new Error(`A pane with this name already exists: ${name}`)
-    }
-
-    const parentPane = context.pane
-      ? context.map.getPane(context.pane)
-      : undefined
-    paneElementRef.current = context.map.createPane(name, parentPane)
-    applyStyles(paneElementRef.current)
+  if (props.className != null) {
+    addClassName(element, props.className)
+  }
+  if (props.style != null) {
+    Object.keys(props.style).forEach((key) => {
+      // @ts-ignore
+      element.style[key] = props.style[key]
+    })
   }
 
-  function removePane(name: string) {
-    const pane = context.map.getPane(name)
-    pane?.remove?.()
+  return element
+}
+
+export function Pane(props: PaneProps) {
+  const context = useLeafletContext()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const paneElement = useMemo(() => createPane(props, context), [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const newContext = useMemo(() => ({ ...context, pane: props.name }), [])
+
+  useEffect(() => {
+    return function removeCreatedPane() {
+      const pane = context.map.getPane(props.name)
+      pane?.remove?.()
 
-    // @ts-ignore map internals
-    if (context.map._panes != null) {
-      // @ts-ignore map internals
-      context.map._panes = omitPane(context.map._panes, name)
       // @ts-ignore map internals
-      context.map._paneRenderers = omitPane(
+      if (context.map._panes != null) {
         // @ts-ignore map internals
-        context.map._paneRenderers,
-        name,
-      )
-    }
-  }
-
-  useEffect(function handlePane() {
-    if (paneElementRef.current === null) {
-      createPane()
-    } else if (props !== propsRef.current) {
-      if (props.name === propsRef.current.name) {
-        // Remove the previous css class name from the pane if it has changed.
-        // setStyle() will take care of adding in the updated className
-        if (
-          propsRef.current.className &&
-          props.className !== propsRef.current.className
-        ) {
-          removeClassName(paneElementRef.current, propsRef.current.className)
-        }
-        // Update the pane's DOM node style and class
-        applyStyles(paneElementRef.current)
-      } else {
-        removePane(propsRef.current.name)
-        createPane()
+        context.map._panes = omitPane(context.map._panes, props.name)
+        // @ts-ignore map internals
+        context.map._paneRenderers = omitPane(
+          // @ts-ignore map internals
+          context.map._paneRenderers,
+          props.name,
+        )
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-    return function removeCreatedPane() {
-      removePane(props.name)
-    }
-  })
-
-  const newContext = useMemo(() => ({ ...context, pane: props.name }), [
-    context,
-    props.name,
-  ])
-
-  return props.children ? (
-    <LeafletProvider value={newContext}>
-      <div style={PANE_STYLES}>{props.children}</div>
-    </LeafletProvider>
-  ) : null
+  return props.children != null
+    ? createPortal(
+        <LeafletProvider value={newContext}>{props.children}</LeafletProvider>,
+        paneElement,
+      )
+    : null
 }
diff --git a/packages/website/docs/api-components.md b/packages/website/docs/api-components.md
@@ -477,7 +477,7 @@ The `name` prop must be unique to the pane and different from the [default Leafl
 | Prop        | Type            | Required | Mutable | Behavior                                     |
 | ----------- | --------------- | -------- | ------- | -------------------------------------------- |
 | `children`  | `ReactNode`     | No       | **Yes** | [ParentComponent](#parentcomponent-behavior) |
-| `className` | `string`        | No       | **Yes** |
+| `className` | `string`        | No       | No      |
 | `name`      | `string`        | **Yes**  | No      |
 | `pane`      | `string`        | No       | No      | [Pane](#pane-behavior)                       |
-| `style`     | `CSSProperties` | No       | **Yes** |
+| `style`     | `CSSProperties` | No       | No      |
diff --git a/packages/website/docs/example-panes.md b/packages/website/docs/example-panes.md
@@ -14,19 +14,19 @@ const inner = [
 
 function BlinkingPane() {
   const [render, setRender] = useState(true)
-  const timer = useRef()
+  const timerRef = useRef()
   useEffect(() => {
-    timer.ref = setInterval(() => {
+    timerRef.current = setInterval(() => {
       setRender((r) => !r)
     }, 5000)
     return () => {
-      clearInterval(timer.ref)
+      clearInterval(timerRef.current)
     }
   }, [])
 
   return render ? (
     <Pane name="cyan-rectangle" style={{ zIndex: 500 }}>
-      <Rectangle bounds={outer} color="cyan" />
+      <Rectangle bounds={outer} pathOptions={{ color: 'cyan' }} />
     </Pane>
   ) : null
 }
@@ -39,9 +39,9 @@ render(
     />
     <BlinkingPane />
     <Pane name="yellow-rectangle" style={{ zIndex: 499 }}>
-      <Rectangle bounds={inner} color="yellow" />
+      <Rectangle bounds={inner} pathOptions={{ color: 'yellow' }} />
       <Pane name="purple-rectangle">
-        <Rectangle bounds={outer} color="purple" />
+        <Rectangle bounds={outer} pathOptions={{ color: 'purple' }} />
       </Pane>
     </Pane>
   </MapContainer>,