react-leaflet
Advanced tools
Comparing version 3.0.0-beta.3 to 3.0.0-beta.4
@@ -1,5 +0,13 @@ | ||
import { createControlComponent } from '@react-leaflet/core'; | ||
import { Control } from 'leaflet'; | ||
export const AttributionControl = createControlComponent(function createAttributionControl(props) { | ||
return new Control.Attribution(props); | ||
}); | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.AttributionControl = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const AttributionControl = (0, _core.createControlComponent)(function createAttributionControl(props) { | ||
return new _leaflet.Control.Attribution(props); | ||
}); | ||
exports.AttributionControl = AttributionControl; |
@@ -1,4 +0,11 @@ | ||
import { createPathComponent, updateCircle } from '@react-leaflet/core'; | ||
import { Circle as LeafletCircle } from 'leaflet'; | ||
export const Circle = createPathComponent(function createCircle({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.Circle = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const Circle = (0, _core.createPathComponent)(function createCircle({ | ||
center, | ||
@@ -8,3 +15,3 @@ children: _c, | ||
}, ctx) { | ||
const instance = new LeafletCircle(center, options); | ||
const instance = new _leaflet.Circle(center, options); | ||
return { | ||
@@ -16,2 +23,3 @@ instance, | ||
}; | ||
}, updateCircle); | ||
}, _core.updateCircle); | ||
exports.Circle = Circle; |
@@ -1,4 +0,11 @@ | ||
import { createPathComponent, updateCircle } from '@react-leaflet/core'; | ||
import { CircleMarker as LeafletCircleMarker } from 'leaflet'; | ||
export const CircleMarker = createPathComponent(function createCircleMarker({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.CircleMarker = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const CircleMarker = (0, _core.createPathComponent)(function createCircleMarker({ | ||
center, | ||
@@ -8,3 +15,3 @@ children: _c, | ||
}, ctx) { | ||
const instance = new LeafletCircleMarker(center, options); | ||
const instance = new _leaflet.CircleMarker(center, options); | ||
return { | ||
@@ -16,2 +23,3 @@ instance, | ||
}; | ||
}, updateCircle); | ||
}, _core.updateCircle); | ||
exports.CircleMarker = CircleMarker; |
@@ -1,8 +0,15 @@ | ||
import { createPathComponent } from '@react-leaflet/core'; | ||
import { FeatureGroup as LeafletFeatureGroup } from 'leaflet'; | ||
export const FeatureGroup = createPathComponent(function createFeatureGroup({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.FeatureGroup = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const FeatureGroup = (0, _core.createPathComponent)(function createFeatureGroup({ | ||
children: _c, | ||
...options | ||
}, ctx) { | ||
const instance = new LeafletFeatureGroup([], options); | ||
const instance = new _leaflet.FeatureGroup([], options); | ||
const context = { ...ctx, | ||
@@ -16,2 +23,3 @@ layerContainer: instance, | ||
}; | ||
}); | ||
}); | ||
exports.FeatureGroup = FeatureGroup; |
@@ -1,8 +0,15 @@ | ||
import { createPathComponent } from '@react-leaflet/core'; | ||
import { GeoJSON as LeafletGeoJSON } from 'leaflet'; | ||
export const GeoJSON = createPathComponent(function createGeoJSON({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.GeoJSON = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const GeoJSON = (0, _core.createPathComponent)(function createGeoJSON({ | ||
data, | ||
...options | ||
}, ctx) { | ||
const instance = new LeafletGeoJSON(data, options); | ||
const instance = new _leaflet.GeoJSON(data, options); | ||
return { | ||
@@ -14,2 +21,3 @@ instance, | ||
}; | ||
}); | ||
}); | ||
exports.GeoJSON = GeoJSON; |
@@ -1,9 +0,19 @@ | ||
import { useLeafletContext } from '@react-leaflet/core'; | ||
import { useEffect } from 'react'; | ||
export function useMap() { | ||
return useLeafletContext().map; | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.useMap = useMap; | ||
exports.useMapEvent = useMapEvent; | ||
exports.useMapEvents = useMapEvents; | ||
var _core = require("@react-leaflet/core"); | ||
var _react = require("react"); | ||
function useMap() { | ||
return (0, _core.useLeafletContext)().map; | ||
} | ||
export function useMapEvent(type, handler) { | ||
function useMapEvent(type, handler) { | ||
const map = useMap(); | ||
useEffect(function addMapEventHandler() { | ||
(0, _react.useEffect)(function addMapEventHandler() { | ||
// @ts-ignore event type | ||
@@ -18,5 +28,6 @@ map.on(type, handler); | ||
} | ||
export function useMapEvents(handlers) { | ||
function useMapEvents(handlers) { | ||
const map = useMap(); | ||
useEffect(function addMapEventHandlers() { | ||
(0, _react.useEffect)(function addMapEventHandlers() { | ||
map.on(handlers); | ||
@@ -23,0 +34,0 @@ return function removeMapEventHandlers() { |
@@ -1,4 +0,11 @@ | ||
import { createLayerComponent, updateMediaOverlay } from '@react-leaflet/core'; | ||
import { ImageOverlay as LeafletImageOverlay } from 'leaflet'; | ||
export const ImageOverlay = createLayerComponent(function createImageOveraly({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.ImageOverlay = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const ImageOverlay = (0, _core.createLayerComponent)(function createImageOveraly({ | ||
bounds, | ||
@@ -8,3 +15,3 @@ url, | ||
}, ctx) { | ||
const instance = new LeafletImageOverlay(url, bounds, options); | ||
const instance = new _leaflet.ImageOverlay(url, bounds, options); | ||
return { | ||
@@ -17,3 +24,3 @@ instance, | ||
}, function updateImageOverlay(overlay, props, prevProps) { | ||
updateMediaOverlay(overlay, props, prevProps); | ||
(0, _core.updateMediaOverlay)(overlay, props, prevProps); | ||
@@ -23,2 +30,3 @@ if (props.url !== prevProps.url) { | ||
} | ||
}); | ||
}); | ||
exports.ImageOverlay = ImageOverlay; |
126
cjs/index.js
@@ -1,24 +0,102 @@ | ||
export { useMap, useMapEvent, useMapEvents } from './hooks'; | ||
export { AttributionControl } from './AttributionControl'; | ||
export { Circle } from './Circle'; | ||
export { CircleMarker } from './CircleMarker'; | ||
export { FeatureGroup } from './FeatureGroup'; | ||
export { GeoJSON } from './GeoJSON'; | ||
export { ImageOverlay } from './ImageOverlay'; | ||
export { LayerGroup } from './LayerGroup'; | ||
export { LayersControl } from './LayersControl'; | ||
export { MapConsumer } from './MapConsumer'; | ||
export { MapContainer } from './MapContainer'; | ||
export { Marker } from './Marker'; | ||
export { Pane } from './Pane'; | ||
export { Polygon } from './Polygon'; | ||
export { Polyline } from './Polyline'; | ||
export { Popup } from './Popup'; | ||
export { Rectangle } from './Rectangle'; | ||
export { ScaleControl } from './ScaleControl'; | ||
export { SVGOverlay } from './SVGOverlay'; | ||
export { TileLayer } from './TileLayer'; | ||
export { Tooltip } from './Tooltip'; | ||
export { VideoOverlay } from './VideoOverlay'; | ||
export { WMSTileLayer } from './WMSTileLayer'; | ||
export { ZoomControl } from './ZoomControl'; | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.ZoomControl = exports.WMSTileLayer = exports.VideoOverlay = exports.Tooltip = exports.TileLayer = exports.SVGOverlay = exports.ScaleControl = exports.Rectangle = exports.Popup = exports.Polyline = exports.Polygon = exports.Pane = exports.Marker = exports.MapContainer = exports.MapConsumer = exports.LayersControl = exports.LayerGroup = exports.ImageOverlay = exports.GeoJSON = exports.FeatureGroup = exports.CircleMarker = exports.Circle = exports.AttributionControl = exports.useMapEvents = exports.useMapEvent = exports.useMap = void 0; | ||
var _hooks = require("./hooks"); | ||
exports.useMap = _hooks.useMap; | ||
exports.useMapEvent = _hooks.useMapEvent; | ||
exports.useMapEvents = _hooks.useMapEvents; | ||
var _AttributionControl = require("./AttributionControl"); | ||
exports.AttributionControl = _AttributionControl.AttributionControl; | ||
var _Circle = require("./Circle"); | ||
exports.Circle = _Circle.Circle; | ||
var _CircleMarker = require("./CircleMarker"); | ||
exports.CircleMarker = _CircleMarker.CircleMarker; | ||
var _FeatureGroup = require("./FeatureGroup"); | ||
exports.FeatureGroup = _FeatureGroup.FeatureGroup; | ||
var _GeoJSON = require("./GeoJSON"); | ||
exports.GeoJSON = _GeoJSON.GeoJSON; | ||
var _ImageOverlay = require("./ImageOverlay"); | ||
exports.ImageOverlay = _ImageOverlay.ImageOverlay; | ||
var _LayerGroup = require("./LayerGroup"); | ||
exports.LayerGroup = _LayerGroup.LayerGroup; | ||
var _LayersControl = require("./LayersControl"); | ||
exports.LayersControl = _LayersControl.LayersControl; | ||
var _MapConsumer = require("./MapConsumer"); | ||
exports.MapConsumer = _MapConsumer.MapConsumer; | ||
var _MapContainer = require("./MapContainer"); | ||
exports.MapContainer = _MapContainer.MapContainer; | ||
var _Marker = require("./Marker"); | ||
exports.Marker = _Marker.Marker; | ||
var _Pane = require("./Pane"); | ||
exports.Pane = _Pane.Pane; | ||
var _Polygon = require("./Polygon"); | ||
exports.Polygon = _Polygon.Polygon; | ||
var _Polyline = require("./Polyline"); | ||
exports.Polyline = _Polyline.Polyline; | ||
var _Popup = require("./Popup"); | ||
exports.Popup = _Popup.Popup; | ||
var _Rectangle = require("./Rectangle"); | ||
exports.Rectangle = _Rectangle.Rectangle; | ||
var _ScaleControl = require("./ScaleControl"); | ||
exports.ScaleControl = _ScaleControl.ScaleControl; | ||
var _SVGOverlay = require("./SVGOverlay"); | ||
exports.SVGOverlay = _SVGOverlay.SVGOverlay; | ||
var _TileLayer = require("./TileLayer"); | ||
exports.TileLayer = _TileLayer.TileLayer; | ||
var _Tooltip = require("./Tooltip"); | ||
exports.Tooltip = _Tooltip.Tooltip; | ||
var _VideoOverlay = require("./VideoOverlay"); | ||
exports.VideoOverlay = _VideoOverlay.VideoOverlay; | ||
var _WMSTileLayer = require("./WMSTileLayer"); | ||
exports.WMSTileLayer = _WMSTileLayer.WMSTileLayer; | ||
var _ZoomControl = require("./ZoomControl"); | ||
exports.ZoomControl = _ZoomControl.ZoomControl; |
@@ -1,8 +0,15 @@ | ||
import { createLayerComponent } from '@react-leaflet/core'; | ||
import { LayerGroup as LeafletLayerGroup } from 'leaflet'; | ||
export const LayerGroup = createLayerComponent(function createLayerGroup({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.LayerGroup = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const LayerGroup = (0, _core.createLayerComponent)(function createLayerGroup({ | ||
children: _c, | ||
...options | ||
}, ctx) { | ||
const instance = new LeafletLayerGroup([], options); | ||
const instance = new _leaflet.LayerGroup([], options); | ||
return { | ||
@@ -14,2 +21,3 @@ instance, | ||
}; | ||
}); | ||
}); | ||
exports.LayerGroup = LayerGroup; |
@@ -1,9 +0,22 @@ | ||
import { LeafletProvider, createContainerComponent, createControlHook, createElementHook, useLeafletContext } from '@react-leaflet/core'; | ||
import { Control } from 'leaflet'; | ||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; | ||
export const useLayersControlElement = createElementHook(function createLayersControl({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.createControlledLayer = createControlledLayer; | ||
exports.LayersControl = exports.useLayersControl = exports.useLayersControlElement = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
var _react = _interopRequireWildcard(require("react")); | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
const useLayersControlElement = (0, _core.createElementHook)(function createLayersControl({ | ||
children: _c, | ||
...options | ||
}, ctx) { | ||
const instance = new Control.Layers(undefined, undefined, options); | ||
const instance = new _leaflet.Control.Layers(undefined, undefined, options); | ||
return { | ||
@@ -24,10 +37,14 @@ instance, | ||
}); | ||
export const useLayersControl = createControlHook(useLayersControlElement); | ||
exports.useLayersControlElement = useLayersControlElement; | ||
const useLayersControl = (0, _core.createControlHook)(useLayersControlElement); | ||
exports.useLayersControl = useLayersControl; | ||
// @ts-ignore | ||
export const LayersControl = createContainerComponent(useLayersControl); | ||
export function createControlledLayer(addLayerToControl) { | ||
const LayersControl = (0, _core.createContainerComponent)(useLayersControl); | ||
exports.LayersControl = LayersControl; | ||
function createControlledLayer(addLayerToControl) { | ||
return function ControlledLayer(props) { | ||
const parentContext = useLeafletContext(); | ||
const propsRef = useRef(props); | ||
const [layer, setLayer] = useState(null); | ||
const parentContext = (0, _core.useLeafletContext)(); | ||
const propsRef = (0, _react.useRef)(props); | ||
const [layer, setLayer] = (0, _react.useState)(null); | ||
const { | ||
@@ -37,3 +54,3 @@ layersControl, | ||
} = parentContext; | ||
const addLayer = useCallback(layerToAdd => { | ||
const addLayer = (0, _react.useCallback)(layerToAdd => { | ||
if (layersControl != null) { | ||
@@ -48,7 +65,7 @@ if (propsRef.current.checked) { | ||
}, [layersControl, map]); | ||
const removeLayer = useCallback(layerToRemove => { | ||
layersControl?.removeLayer(layerToRemove); | ||
const removeLayer = (0, _react.useCallback)(layerToRemove => { | ||
layersControl == null ? void 0 : layersControl.removeLayer(layerToRemove); | ||
setLayer(null); | ||
}, [layersControl]); | ||
const context = useMemo(() => ({ ...parentContext, | ||
const context = (0, _react.useMemo)(() => ({ ...parentContext, | ||
layerContainer: { | ||
@@ -59,3 +76,3 @@ addLayer, | ||
}), [parentContext, addLayer, removeLayer]); | ||
useEffect(() => { | ||
(0, _react.useEffect)(() => { | ||
if (layer !== null && propsRef.current !== props) { | ||
@@ -71,3 +88,3 @@ if (props.checked === true && (propsRef.current.checked == null || propsRef.current.checked === false)) { | ||
}); | ||
return props.children ? /*#__PURE__*/React.createElement(LeafletProvider, { | ||
return props.children ? /*#__PURE__*/_react.default.createElement(_core.LeafletProvider, { | ||
value: context | ||
@@ -77,2 +94,3 @@ }, props.children) : null; | ||
} | ||
LayersControl.BaseLayer = createControlledLayer(function addBaseLayer(layersControl, layer, name) { | ||
@@ -79,0 +97,0 @@ layersControl.addBaseLayer(layer, name); |
@@ -1,6 +0,12 @@ | ||
import { useMap } from './hooks'; | ||
export function MapConsumer({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.MapConsumer = MapConsumer; | ||
var _hooks = require("./hooks"); | ||
function MapConsumer({ | ||
children | ||
}) { | ||
return children(useMap()); | ||
return children((0, _hooks.useMap)()); | ||
} |
@@ -1,9 +0,22 @@ | ||
import { CONTEXT_VERSION, LeafletProvider } from '@react-leaflet/core'; | ||
import { Map as LeafletMap } from 'leaflet'; | ||
import React, { useEffect, useMemo, useRef, useState } from 'react'; | ||
export function useMapElement(mapRef, props) { | ||
const [map, setMap] = useState(null); | ||
useEffect(() => { | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.useMapElement = useMapElement; | ||
exports.MapContainer = MapContainer; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
var _react = _interopRequireWildcard(require("react")); | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
function useMapElement(mapRef, props) { | ||
const [map, setMap] = (0, _react.useState)(null); | ||
(0, _react.useEffect)(() => { | ||
if (mapRef.current !== null && map === null) { | ||
const instance = new LeafletMap(mapRef.current, props); | ||
const instance = new _leaflet.Map(mapRef.current, props); | ||
@@ -25,3 +38,4 @@ if (props.center != null && props.zoom != null) { | ||
} | ||
export function MapContainer({ | ||
function MapContainer({ | ||
children, | ||
@@ -35,6 +49,6 @@ className, | ||
}) { | ||
const mapRef = useRef(null); | ||
const mapRef = (0, _react.useRef)(null); | ||
const map = useMapElement(mapRef, options); | ||
const createdRef = useRef(false); | ||
useEffect(() => { | ||
const createdRef = (0, _react.useRef)(false); | ||
(0, _react.useEffect)(() => { | ||
if (map != null && createdRef.current === false && whenCreated != null) { | ||
@@ -45,10 +59,10 @@ createdRef.current = true; | ||
}, [map, whenCreated]); | ||
const context = useMemo(() => map ? { | ||
__version: CONTEXT_VERSION, | ||
const context = (0, _react.useMemo)(() => map ? { | ||
__version: _core.CONTEXT_VERSION, | ||
map | ||
} : null, [map]); | ||
const contents = context ? /*#__PURE__*/React.createElement(LeafletProvider, { | ||
const contents = context ? /*#__PURE__*/_react.default.createElement(_core.LeafletProvider, { | ||
value: context | ||
}, children) : placeholder ?? null; | ||
return /*#__PURE__*/React.createElement("div", { | ||
}, children) : placeholder != null ? placeholder : null; | ||
return /*#__PURE__*/_react.default.createElement("div", { | ||
ref: mapRef, | ||
@@ -55,0 +69,0 @@ className: className, |
@@ -1,8 +0,15 @@ | ||
import { createLayerComponent } from '@react-leaflet/core'; | ||
import { Marker as LeafletMarker } from 'leaflet'; | ||
export const Marker = createLayerComponent(function createMarker({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.Marker = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const Marker = (0, _core.createLayerComponent)(function createMarker({ | ||
position, | ||
...options | ||
}, ctx) { | ||
const instance = new LeafletMarker(position, options); | ||
const instance = new _leaflet.Marker(position, options); | ||
return { | ||
@@ -38,2 +45,3 @@ instance, | ||
} | ||
}); | ||
}); | ||
exports.Marker = Marker; |
@@ -1,3 +0,14 @@ | ||
import { LeafletProvider, addClassName, removeClassName, useLeafletContext } from '@react-leaflet/core'; | ||
import React, { useEffect, useMemo, useRef } from 'react'; | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.Pane = Pane; | ||
var _core = require("@react-leaflet/core"); | ||
var _react = _interopRequireWildcard(require("react")); | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
const DEFAULT_PANES = ['mapPane', 'markerPane', 'overlayPane', 'popupPane', 'shadowPane', 'tilePane', 'tooltipPane']; | ||
@@ -20,10 +31,10 @@ const PANE_STYLES = { | ||
export function Pane(props) { | ||
const context = useLeafletContext(); | ||
const paneElementRef = useRef(null); | ||
const propsRef = useRef(props); | ||
function Pane(props) { | ||
const context = (0, _core.useLeafletContext)(); | ||
const paneElementRef = (0, _react.useRef)(null); | ||
const propsRef = (0, _react.useRef)(props); | ||
function applyStyles(paneElement) { | ||
if (props.className != null) { | ||
addClassName(paneElement, props.className); | ||
(0, _core.addClassName)(paneElement, props.className); | ||
} | ||
@@ -57,3 +68,3 @@ | ||
const pane = context.map.getPane(name); | ||
pane?.remove?.(); // @ts-ignore map internals | ||
pane == null ? void 0 : pane.remove == null ? void 0 : pane.remove(); // @ts-ignore map internals | ||
@@ -70,3 +81,3 @@ if (context.map._panes != null) { | ||
useEffect(function handlePane() { | ||
(0, _react.useEffect)(function handlePane() { | ||
if (paneElementRef.current === null) { | ||
@@ -79,3 +90,3 @@ createPane(); | ||
if (propsRef.current.className && props.className !== propsRef.current.className) { | ||
removeClassName(paneElementRef.current, propsRef.current.className); | ||
(0, _core.removeClassName)(paneElementRef.current, propsRef.current.className); | ||
} // Update the pane's DOM node style and class | ||
@@ -95,10 +106,10 @@ | ||
}); | ||
const newContext = useMemo(() => ({ ...context, | ||
const newContext = (0, _react.useMemo)(() => ({ ...context, | ||
pane: props.name | ||
}), [context, props.name]); | ||
return props.children ? /*#__PURE__*/React.createElement(LeafletProvider, { | ||
return props.children ? /*#__PURE__*/_react.default.createElement(_core.LeafletProvider, { | ||
value: newContext | ||
}, /*#__PURE__*/React.createElement("div", { | ||
}, /*#__PURE__*/_react.default.createElement("div", { | ||
style: PANE_STYLES | ||
}, props.children)) : null; | ||
} |
@@ -1,8 +0,15 @@ | ||
import { createPathComponent } from '@react-leaflet/core'; | ||
import { Polygon as LeafletPolygon } from 'leaflet'; | ||
export const Polygon = createPathComponent(function createPolygon({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.Polygon = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const Polygon = (0, _core.createPathComponent)(function createPolygon({ | ||
positions, | ||
...options | ||
}, ctx) { | ||
const instance = new LeafletPolygon(positions, options); | ||
const instance = new _leaflet.Polygon(positions, options); | ||
return { | ||
@@ -18,2 +25,3 @@ instance, | ||
} | ||
}); | ||
}); | ||
exports.Polygon = Polygon; |
@@ -1,8 +0,15 @@ | ||
import { createPathComponent } from '@react-leaflet/core'; | ||
import { Polyline as LeafletPolyline } from 'leaflet'; | ||
export const Polyline = createPathComponent(function createPolyline({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.Polyline = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const Polyline = (0, _core.createPathComponent)(function createPolyline({ | ||
positions, | ||
...options | ||
}, ctx) { | ||
const instance = new LeafletPolyline(positions, options); | ||
const instance = new _leaflet.Polyline(positions, options); | ||
return { | ||
@@ -18,2 +25,3 @@ instance, | ||
} | ||
}); | ||
}); | ||
exports.Polyline = Polyline; |
@@ -1,7 +0,15 @@ | ||
import { createOverlayComponent } from '@react-leaflet/core'; | ||
import { Popup as LeafletPopup } from 'leaflet'; | ||
import { useEffect } from 'react'; | ||
export const Popup = createOverlayComponent(function createPopup(props, context) { | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.Popup = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
var _react = require("react"); | ||
const Popup = (0, _core.createOverlayComponent)(function createPopup(props, context) { | ||
return { | ||
instance: new LeafletPopup(props, context.overlayContainer), | ||
instance: new _leaflet.Popup(props, context.overlayContainer), | ||
context | ||
@@ -15,3 +23,3 @@ }; | ||
} = props; | ||
useEffect(function addPopup() { | ||
(0, _react.useEffect)(function addPopup() { | ||
const { | ||
@@ -25,3 +33,3 @@ instance | ||
setOpen(true); | ||
onOpen?.(); | ||
onOpen == null ? void 0 : onOpen(); | ||
} | ||
@@ -33,3 +41,3 @@ } | ||
setOpen(false); | ||
onClose?.(); | ||
onClose == null ? void 0 : onClose(); | ||
} | ||
@@ -72,2 +80,3 @@ } | ||
}, [element, context, setOpen, onClose, onOpen, position]); | ||
}); | ||
}); | ||
exports.Popup = Popup; |
@@ -1,8 +0,15 @@ | ||
import { createPathComponent } from '@react-leaflet/core'; | ||
import { Rectangle as LeafletRectangle } from 'leaflet'; | ||
export const Rectangle = createPathComponent(function createRectangle({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.Rectangle = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const Rectangle = (0, _core.createPathComponent)(function createRectangle({ | ||
bounds, | ||
...options | ||
}, ctx) { | ||
const instance = new LeafletRectangle(bounds, options); | ||
const instance = new _leaflet.Rectangle(bounds, options); | ||
return { | ||
@@ -18,2 +25,3 @@ instance, | ||
} | ||
}); | ||
}); | ||
exports.Rectangle = Rectangle; |
@@ -1,5 +0,13 @@ | ||
import { createControlComponent } from '@react-leaflet/core'; | ||
import { Control } from 'leaflet'; | ||
export const ScaleControl = createControlComponent(function createScaleControl(props) { | ||
return new Control.Scale(props); | ||
}); | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.ScaleControl = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const ScaleControl = (0, _core.createControlComponent)(function createScaleControl(props) { | ||
return new _leaflet.Control.Scale(props); | ||
}); | ||
exports.ScaleControl = ScaleControl; |
@@ -1,6 +0,15 @@ | ||
import { createElementHook, createLayerHook, updateMediaOverlay } from '@react-leaflet/core'; | ||
import { SVGOverlay as LeafletSVGOverlay } from 'leaflet'; | ||
import { forwardRef, useImperativeHandle } from 'react'; | ||
import { createPortal } from 'react-dom'; | ||
export const useSVGOverlayElement = createElementHook(function createSVGOverlay(props, context) { | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.SVGOverlay = exports.useSVGOverlay = exports.useSVGOverlayElement = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
var _react = require("react"); | ||
var _reactDom = require("react-dom"); | ||
const useSVGOverlayElement = (0, _core.createElementHook)(function createSVGOverlay(props, context) { | ||
const { | ||
@@ -24,8 +33,10 @@ bounds, | ||
return { | ||
instance: new LeafletSVGOverlay(container, bounds, options), | ||
instance: new _leaflet.SVGOverlay(container, bounds, options), | ||
container, | ||
context | ||
}; | ||
}, updateMediaOverlay); | ||
export const useSVGOverlay = createLayerHook(useSVGOverlayElement); | ||
}, _core.updateMediaOverlay); | ||
exports.useSVGOverlayElement = useSVGOverlayElement; | ||
const useSVGOverlay = (0, _core.createLayerHook)(useSVGOverlayElement); | ||
exports.useSVGOverlay = useSVGOverlay; | ||
@@ -40,6 +51,7 @@ function SVGOverlayComponent({ | ||
} = useSVGOverlay(options).current; | ||
useImperativeHandle(ref, () => instance); | ||
return container == null || children == null ? null : /*#__PURE__*/createPortal(children, container); | ||
(0, _react.useImperativeHandle)(ref, () => instance); | ||
return container == null || children == null ? null : /*#__PURE__*/(0, _reactDom.createPortal)(children, container); | ||
} | ||
export const SVGOverlay = /*#__PURE__*/forwardRef(SVGOverlayComponent); | ||
const SVGOverlay = /*#__PURE__*/(0, _react.forwardRef)(SVGOverlayComponent); | ||
exports.SVGOverlay = SVGOverlay; |
@@ -1,4 +0,11 @@ | ||
import { createTileLayerComponent, updateGridLayer } from '@react-leaflet/core'; | ||
import { TileLayer as LeafletTileLayer } from 'leaflet'; | ||
export const TileLayer = createTileLayerComponent(function createTileLayer({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.TileLayer = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const TileLayer = (0, _core.createTileLayerComponent)(function createTileLayer({ | ||
url, | ||
@@ -8,5 +15,6 @@ ...options | ||
return { | ||
instance: new LeafletTileLayer(url, options), | ||
instance: new _leaflet.TileLayer(url, options), | ||
context | ||
}; | ||
}, updateGridLayer); | ||
}, _core.updateGridLayer); | ||
exports.TileLayer = TileLayer; |
@@ -1,7 +0,15 @@ | ||
import { createOverlayComponent } from '@react-leaflet/core'; | ||
import { Tooltip as LeafletTooltip } from 'leaflet'; | ||
import { useEffect } from 'react'; | ||
export const Tooltip = createOverlayComponent(function createTooltip(props, context) { | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.Tooltip = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
var _react = require("react"); | ||
const Tooltip = (0, _core.createOverlayComponent)(function createTooltip(props, context) { | ||
return { | ||
instance: new LeafletTooltip(props, context.overlayContainer), | ||
instance: new _leaflet.Tooltip(props, context.overlayContainer), | ||
context | ||
@@ -14,3 +22,3 @@ }; | ||
} = props; | ||
useEffect(function addTooltip() { | ||
(0, _react.useEffect)(function addTooltip() { | ||
const container = context.overlayContainer; | ||
@@ -30,3 +38,3 @@ | ||
setOpen(true); | ||
onOpen?.(); | ||
onOpen == null ? void 0 : onOpen(); | ||
} | ||
@@ -38,3 +46,3 @@ }; | ||
setOpen(false); | ||
onClose?.(); | ||
onClose == null ? void 0 : onClose(); | ||
} | ||
@@ -60,2 +68,3 @@ }; | ||
}, [element, context, setOpen, onClose, onOpen]); | ||
}); | ||
}); | ||
exports.Tooltip = Tooltip; |
@@ -1,4 +0,11 @@ | ||
import { createLayerComponent, updateMediaOverlay } from '@react-leaflet/core'; | ||
import { VideoOverlay as LeafletVideoOverlay } from 'leaflet'; | ||
export const VideoOverlay = createLayerComponent(function createVideoOverlay({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.VideoOverlay = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const VideoOverlay = (0, _core.createLayerComponent)(function createVideoOverlay({ | ||
bounds, | ||
@@ -8,6 +15,8 @@ url, | ||
}, ctx) { | ||
const instance = new LeafletVideoOverlay(url, bounds, options); | ||
const instance = new _leaflet.VideoOverlay(url, bounds, options); | ||
if (options.play === true) { | ||
instance.getElement()?.play(); | ||
var _instance$getElement; | ||
(_instance$getElement = instance.getElement()) == null ? void 0 : _instance$getElement.play(); | ||
} | ||
@@ -22,3 +31,3 @@ | ||
}, function updateVideoOverlay(overlay, props, prevProps) { | ||
updateMediaOverlay(overlay, props, prevProps); | ||
(0, _core.updateMediaOverlay)(overlay, props, prevProps); | ||
@@ -38,2 +47,3 @@ if (typeof props.url === 'string' && props.url !== prevProps.url) { | ||
} | ||
}); | ||
}); | ||
exports.VideoOverlay = VideoOverlay; |
@@ -1,4 +0,11 @@ | ||
import { createTileLayerComponent, updateGridLayer } from '@react-leaflet/core'; | ||
import { TileLayer } from 'leaflet'; | ||
export const WMSTileLayer = createTileLayerComponent(function createWMSTileLayer({ | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.WMSTileLayer = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const WMSTileLayer = (0, _core.createTileLayerComponent)(function createWMSTileLayer({ | ||
params = {}, | ||
@@ -9,3 +16,3 @@ url, | ||
return { | ||
instance: new TileLayer.WMS(url, { ...params, | ||
instance: new _leaflet.TileLayer.WMS(url, { ...params, | ||
...options | ||
@@ -16,3 +23,3 @@ }), | ||
}, function updateWMSTileLayer(layer, props, prevProps) { | ||
updateGridLayer(layer, props, prevProps); | ||
(0, _core.updateGridLayer)(layer, props, prevProps); | ||
@@ -22,2 +29,3 @@ if (props.params != null && props.params !== prevProps.params) { | ||
} | ||
}); | ||
}); | ||
exports.WMSTileLayer = WMSTileLayer; |
@@ -1,5 +0,13 @@ | ||
import { createControlComponent } from '@react-leaflet/core'; | ||
import { Control } from 'leaflet'; | ||
export const ZoomControl = createControlComponent(function createZoomControl(props) { | ||
return new Control.Zoom(props); | ||
}); | ||
"use strict"; | ||
exports.__esModule = true; | ||
exports.ZoomControl = void 0; | ||
var _core = require("@react-leaflet/core"); | ||
var _leaflet = require("leaflet"); | ||
const ZoomControl = (0, _core.createControlComponent)(function createZoomControl(props) { | ||
return new _leaflet.Control.Zoom(props); | ||
}); | ||
exports.ZoomControl = ZoomControl; |
{ | ||
"name": "react-leaflet", | ||
"version": "3.0.0-beta.3", | ||
"version": "3.0.0-beta.4", | ||
"description": "React components for Leaflet maps", | ||
@@ -11,3 +11,3 @@ "main": "cjs/index.js", | ||
"build:clean": "del cjs esm types umd", | ||
"build:cjs": "cross-env BABEL_ENV=cjs babel src --out-dir cjs --extensions .ts,.tsx", | ||
"build:cjs": "babel src --out-dir cjs --extensions .ts,.tsx", | ||
"build:esm": "cross-env BABEL_ENV=esm babel src --out-dir esm --extensions .ts,.tsx", | ||
@@ -47,3 +47,3 @@ "build:types": "tsc --emitDeclarationOnly", | ||
"dependencies": { | ||
"@react-leaflet/core": "^1.0.0-beta.4" | ||
"@react-leaflet/core": "^1.0.0-beta.5" | ||
}, | ||
@@ -50,0 +50,0 @@ "peerDependencies": { |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
117997
2628
0