diff --git a/packages/react-leaflet/__tests__/Pane.tsx b/packages/react-leaflet/__tests__/Pane.tsx new file mode 100644 index 00000000..0ceda2be --- /dev/null +++ b/packages/react-leaflet/__tests__/Pane.tsx @@ -0,0 +1,78 @@ +import { render } from '@testing-library/react' +import React from 'react' + +import { MapContainer, Pane, TileLayer } from '../src' + +describe('Pane', () => { + test('renders', () => { + const { container } = render( + + + + + , + ) + expect(container).toMatchSnapshot() + }) + + test('renders in Strict Mode', () => { + const { container } = render( + + + + + + + , + ) + expect(container).toMatchSnapshot() + }) + + test('renders nested panes', () => { + const { container } = render( + + + + + + + + + + , + ) + expect(container).toMatchSnapshot() + }) + + test('can unmount and remount with the same name', () => { + const { rerender, container } = render( + + + + + + + + , + ) + expect(container).toMatchSnapshot() + + rerender( + + , + ) + expect(container).toMatchSnapshot() + + rerender( + + + + + + + + + ) + expect(container).toMatchSnapshot() + }) +}) diff --git a/packages/react-leaflet/__tests__/__snapshots__/Pane.tsx.snap b/packages/react-leaflet/__tests__/__snapshots__/Pane.tsx.snap new file mode 100644 index 00000000..c9f4264b --- /dev/null +++ b/packages/react-leaflet/__tests__/__snapshots__/Pane.tsx.snap @@ -0,0 +1,854 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Pane can unmount and remount with the same name 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ + + + + + − + +
+
+
+
+
+
+ + Leaflet + + | tiles attribution +
+
+
+
+
+`; + +exports[`Pane can unmount and remount with the same name 2`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + − + +
+
+
+
+
+
+ + Leaflet + +
+
+
+
+
+`; + +exports[`Pane can unmount and remount with the same name 3`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ + + + + + − + +
+
+
+
+
+
+ + Leaflet + + | tiles attribution +
+
+
+
+
+`; + +exports[`Pane renders 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ + + + + + − + +
+
+
+
+
+
+ + Leaflet + + | tiles attribution +
+
+
+
+
+`; + +exports[`Pane renders in Strict Mode 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ + + + + + − + +
+
+
+
+
+
+ + Leaflet + + | tiles attribution +
+
+
+
+
+`; + +exports[`Pane renders nested panes 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ + + + + + − + +
+
+
+
+
+
+ + Leaflet + + | tiles attribution +
+
+
+
+
+`; diff --git a/packages/react-leaflet/src/Pane.tsx b/packages/react-leaflet/src/Pane.tsx index c801af1e..bc13bc63 100644 --- a/packages/react-leaflet/src/Pane.tsx +++ b/packages/react-leaflet/src/Pane.tsx @@ -4,7 +4,13 @@ import { addClassName, useLeafletContext, } from '@react-leaflet/core' -import React, { CSSProperties, ReactNode, useEffect, useState } from 'react' +import React, { + CSSProperties, + ReactNode, + useState, + useEffect, + useMemo, +} from 'react' import { createPortal } from 'react-dom' const DEFAULT_PANES = [ @@ -65,11 +71,13 @@ function createPane( } export function Pane(props: PaneProps) { + const [paneElement, setPaneElement] = useState() const context = useLeafletContext() - const [paneElement] = useState(() => createPane(props, context)) - const [newContext] = useState(() => ({ ...context, pane: props.name })) + const newContext = useMemo(() => ({ ...context, pane: props.name }), [context]) useEffect(() => { + setPaneElement(createPane(props, context)) + return function removeCreatedPane() { const pane = context.map.getPane(props.name) pane?.remove?.() @@ -89,7 +97,7 @@ export function Pane(props: PaneProps) { // eslint-disable-next-line react-hooks/exhaustive-deps }, []) - return props.children != null + return props.children != null && paneElement != null ? createPortal( {props.children}, paneElement,