From aa2b7b7034d58ccee3946e654b477421f1e0b578 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Mon, 4 Feb 2019 23:05:15 -0800 Subject: [PATCH 01/19] Update several base types, add react-leaflet specific types and methods including: * AddLayerHandler * RemoveLayerHandler * LayerContainer * LeafletContext * LatLng * LatLngBounds * Point * Viewport * DivOverlayProps Update a few components and controls too: * MapControl * AttributionControl * From LayersControl.js: * ControlledLayerProps * ControlledLayer * BaseLayer * Overlay * LayersControlProps * LayersControl * ScaleControlProps * ScaleControl * ZoomControlProps * ZoomControl --- types/react-leaflet/index.d.ts | 110 ++++++++++++++++++++++++--------- 1 file changed, 82 insertions(+), 28 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index c362a1f23c..7e25e8d301 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-leaflet 1.1 +// Type definitions for react-leaflet 2.2 // Project: https://github.com/PaulLeCam/react-leaflet // Definitions by: Dave Leaver , David Schneider , Yui T. // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -118,6 +118,14 @@ export type LeafletEvents = MapEvents // These type parameters aren't needed for instantiating a component, but they are useful for // extending react-leaflet classes. +export type MapComponentProps = { + leaflet: LeafletContext, + pane?: string +} + +export type DivOverlayProps = MapComponentProps & Leaflet.DivOverlayOptions; + + export class MapComponent extends React.Component

{ _leafletEvents: LeafletEvents; leafletElement: E; @@ -177,10 +185,36 @@ export class Pane

void; + +export type RemoveLayerHandler = (layer: Leaflet.Layer) => void; + export interface LayerContainer { - addLayer(layer: Leaflet.Layer): this; - removeLayer(layer: number | Leaflet.Layer): this; + addLayer: AddLayerHandler, + removeLayer: RemoveLayerHandler } + +export interface LeafletContext { + map?: Leaflet.Map, + pane?: string | null | undefined, + layerContainer?: LayerContainer | null | undefined, + popupContainer?: Leaflet.Layer | null | undefined +} + +export type LatLng = Leaflet.LatLng | Array | object; + +export type LatLngBounds = Leaflet.LatLngBounds | Array; + +export type Point = [number, number] | Leaflet.Point; + +export interface Viewport { + center: [number, number] | null | undefined, + zoom: number | null | undefined +} + export class MapLayer

extends MapComponent { createLeafletElement(props: P): E; updateLeafletElement(fromProps: P, toProps: P): void; @@ -305,38 +339,54 @@ export class Tooltip

extends React.Component

{ leafletElement: E; createLeafletElement(props: P): E; updateLeafletElement(fromProps: P, toProps: P): void; } -export type AttributionControlProps = Leaflet.Control.AttributionOptions; -export class AttributionControl

extends MapControl { } +export type AttributionControlProps = Leaflet.Control.AttributionOptions & MapControlProps; +export class AttributionControl

extends MapControl { + createLeafletElement(props: P): E; +} -export interface LayersControlProps extends LayersControlEvents, Leaflet.Control.LayersOptions { - baseLayers?: Leaflet.Control.LayersObject; - children?: Children; - overlays?: Leaflet.Control.LayersObject; +export interface LayersControlProps extends MapControlProps, LayersControlEvents, Leaflet.Control.LayersOptions { + children: Children; + collapsed?: boolean; +} +export class LayersControl

extends MapControl { + controlProps: { + addBaseLayer: AddLayerHandler, + addOverlay: AddLayerHandler, + removeLayer: RemoveLayerHandler, + removeLayerControl: RemoveLayerHandler + } + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; + addBaseLayer(layer: Leaflet.Layer, name: string, checked: boolean): void; + addOverlay(layer: Leaflet.Layer, name: string, checked: boolean): void; + removeLayer(layer: Leaflet.Layer): void; + removeLayerControl(layer: Leaflet.Layer): void; } -export class LayersControl

extends MapControl { } export namespace LayersControl { - interface BaseControlledLayerProps { - checked?: boolean; - children?: Children; - removeLayer?(layer: Leaflet.Layer): void; - removeLayerControl?(layer: Leaflet.Layer): void; + interface ControlledLayerProps { + addBaseLayer: AddLayerHandler; + addOverlay: AddLayerHandler, + checked?: boolean, + children: Children, + leaflet: LeafletContext, + name: string, + removeLayer: RemoveLayerHandler, + removeLayerControl: RemoveLayerHandler } - interface ControlledLayerProps extends BaseControlledLayerProps { - addBaseLayer?(layer: Leaflet.Layer, name: string, checked: boolean): void; - addOverlay?(layer: Leaflet.Layer, name: string, checked: boolean): void; - name: string; - } - class ControlledLayer

extends React.Component

{ - layer?: Leaflet.Layer; - getChildContext(): { layerContainer: LayerContainer }; + class ControlledLayer

extends React.Component

{ + contextValue: LeafletContext; + layer: Leaflet.Layer | null | undefined; addLayer(): void; removeLayer(layer: Leaflet.Layer): void; } @@ -344,8 +394,12 @@ export namespace LayersControl { class Overlay

extends ControlledLayer

{ } } -export type ScaleControlProps = Leaflet.Control.ScaleOptions; -export class ScaleControl

extends MapControl { } +export type ScaleControlProps = Leaflet.Control.ScaleOptions & MapControlProps; +export class ScaleControl

extends MapControl { + createLeafletElement(props: P): E; +} -export type ZoomControlProps = Leaflet.Control.ZoomOptions; -export class ZoomControl

extends MapControl { } +export type ZoomControlProps = Leaflet.Control.ZoomOptions & MapControlProps; +export class ZoomControl

extends MapControl { + createLeafletElement(props: P): E; +} From 6fa80b498e015c49844d99abc92cd15e738474a8 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Tue, 5 Feb 2019 23:25:24 -0800 Subject: [PATCH 02/19] Add context and remove stray semi-colons * LeafletConsumer * LeafletProvider * withLeaflet --- types/react-leaflet/index.d.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 7e25e8d301..1a9936b31a 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -109,7 +109,7 @@ export type LeafletEvents = MapEvents & TileLayerEvents & PathEvents & FeatureGroupEvents - & LayersControlEvents; + & LayersControlEvents // Most react-leaflet components take two type parameters: // - P : the component's props object @@ -123,7 +123,7 @@ export type MapComponentProps = { pane?: string } -export type DivOverlayProps = MapComponentProps & Leaflet.DivOverlayOptions; +export type DivOverlayProps = MapComponentProps & Leaflet.DivOverlayOptions export class MapComponent extends React.Component

{ @@ -403,3 +403,14 @@ export type ZoomControlProps = Leaflet.Control.ZoomOptions & MapControlProps; export class ZoomControl

extends MapControl { createLeafletElement(props: P): E; } + +// context.js +export class LeafletConsumer extends React.Component> {} +export class LeafletProvider extends React.Component> {} + +type ContextProps = { + leaflet: LeafletContext; +} +type Omit = Pick> + +export function withLeaflet(WrappedComponent: React.Component): React.Component> \ No newline at end of file From 8759d616ca5ea2a06f9977867d0885e8c1f03d2b Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Tue, 5 Feb 2019 23:44:28 -0800 Subject: [PATCH 03/19] Update WMSTileLayerProps and WMSTileLayer --- types/react-leaflet/index.d.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 1a9936b31a..b7edb68d2d 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -232,11 +232,15 @@ export interface TileLayerProps extends TileLayerEvents, Leaflet.TileLayerOption } export class TileLayer

extends GridLayer { } -export interface WMSTileLayerProps extends TileLayerEvents, Leaflet.WMSOptions { +export interface WMSTileLayerProps extends TileLayerEvents, Leaflet.WMSOptions, GridLayerProps { children?: Children; url: string; } -export class WMSTileLayer

extends GridLayer { } +export class WMSTileLayer

extends GridLayer { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; + getOptions(params: P): P; +} export interface ImageOverlayProps extends Leaflet.ImageOverlayOptions { bounds: Leaflet.LatLngBoundsExpression; From 440f35fd0f84d94730d11d27126e39ea3c901be5 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Wed, 6 Feb 2019 23:31:32 -0800 Subject: [PATCH 04/19] Update MapLayerProps, add back some semi-colons, update several props * GridLayerProps * TileLayerProps * ImageOverlayProps * LayerGroupProps * MarkerProps * CircleProps * CircleMarkerProps * FeatureGroupProps * GeoJSONProps * PolylineProps * PolygonProps * RectangleProps --- types/react-leaflet/index.d.ts | 81 +++++++++++++--------------------- 1 file changed, 31 insertions(+), 50 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index b7edb68d2d..6ead4ec6e3 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -182,26 +182,25 @@ export class Pane

void; export type RemoveLayerHandler = (layer: Leaflet.Layer) => void; export interface LayerContainer { - addLayer: AddLayerHandler, - removeLayer: RemoveLayerHandler + addLayer: AddLayerHandler; + removeLayer: RemoveLayerHandler; } export interface LeafletContext { - map?: Leaflet.Map, - pane?: string | null | undefined, - layerContainer?: LayerContainer | null | undefined, - popupContainer?: Leaflet.Layer | null | undefined + map?: Leaflet.Map; + pane?: string | null | undefined; + layerContainer?: LayerContainer | null | undefined; + popupContainer?: Leaflet.Layer | null | undefined; } export type LatLng = Leaflet.LatLng | Array | object; @@ -211,8 +210,8 @@ export type LatLngBounds = Leaflet.LatLngBounds | Array; export type Point = [number, number] | Leaflet.Point; export interface Viewport { - center: [number, number] | null | undefined, - zoom: number | null | undefined + center: [number, number] | null | undefined; + zoom: number | null | undefined; } export class MapLayer

extends MapComponent { @@ -221,13 +220,10 @@ export class MapLayer

extends MapLayer {} -export interface TileLayerProps extends TileLayerEvents, Leaflet.TileLayerOptions { - children?: Children; +export interface TileLayerProps extends GridLayerProps, TileLayerEvents, Leaflet.TileLayerOptions { url: string; } export class TileLayer

extends GridLayer { } @@ -242,24 +238,20 @@ export class WMSTileLayer

extends MapLayer { getChildContext(): { popupContainer: E }; } -export interface LayerGroupProps { - children?: Children; -} +export interface LayerGroupProps extends MapLayerProps { } export class LayerGroup

extends MapLayer { getChildContext(): { layerContainer: E }; } -export interface MarkerProps extends MarkerEvents, Leaflet.MarkerOptions { - children?: Children; +export interface MarkerProps extends MapLayerProps, MarkerEvents, Leaflet.MarkerOptions { position: Leaflet.LatLngExpression; } export class Marker

extends MapLayer { @@ -274,51 +266,40 @@ export abstract class Path

extends MapLayer { setStyleIfChanged(fromProps: P, toProps: P): void; } -export interface CircleProps extends PathEvents, Leaflet.CircleMarkerOptions { +export interface CircleProps extends MapLayerProps, PathEvents, Leaflet.CircleMarkerOptions { center: Leaflet.LatLngExpression; - children?: Children; radius: number; } export class Circle

extends Path { } -export interface CircleMarkerProps extends PathEvents, Leaflet.CircleMarkerOptions { +export interface CircleMarkerProps extends PathProps, PathEvents, Leaflet.CircleMarkerOptions { center: Leaflet.LatLngExpression; - children?: Children; radius: number; } export class CircleMarker

extends Path { } -export interface FeatureGroupProps extends FeatureGroupEvents, Leaflet.PathOptions { - children?: Children; -} +export interface FeatureGroupProps extends MapLayerProps, FeatureGroupEvents, Leaflet.PathOptions { } export class FeatureGroup

extends Path { getChildContext(): { layerContainer: E, popupContainer: E }; } -export interface GeoJSONProps extends FeatureGroupEvents, Leaflet.GeoJSONOptions { - children?: Children; +export interface GeoJSONProps extends PathProps, FeatureGroupEvents, Leaflet.GeoJSONOptions { data: GeoJSON.GeoJsonObject; - style?: Leaflet.StyleFunction; } export class GeoJSON

extends Path { } -export interface PolylineProps extends PathEvents, Leaflet.PolylineOptions { - children?: Children; +export interface PolylineProps extends PathProps, PathEvents, Leaflet.PolylineOptions { positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][]; } export class Polyline

extends Path { } -export interface PolygonProps extends PathEvents, Leaflet.PolylineOptions { - children?: Children; - popupContainer?: Leaflet.FeatureGroup; +export interface PolygonProps extends PathProps, PathEvents, Leaflet.PolylineOptions { positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][] | Leaflet.LatLngExpression[][][]; } export class Polygon

extends Path { } -export interface RectangleProps extends PathEvents, Leaflet.PolylineOptions { - children?: Children; +export interface RectangleProps extends PathProps, PathEvents, Leaflet.PolylineOptions { bounds: Leaflet.LatLngBoundsExpression; - popupContainer?: Leaflet.FeatureGroup; } export class Rectangle

extends Path { } @@ -380,13 +361,13 @@ export class LayersControl

extends React.Component

{ contextValue: LeafletContext; From dd2fd322a86d952b103df88dd08175ece6e97853 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Fri, 8 Feb 2019 23:52:09 -0800 Subject: [PATCH 05/19] Update base props and classes along with some child components: * MapEvented * MapComponent * MapProps * Map * DivOverlayProps * DivOverlayTypes * DivOverlay * MapLayer * Path * Circle * CircleMarker * FeatureGroup * GeoJSON * PopupProps * Popup * TooltipProps * Tooltip --- types/react-leaflet/index.d.ts | 81 ++++++++++++++++++++++------------ 1 file changed, 52 insertions(+), 29 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 6ead4ec6e3..6bcfa81569 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -118,20 +118,21 @@ export type LeafletEvents = MapEvents // These type parameters aren't needed for instantiating a component, but they are useful for // extending react-leaflet classes. + export type MapComponentProps = { leaflet: LeafletContext, pane?: string } -export type DivOverlayProps = MapComponentProps & Leaflet.DivOverlayOptions - - -export class MapComponent extends React.Component

{ +export class MapEvented extends React.Component

{ _leafletEvents: LeafletEvents; leafletElement: E; extractLeafletEvents(props: P): LeafletEvents; bindLeafletEvents(next: LeafletEvents, prev: LeafletEvents): LeafletEvents; fireLeafletEvent(type: string, data: any): void; +} + +export class MapComponent

extends MapEvented { getOptions(props: P): P; } @@ -139,29 +140,48 @@ export interface MapProps extends MapEvents, Leaflet.MapOptions, Leaflet.LocateO animate?: boolean; bounds?: Leaflet.LatLngBoundsExpression; boundsOptions?: Leaflet.FitBoundsOptions; - center?: Leaflet.LatLngExpression; - children?: Children; + children: Children; className?: string; id?: string; - maxBounds?: Leaflet.LatLngBoundsExpression; - maxZoom?: number; - minZoom?: number; style?: React.CSSProperties; useFlyTo?: boolean; - zoom?: number; + viewport?: Viewport + whenReady?: () => void; } -export class Map

extends MapComponent { - className?: string; - container: HTMLDivElement; - getChildContext(): { layerContainer: E, map: E }; +export class Map

extends MapEvented { + className: string | null | undefined; + contextValue: LeafletContext | null | undefined; + container: HTMLDivElement | null | undefined; + viewport: Viewport; createLeafletElement(props: P): E; updateLeafletElement(fromProps: P, toProps: P): void; - bindContainer(container: HTMLDivElement): void; + onViewportChange: () => void; + onViewportChanged: () => void; + bindContainer(container: HTMLDivElement | null | undefined): void; shouldUpdateCenter(next: Leaflet.LatLngExpression, prev: Leaflet.LatLngExpression): boolean; shouldUpdateBounds(next: Leaflet.LatLngBoundsExpression, prev: Leaflet.LatLngBoundsExpression): boolean; } +export interface DivOverlayProps extends MapComponentProps, Leaflet.DivOverlayOptions { + children: Children; + onClose?: () => void; + onOpen?: () => void; +} + +export interface DivOverlayTypes extends Leaflet.Evented { + isOpen: () => boolean; + update: () => void; +} + +export class DivOverlay

extends MapComponent { + createLeafletElement(_props: P): Error; + updateLeafletElement(_prevProps: P, _props: P): void; + onClose(): void; + onOpen(): void; + onRender(): void; +} + export interface PaneProps { name?: string; children?: Children; @@ -214,7 +234,7 @@ export interface Viewport { zoom: number | null | undefined; } -export class MapLayer

extends MapComponent { +export class MapLayer

extends MapComponent { createLeafletElement(props: P): E; updateLeafletElement(fromProps: P, toProps: P): void; readonly layerContainer: LayerContainer | Leaflet.Map; @@ -259,7 +279,7 @@ export class Marker

extends MapLayer { +export abstract class Path

extends MapLayer { getChildContext(): { popupContainer: E }; getPathOptions(props: P): Leaflet.PathOptions; setStyle(options: Leaflet.PathOptions): void; @@ -270,23 +290,29 @@ export interface CircleProps extends MapLayerProps, PathEvents, Leaflet.CircleMa center: Leaflet.LatLngExpression; radius: number; } -export class Circle

extends Path { } +export class Circle

extends Path { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; +} export interface CircleMarkerProps extends PathProps, PathEvents, Leaflet.CircleMarkerOptions { center: Leaflet.LatLngExpression; radius: number; } -export class CircleMarker

extends Path { } +export class CircleMarker

extends Path { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; +} export interface FeatureGroupProps extends MapLayerProps, FeatureGroupEvents, Leaflet.PathOptions { } -export class FeatureGroup

extends Path { - getChildContext(): { layerContainer: E, popupContainer: E }; +export class FeatureGroup

extends LayerGroup { + createLeafletElement(props: P): E; } export interface GeoJSONProps extends PathProps, FeatureGroupEvents, Leaflet.GeoJSONOptions { data: GeoJSON.GeoJsonObject; } -export class GeoJSON

extends Path { } +export class GeoJSON

extends FeatureGroup { } export interface PolylineProps extends PathProps, PathEvents, Leaflet.PolylineOptions { positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][]; @@ -303,21 +329,18 @@ export interface RectangleProps extends PathProps, PathEvents, Leaflet.PolylineO } export class Rectangle

extends Path { } -export interface PopupProps extends Leaflet.PopupOptions { - children?: Children; +export interface PopupProps extends Leaflet.PopupOptions, DivOverlayProps { position?: Leaflet.LatLngExpression; } -export class Popup

extends MapComponent { +export class Popup

extends DivOverlay { onPopupOpen(arg: { popup: E }): void; onPopupClose(arg: { popup: E }): void; renderPopupContent(): void; removePopupContent(): void; } -export interface TooltipProps extends Leaflet.TooltipOptions { - children?: Children; -} -export class Tooltip

extends MapComponent { +export interface TooltipProps extends Leaflet.TooltipOptions, DivOverlayProps { } +export class Tooltip

extends DivOverlay { onTooltipOpen(arg: { tooltip: E }): void; onTooltipClose(arg: { tooltip: E }): void; renderTooltipContent(): void; From 6d9df7cea064573694b41219537e145c78a82b2c Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Sat, 9 Feb 2019 00:32:31 -0800 Subject: [PATCH 06/19] Update methods on GridLayer and GeoJSON --- types/react-leaflet/index.d.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 6bcfa81569..cf0ac1c60d 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -241,7 +241,11 @@ export class MapLayer

extends MapLayer {} +export class GridLayer

extends MapLayer { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; + getOptions(props: P): P; +} export interface TileLayerProps extends GridLayerProps, TileLayerEvents, Leaflet.TileLayerOptions { url: string; @@ -312,7 +316,10 @@ export class FeatureGroup

extends FeatureGroup { } +export class GeoJSON

extends FeatureGroup { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; +} export interface PolylineProps extends PathProps, PathEvents, Leaflet.PolylineOptions { positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][]; From 008ed31b28a655cfc84b4fbca4fee0c0b006ac60 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Sat, 9 Feb 2019 00:46:36 -0800 Subject: [PATCH 07/19] Update Tooltip methods --- types/react-leaflet/index.d.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index cf0ac1c60d..81d48e7d86 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -350,8 +350,6 @@ export interface TooltipProps extends Leaflet.TooltipOptions, DivOverlayProps { export class Tooltip

extends DivOverlay { onTooltipOpen(arg: { tooltip: E }): void; onTooltipClose(arg: { tooltip: E }): void; - renderTooltipContent(): void; - removeTooltipContent(): void; } export type MapControlProps = { From 74a4627af3e08e28430760d05ac7ea25d9dfbe3e Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Sat, 9 Feb 2019 00:59:24 -0800 Subject: [PATCH 08/19] Update ImageOverlayProps and ImageOverlay --- types/react-leaflet/index.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 81d48e7d86..8234f36c78 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -265,9 +265,11 @@ export class WMSTileLayer

extends MapLayer { - getChildContext(): { popupContainer: E }; + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; } export interface LayerGroupProps extends MapLayerProps { } From c3ec7d74124139e9828bf5893565a6823671d205 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Sat, 9 Feb 2019 12:10:56 -0800 Subject: [PATCH 09/19] Update methods on TileLayer, Polyline, Polygon, and Rectangle --- types/react-leaflet/index.d.ts | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 8234f36c78..c4eb701e0e 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -250,7 +250,10 @@ export class GridLayer

extends GridLayer { } +export class TileLayer

extends GridLayer { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; +} export interface WMSTileLayerProps extends TileLayerEvents, Leaflet.WMSOptions, GridLayerProps { children?: Children; @@ -326,17 +329,26 @@ export class GeoJSON

extends Path { } +export class Polyline

extends Path { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; +} export interface PolygonProps extends PathProps, PathEvents, Leaflet.PolylineOptions { positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][] | Leaflet.LatLngExpression[][][]; } -export class Polygon

extends Path { } +export class Polygon

extends Path { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; +} export interface RectangleProps extends PathProps, PathEvents, Leaflet.PolylineOptions { bounds: Leaflet.LatLngBoundsExpression; } -export class Rectangle

extends Path { } +export class Rectangle

extends Path { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; +} export interface PopupProps extends Leaflet.PopupOptions, DivOverlayProps { position?: Leaflet.LatLngExpression; From ac01d02987eeb17b6d885b8823f5da161b1069ca Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Sat, 9 Feb 2019 12:39:13 -0800 Subject: [PATCH 10/19] Return void from createLeafletElement on DivOverlay, update LayerGroup and Popup methods --- types/react-leaflet/index.d.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index c4eb701e0e..563cb65e90 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -175,7 +175,7 @@ export interface DivOverlayTypes extends Leaflet.Evented { } export class DivOverlay

extends MapComponent { - createLeafletElement(_props: P): Error; + createLeafletElement(_props: P): void; updateLeafletElement(_prevProps: P, _props: P): void; onClose(): void; onOpen(): void; @@ -277,7 +277,7 @@ export class ImageOverlay

extends MapLayer { - getChildContext(): { layerContainer: E }; + createLeafletElement(props: P): E; } export interface MarkerProps extends MapLayerProps, MarkerEvents, Leaflet.MarkerOptions { @@ -354,10 +354,12 @@ export interface PopupProps extends Leaflet.PopupOptions, DivOverlayProps { position?: Leaflet.LatLngExpression; } export class Popup

extends DivOverlay { + getOptions(props: P): P; + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; onPopupOpen(arg: { popup: E }): void; onPopupClose(arg: { popup: E }): void; - renderPopupContent(): void; - removePopupContent(): void; + onRender: () => void; } export interface TooltipProps extends Leaflet.TooltipOptions, DivOverlayProps { } From c2f4917796b3fdbd2efb1c1d3bd703f74b0f22cd Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Sat, 9 Feb 2019 12:57:21 -0800 Subject: [PATCH 11/19] Update PaneProps, PaneState, and Pane --- types/react-leaflet/index.d.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 563cb65e90..0a165caa38 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -183,23 +183,23 @@ export class DivOverlay

ex } export interface PaneProps { - name?: string; children?: Children; - map?: Leaflet.Map; className?: string; + leaflet: LeafletContext; + name?: string; style?: React.CSSProperties; pane?: string; } export interface PaneState { - name?: string; + name: string | null | undefined; + context: LeafletContext | null | undefined; } export class Pane

extends React.Component { - getChildContext(): { pane: string }; createPane(props: P): void; removePane(): void; setStyle(arg: { style?: string, className?: string }): void; - getParentPane(): HTMLElement | undefined; - getPane(name: string): HTMLElement | undefined; + getParentPane(): HTMLElement | null | undefined; + getPane(name: string | null | undefined): HTMLElement | null | undefined; } export interface MapLayerProps extends MapComponentProps { From 4bf9a579e28643452c52a50e67fe5491298ee0b8 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Sat, 9 Feb 2019 16:59:46 -0800 Subject: [PATCH 12/19] Update Marker methods --- types/react-leaflet/index.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 0a165caa38..cfcd69a72f 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -284,7 +284,8 @@ export interface MarkerProps extends MapLayerProps, MarkerEvents, Leaflet.Marker position: Leaflet.LatLngExpression; } export class Marker

extends MapLayer { - getChildContext(): { popupContainer: E }; + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; } export interface PathProps extends PathEvents, Leaflet.PathOptions, MapLayerProps { } From b0ae2234be794632c5a626fdad7b96e4b199bdf0 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Sun, 10 Feb 2019 01:17:29 -0800 Subject: [PATCH 13/19] Fix linting errors, mark leafletContext optional in many places, add methods to BaseLayer and Overlay --- types/react-leaflet/index.d.ts | 61 ++++++++++++++++++---------------- 1 file changed, 33 insertions(+), 28 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index cfcd69a72f..75851472aa 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -2,7 +2,7 @@ // Project: https://github.com/PaulLeCam/react-leaflet // Definitions by: Dave Leaver , David Schneider , Yui T. // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 2.8 +// TypeScript Version: 3.2 import * as Leaflet from 'leaflet'; import * as React from 'react'; @@ -109,7 +109,7 @@ export type LeafletEvents = MapEvents & TileLayerEvents & PathEvents & FeatureGroupEvents - & LayersControlEvents + & LayersControlEvents; // Most react-leaflet components take two type parameters: // - P : the component's props object @@ -118,10 +118,9 @@ export type LeafletEvents = MapEvents // These type parameters aren't needed for instantiating a component, but they are useful for // extending react-leaflet classes. - -export type MapComponentProps = { - leaflet: LeafletContext, - pane?: string +export interface MapComponentProps { + leaflet?: LeafletContext; + pane?: string; } export class MapEvented extends React.Component

{ @@ -145,7 +144,7 @@ export interface MapProps extends MapEvents, Leaflet.MapOptions, Leaflet.LocateO id?: string; style?: React.CSSProperties; useFlyTo?: boolean; - viewport?: Viewport + viewport?: Viewport; whenReady?: () => void; } @@ -185,7 +184,7 @@ export class DivOverlay

ex export interface PaneProps { children?: Children; className?: string; - leaflet: LeafletContext; + leaflet?: LeafletContext; name?: string; style?: React.CSSProperties; pane?: string; @@ -218,14 +217,14 @@ export interface LayerContainer { export interface LeafletContext { map?: Leaflet.Map; - pane?: string | null | undefined; - layerContainer?: LayerContainer | null | undefined; - popupContainer?: Leaflet.Layer | null | undefined; + pane?: string; + layerContainer?: LayerContainer; + popupContainer?: Leaflet.Layer; } -export type LatLng = Leaflet.LatLng | Array | object; +export type LatLng = Leaflet.LatLng | number[] | object; -export type LatLngBounds = Leaflet.LatLngBounds | Array; +export type LatLngBounds = Leaflet.LatLngBounds | LatLng[]; export type Point = [number, number] | Leaflet.Point; @@ -235,6 +234,8 @@ export interface Viewport { } export class MapLayer

extends MapComponent { + contextValue: LeafletContext | null | undefined; + leafletElement: E; createLeafletElement(props: P): E; updateLeafletElement(fromProps: P, toProps: P): void; readonly layerContainer: LayerContainer | Leaflet.Map; @@ -275,8 +276,7 @@ export class ImageOverlay

extends MapLayer { +export class LayerGroup

extends MapLayer { createLeafletElement(props: P): E; } @@ -370,7 +370,7 @@ export class Tooltip

extends React.Component

{ @@ -394,7 +394,7 @@ export class LayersControl

extends React.Component

{ contextValue: LeafletContext; layer: Leaflet.Layer | null | undefined; - addLayer(): void; removeLayer(layer: Leaflet.Layer): void; } - class BaseLayer

extends ControlledLayer

{ } - class Overlay

extends ControlledLayer

{ } + class BaseLayer

extends ControlledLayer

{ + constructor(props: ControlledLayerProps); + addLayer: (layer: Leaflet.Layer) => void; + } + class Overlay

extends ControlledLayer

{ + constructor(props: ControlledLayerProps); + addLayer: (layer: Leaflet.Layer) => void; + } } export type ScaleControlProps = Leaflet.Control.ScaleOptions & MapControlProps; @@ -438,9 +443,9 @@ export class ZoomControl

> {} export class LeafletProvider extends React.Component> {} -type ContextProps = { +export interface ContextProps { leaflet: LeafletContext; } -type Omit = Pick> +export type Omit = Pick>; -export function withLeaflet(WrappedComponent: React.Component): React.Component> \ No newline at end of file +export function withLeaflet(WrappedComponent: React.Component): React.Component>; From 3b11b16d95cfa12060c83020a056b707eb2043f3 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Sun, 10 Feb 2019 09:40:55 -0800 Subject: [PATCH 14/19] Revert to older version of TS for compatibility with react-leaflet-markercluster --- types/react-leaflet/index.d.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 75851472aa..e174eff001 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -2,7 +2,7 @@ // Project: https://github.com/PaulLeCam/react-leaflet // Definitions by: Dave Leaver , David Schneider , Yui T. // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// TypeScript Version: 3.2 +// TypeScript Version: 2.8 import * as Leaflet from 'leaflet'; import * as React from 'react'; @@ -176,9 +176,9 @@ export interface DivOverlayTypes extends Leaflet.Evented { export class DivOverlay

extends MapComponent { createLeafletElement(_props: P): void; updateLeafletElement(_prevProps: P, _props: P): void; - onClose(): void; - onOpen(): void; - onRender(): void; + onClose: () => void; + onOpen: () => void; + onRender: () => void; } export interface PaneProps { From a74b997f94e904731edf7514b7b7eeb2858fed4a Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Mon, 11 Feb 2019 00:00:27 -0800 Subject: [PATCH 15/19] Update withLeaflet and add tests for viewport example, withLeaflet, createLeafletElement, and updateLeafletElement --- types/react-leaflet/index.d.ts | 4 +- types/react-leaflet/react-leaflet-tests.tsx | 72 ++++++++++++++++++++- 2 files changed, 72 insertions(+), 4 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index e174eff001..99f86a0078 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -444,8 +444,8 @@ export class LeafletConsumer extends React.Component> {} export interface ContextProps { - leaflet: LeafletContext; + leaflet?: LeafletContext; } export type Omit = Pick>; -export function withLeaflet(WrappedComponent: React.Component): React.Component>; +export function withLeaflet(WrappedComponent: React.ComponentType): React.Component>; diff --git a/types/react-leaflet/react-leaflet-tests.tsx b/types/react-leaflet/react-leaflet-tests.tsx index fe9825c465..2b6d9f49c1 100644 --- a/types/react-leaflet/react-leaflet-tests.tsx +++ b/types/react-leaflet/react-leaflet-tests.tsx @@ -16,8 +16,10 @@ import { MapProps, Marker, MarkerProps, + Path, Pane, Polygon, + PolygonProps, Polyline, Popup, PopupProps, @@ -25,7 +27,10 @@ import { TileLayer, Tooltip, WMSTileLayer, - ZoomControl + ZoomControl, + LeafletProvider, + withLeaflet, + Viewport } from 'react-leaflet'; const { BaseLayer, Overlay } = LayersControl; @@ -207,7 +212,7 @@ export class CustomComponent extends Component } } -// SOURCE ??? +// Similar to custom-icons.js export class MarkerWithDivIconExample extends Component { render() { return ( @@ -628,6 +633,44 @@ export class VectorLayersExample extends Component { } } +// viewport.js + +const DEFAULT_VIEWPORT = { + center: [51.505, -0.09] as [number, number], + zoom: 13 +}; + +export class ViewportExample extends Component { + state = { + viewport: { + center: [51.505, -0.09] as [number, number], + zoom: 13 + } + }; + + onClickReset = () => { + this.setState({ viewport: DEFAULT_VIEWPORT }); + } + + onViewportChanged = (viewport: Viewport) => { + this.setState({ viewport }); + } + + render() { + return ( + + + + ); + } +} + // wms-tile-layer.js interface WMSTileLayerExampleState { lat: number; @@ -729,6 +772,8 @@ class LegendControl extends MapControl } } +const legendControlComponent = withLeaflet(LegendControl); + const LegendControlExample = () => ( ( ); + +class CustomPolygon extends Path { + createLeafletElement(props: PolygonProps) { + const el = new L.Polygon(props.positions, this.getOptions(props)); + this.contextValue = { ...props.leaflet, popupContainer: el }; + return el; + } + + updateLeafletElement(fromProps: PolygonProps, toProps: PolygonProps) { + if (toProps.positions !== fromProps.positions) { + this.leafletElement.setLatLngs(toProps.positions); + } + this.setStyleIfChanged(fromProps, toProps); + } + + render() { + const { children } = this.props; + return children == null || this.contextValue == null ? null : ( + {children} + ); + } +} +const leafletComponent = withLeaflet(CustomPolygon); From 11ef1793cf05d67072afd284565c9c1a77fbeec4 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Tue, 12 Feb 2019 00:42:00 -0800 Subject: [PATCH 16/19] Return ComponentType from withLeaflet --- types/react-leaflet/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 99f86a0078..b805aba70f 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -448,4 +448,4 @@ export interface ContextProps { } export type Omit = Pick>; -export function withLeaflet(WrappedComponent: React.ComponentType): React.Component>; +export function withLeaflet(WrappedComponent: React.ComponentType): React.ComponentType>; From a669bdc92c3ed68b029c24ed2c98ed8d7e9b328f Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Mon, 25 Feb 2019 22:41:07 -0800 Subject: [PATCH 17/19] Update parameter on onViewportChange and onViewportChanged, stop casting type on variable --- types/react-leaflet/index.d.ts | 4 ++-- types/react-leaflet/react-leaflet-tests.tsx | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index b805aba70f..5f17e15d8a 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -155,8 +155,8 @@ export class Map

void; - onViewportChanged: () => void; + onViewportChange: (viewport: Viewport | null) => void; + onViewportChanged: (viewport: Viewport | null) => void; bindContainer(container: HTMLDivElement | null | undefined): void; shouldUpdateCenter(next: Leaflet.LatLngExpression, prev: Leaflet.LatLngExpression): boolean; shouldUpdateBounds(next: Leaflet.LatLngBoundsExpression, prev: Leaflet.LatLngBoundsExpression): boolean; diff --git a/types/react-leaflet/react-leaflet-tests.tsx b/types/react-leaflet/react-leaflet-tests.tsx index 2b6d9f49c1..5d1fc2ce7e 100644 --- a/types/react-leaflet/react-leaflet-tests.tsx +++ b/types/react-leaflet/react-leaflet-tests.tsx @@ -635,17 +635,16 @@ export class VectorLayersExample extends Component { // viewport.js +const viewportCenter: [number, number] = [51.505, -0.09]; + const DEFAULT_VIEWPORT = { - center: [51.505, -0.09] as [number, number], + center: viewportCenter, zoom: 13 }; export class ViewportExample extends Component { state = { - viewport: { - center: [51.505, -0.09] as [number, number], - zoom: 13 - } + viewport: DEFAULT_VIEWPORT }; onClickReset = () => { From ecf88db4453b53749dbd055106259ee554978500 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Mon, 25 Feb 2019 23:11:06 -0800 Subject: [PATCH 18/19] Add v1 folder to keep older types --- types/react-leaflet/v1/index.d.ts | 351 ++++++++ .../react-leaflet/v1/react-leaflet-tests.tsx | 747 ++++++++++++++++++ types/react-leaflet/v1/tsconfig.json | 33 + types/react-leaflet/v1/tslint.json | 7 + 4 files changed, 1138 insertions(+) create mode 100644 types/react-leaflet/v1/index.d.ts create mode 100644 types/react-leaflet/v1/react-leaflet-tests.tsx create mode 100644 types/react-leaflet/v1/tsconfig.json create mode 100644 types/react-leaflet/v1/tslint.json diff --git a/types/react-leaflet/v1/index.d.ts b/types/react-leaflet/v1/index.d.ts new file mode 100644 index 0000000000..c362a1f23c --- /dev/null +++ b/types/react-leaflet/v1/index.d.ts @@ -0,0 +1,351 @@ +// Type definitions for react-leaflet 1.1 +// Project: https://github.com/PaulLeCam/react-leaflet +// Definitions by: Dave Leaver , David Schneider , Yui T. +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import * as Leaflet from 'leaflet'; +import * as React from 'react'; + +// All events need to be lowercase so they don't collide with React.DOMAttributes +// which already declares things with some of the same names + +export type Children = React.ReactNode | React.ReactNode[]; + +export interface MapEvents { + onclick?(event: Leaflet.LeafletMouseEvent): void; + ondblclick?(event: Leaflet.LeafletMouseEvent): void; + onmousedown?(event: Leaflet.LeafletMouseEvent): void; + onmouseup?(event: Leaflet.LeafletMouseEvent): void; + onmouseover?(event: Leaflet.LeafletMouseEvent): void; + onmouseout?(event: Leaflet.LeafletMouseEvent): void; + onmousemove?(event: Leaflet.LeafletMouseEvent): void; + oncontextmenu?(event: Leaflet.LeafletMouseEvent): void; + onfocus?(event: Leaflet.LeafletEvent): void; + onblur?(event: Leaflet.LeafletEvent): void; + onpreclick?(event: Leaflet.LeafletMouseEvent): void; + onload?(event: Leaflet.LeafletEvent): void; + onunload?(event: Leaflet.LeafletEvent): void; + onviewreset?(event: Leaflet.LeafletEvent): void; + onmove?(event: Leaflet.LeafletEvent): void; + onmovestart?(event: Leaflet.LeafletEvent): void; + onmoveend?(event: Leaflet.LeafletEvent): void; + ondragstart?(event: Leaflet.LeafletEvent): void; + ondrag?(event: Leaflet.LeafletEvent): void; + ondragend?(event: Leaflet.DragEndEvent): void; + onzoomstart?(event: Leaflet.LeafletEvent): void; + onzoomend?(event: Leaflet.LeafletEvent): void; + onzoomlevelschange?(event: Leaflet.LeafletEvent): void; + onresize?(event: Leaflet.ResizeEvent): void; + onautopanstart?(event: Leaflet.LeafletEvent): void; + onlayeradd?(event: Leaflet.LayerEvent): void; + onlayerremove?(event: Leaflet.LayerEvent): void; + onbaselayerchange?(event: Leaflet.LayersControlEvent): void; + onoverlayadd?(event: Leaflet.LayersControlEvent): void; + onoverlayremove?(event: Leaflet.LayersControlEvent): void; + onlocationfound?(event: Leaflet.LocationEvent): void; + onlocationerror?(event: Leaflet.ErrorEvent): void; + onpopupopen?(event: Leaflet.PopupEvent): void; + onpopupclose?(event: Leaflet.PopupEvent): void; +} + +export interface MarkerEvents { + onclick?(event: Leaflet.LeafletMouseEvent): void; + ondblclick?(event: Leaflet.LeafletMouseEvent): void; + onmousedown?(event: Leaflet.LeafletMouseEvent): void; + onmouseover?(event: Leaflet.LeafletMouseEvent): void; + onmouseout?(event: Leaflet.LeafletMouseEvent): void; + oncontextmenu?(event: Leaflet.LeafletMouseEvent): void; + ondragstart?(event: Leaflet.LeafletEvent): void; + ondrag?(event: Leaflet.LeafletEvent): void; + ondragend?(event: Leaflet.DragEndEvent): void; + onmove?(event: Leaflet.LeafletEvent): void; + onadd?(event: Leaflet.LeafletEvent): void; + onremove?(event: Leaflet.LeafletEvent): void; + onpopupopen?(event: Leaflet.PopupEvent): void; + onpopupclose?(event: Leaflet.PopupEvent): void; +} + +export interface TileLayerEvents { + onloading?(event: Leaflet.LeafletEvent): void; + onload?(event: Leaflet.LeafletEvent): void; + ontileloadstart?(event: Leaflet.TileEvent): void; + ontileload?(event: Leaflet.TileEvent): void; + ontileunload?(event: Leaflet.TileEvent): void; + ontileerror?(event: Leaflet.TileEvent): void; +} + +export interface PathEvents { + onclick?(event: Leaflet.LeafletMouseEvent): void; + ondblclick?(event: Leaflet.LeafletMouseEvent): void; + onmousedown?(event: Leaflet.LeafletMouseEvent): void; + onmouseover?(event: Leaflet.LeafletMouseEvent): void; + onmouseout?(event: Leaflet.LeafletMouseEvent): void; + oncontextmenu?(event: Leaflet.LeafletMouseEvent): void; + onadd?(event: Leaflet.LeafletEvent): void; + onremove?(event: Leaflet.LeafletEvent): void; + onpopupopen?(event: Leaflet.PopupEvent): void; + onpopupclose?(event: Leaflet.PopupEvent): void; +} + +export interface FeatureGroupEvents { + onclick?(event: Leaflet.LeafletMouseEvent): void; + ondblclick?(event: Leaflet.LeafletMouseEvent): void; + onmouseover?(event: Leaflet.LeafletMouseEvent): void; + onmouseout?(event: Leaflet.LeafletMouseEvent): void; + oncontextmenu?(event: Leaflet.LeafletMouseEvent): void; + onlayeradd?(event: Leaflet.LayerEvent): void; + onlayerremove?(event: Leaflet.LayerEvent): void; +} + +export interface LayersControlEvents { + onbaselayerchange?(event: Leaflet.LayersControlEvent): void; + onoverlayadd?(event: Leaflet.LayersControlEvent): void; + onoverlayremove?(event: Leaflet.LayersControlEvent): void; +} + +export type LeafletEvents = MapEvents + & MarkerEvents + & TileLayerEvents + & PathEvents + & FeatureGroupEvents + & LayersControlEvents; + +// Most react-leaflet components take two type parameters: +// - P : the component's props object +// - E : the corresponding Leaflet element + +// These type parameters aren't needed for instantiating a component, but they are useful for +// extending react-leaflet classes. + +export class MapComponent extends React.Component

{ + _leafletEvents: LeafletEvents; + leafletElement: E; + extractLeafletEvents(props: P): LeafletEvents; + bindLeafletEvents(next: LeafletEvents, prev: LeafletEvents): LeafletEvents; + fireLeafletEvent(type: string, data: any): void; + getOptions(props: P): P; +} + +export interface MapProps extends MapEvents, Leaflet.MapOptions, Leaflet.LocateOptions, Leaflet.FitBoundsOptions { + animate?: boolean; + bounds?: Leaflet.LatLngBoundsExpression; + boundsOptions?: Leaflet.FitBoundsOptions; + center?: Leaflet.LatLngExpression; + children?: Children; + className?: string; + id?: string; + maxBounds?: Leaflet.LatLngBoundsExpression; + maxZoom?: number; + minZoom?: number; + style?: React.CSSProperties; + useFlyTo?: boolean; + zoom?: number; +} + +export class Map

extends MapComponent { + className?: string; + container: HTMLDivElement; + getChildContext(): { layerContainer: E, map: E }; + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; + bindContainer(container: HTMLDivElement): void; + shouldUpdateCenter(next: Leaflet.LatLngExpression, prev: Leaflet.LatLngExpression): boolean; + shouldUpdateBounds(next: Leaflet.LatLngBoundsExpression, prev: Leaflet.LatLngBoundsExpression): boolean; +} + +export interface PaneProps { + name?: string; + children?: Children; + map?: Leaflet.Map; + className?: string; + style?: React.CSSProperties; + pane?: string; +} +export interface PaneState { + name?: string; +} +export class Pane

extends React.Component { + getChildContext(): { pane: string }; + createPane(props: P): void; + removePane(): void; + setStyle(arg: { style?: string, className?: string }): void; + getParentPane(): HTMLElement | undefined; + getPane(name: string): HTMLElement | undefined; +} + +export interface MapLayerProps { + children?: Children; +} +export interface LayerContainer { + addLayer(layer: Leaflet.Layer): this; + removeLayer(layer: number | Leaflet.Layer): this; +} +export class MapLayer

extends MapComponent { + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; + readonly layerContainer: LayerContainer | Leaflet.Map; +} + +export interface GridLayerProps extends Leaflet.GridLayerOptions { + children?: Children; +} +export class GridLayer

extends MapLayer {} + +export interface TileLayerProps extends TileLayerEvents, Leaflet.TileLayerOptions { + children?: Children; + url: string; +} +export class TileLayer

extends GridLayer { } + +export interface WMSTileLayerProps extends TileLayerEvents, Leaflet.WMSOptions { + children?: Children; + url: string; +} +export class WMSTileLayer

extends GridLayer { } + +export interface ImageOverlayProps extends Leaflet.ImageOverlayOptions { + bounds: Leaflet.LatLngBoundsExpression; + children?: Children; + url: string; +} +export class ImageOverlay

extends MapLayer { + getChildContext(): { popupContainer: E }; +} + +export interface LayerGroupProps { + children?: Children; +} +export class LayerGroup

extends MapLayer { + getChildContext(): { layerContainer: E }; +} + +export interface MarkerProps extends MarkerEvents, Leaflet.MarkerOptions { + children?: Children; + position: Leaflet.LatLngExpression; +} +export class Marker

extends MapLayer { + getChildContext(): { popupContainer: E }; +} + +export interface PathProps extends PathEvents, Leaflet.PathOptions, MapLayerProps { } +export abstract class Path

extends MapLayer { + getChildContext(): { popupContainer: E }; + getPathOptions(props: P): Leaflet.PathOptions; + setStyle(options: Leaflet.PathOptions): void; + setStyleIfChanged(fromProps: P, toProps: P): void; +} + +export interface CircleProps extends PathEvents, Leaflet.CircleMarkerOptions { + center: Leaflet.LatLngExpression; + children?: Children; + radius: number; +} +export class Circle

extends Path { } + +export interface CircleMarkerProps extends PathEvents, Leaflet.CircleMarkerOptions { + center: Leaflet.LatLngExpression; + children?: Children; + radius: number; +} +export class CircleMarker

extends Path { } + +export interface FeatureGroupProps extends FeatureGroupEvents, Leaflet.PathOptions { + children?: Children; +} +export class FeatureGroup

extends Path { + getChildContext(): { layerContainer: E, popupContainer: E }; +} + +export interface GeoJSONProps extends FeatureGroupEvents, Leaflet.GeoJSONOptions { + children?: Children; + data: GeoJSON.GeoJsonObject; + style?: Leaflet.StyleFunction; +} +export class GeoJSON

extends Path { } + +export interface PolylineProps extends PathEvents, Leaflet.PolylineOptions { + children?: Children; + positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][]; +} +export class Polyline

extends Path { } + +export interface PolygonProps extends PathEvents, Leaflet.PolylineOptions { + children?: Children; + popupContainer?: Leaflet.FeatureGroup; + positions: Leaflet.LatLngExpression[] | Leaflet.LatLngExpression[][] | Leaflet.LatLngExpression[][][]; +} +export class Polygon

extends Path { } + +export interface RectangleProps extends PathEvents, Leaflet.PolylineOptions { + children?: Children; + bounds: Leaflet.LatLngBoundsExpression; + popupContainer?: Leaflet.FeatureGroup; +} +export class Rectangle

extends Path { } + +export interface PopupProps extends Leaflet.PopupOptions { + children?: Children; + position?: Leaflet.LatLngExpression; +} +export class Popup

extends MapComponent { + onPopupOpen(arg: { popup: E }): void; + onPopupClose(arg: { popup: E }): void; + renderPopupContent(): void; + removePopupContent(): void; +} + +export interface TooltipProps extends Leaflet.TooltipOptions { + children?: Children; +} +export class Tooltip

extends MapComponent { + onTooltipOpen(arg: { tooltip: E }): void; + onTooltipClose(arg: { tooltip: E }): void; + renderTooltipContent(): void; + removeTooltipContent(): void; +} + +export type MapControlProps = Leaflet.ControlOptions; +export class MapControl

extends React.Component

{ + leafletElement: E; + createLeafletElement(props: P): E; + updateLeafletElement(fromProps: P, toProps: P): void; +} + +export type AttributionControlProps = Leaflet.Control.AttributionOptions; +export class AttributionControl

extends MapControl { } + +export interface LayersControlProps extends LayersControlEvents, Leaflet.Control.LayersOptions { + baseLayers?: Leaflet.Control.LayersObject; + children?: Children; + overlays?: Leaflet.Control.LayersObject; +} +export class LayersControl

extends MapControl { } + +export namespace LayersControl { + interface BaseControlledLayerProps { + checked?: boolean; + children?: Children; + removeLayer?(layer: Leaflet.Layer): void; + removeLayerControl?(layer: Leaflet.Layer): void; + } + interface ControlledLayerProps extends BaseControlledLayerProps { + addBaseLayer?(layer: Leaflet.Layer, name: string, checked: boolean): void; + addOverlay?(layer: Leaflet.Layer, name: string, checked: boolean): void; + name: string; + } + class ControlledLayer

extends React.Component

{ + layer?: Leaflet.Layer; + getChildContext(): { layerContainer: LayerContainer }; + addLayer(): void; + removeLayer(layer: Leaflet.Layer): void; + } + class BaseLayer

extends ControlledLayer

{ } + class Overlay

extends ControlledLayer

{ } +} + +export type ScaleControlProps = Leaflet.Control.ScaleOptions; +export class ScaleControl

extends MapControl { } + +export type ZoomControlProps = Leaflet.Control.ZoomOptions; +export class ZoomControl

extends MapControl { } diff --git a/types/react-leaflet/v1/react-leaflet-tests.tsx b/types/react-leaflet/v1/react-leaflet-tests.tsx new file mode 100644 index 0000000000..fe9825c465 --- /dev/null +++ b/types/react-leaflet/v1/react-leaflet-tests.tsx @@ -0,0 +1,747 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import * as PropTypes from 'prop-types'; +import * as L from 'leaflet'; +import { Component } from 'react'; +import { + Children, + Circle, + CircleMarker, + FeatureGroup, + LayerGroup, + LayersControl, + Map, + MapControl, + MapControlProps, + MapProps, + Marker, + MarkerProps, + Pane, + Polygon, + Polyline, + Popup, + PopupProps, + Rectangle, + TileLayer, + Tooltip, + WMSTileLayer, + ZoomControl +} from 'react-leaflet'; +const { BaseLayer, Overlay } = LayersControl; + +/// animate.js +interface AnimateExampleState { + animate: boolean; + hasLocation: boolean; + latlng: L.LatLngExpression; +} + +export class AnimateExample extends Component { + state = { + animate: false, + hasLocation: false, + latlng: { + lat: 51.505, + lng: -0.09, + }, + }; + + handleClick = (e: L.LeafletMouseEvent) => { + this.setState({ + latlng: e.latlng, + }); + } + + toggleAnimate = () => { + this.setState({ + animate: !this.state.animate, + }); + } + + render() { + const marker = this.state.hasLocation ? ( + + + You are here + + + ) : null; + + return ( +

+ + + + {marker} + +
+ ); + } +} + +// bounds.js +const outer: L.LatLngBoundsLiteral = [ + [50.505, -29.09], + [52.505, 29.09], +]; +const inner: L.LatLngBoundsLiteral = [ + [49.505, -2.09], + [53.505, 2.09], +]; + +interface BoundsExampleState { + bounds: L.LatLngBoundsLiteral; +} + +export class BoundsExample extends Component { + state = { + bounds: outer, + }; + + onClickInner = () => { + this.setState({ bounds: inner }); + } + + onClickOuter = () => { + this.setState({ bounds: outer }); + } + + render() { + return ( + + + + + + ); + } +} + +// custom-component.js +interface MyPopupMarkerProps { + children: Children; + position: L.LatLngExpression; +} + +interface MyMarker extends MyPopupMarkerProps { + key: string; +} + +const MyPopupMarker = ({ children, position }: MyPopupMarkerProps) => ( + + + {children} + + +); + +interface MyMarkersListProps { + markers: MyMarker[]; +} + +const MyMarkersList = ({ markers }: MyMarkersListProps) => { + const items = markers.map(({ key, ...props }) => ( + + )); + return
{items}
; +}; + +interface CustomComponentState { + lat: number; + lng: number; + zoom: number; +} + +export class CustomComponent extends Component { + state = { + lat: 51.505, + lng: -0.09, + zoom: 13, + }; + + render() { + const center: L.LatLngExpression = [this.state.lat, this.state.lng]; + + const markers: MyMarker[] = [ + { key: 'marker1', position: [51.5, -0.1], children: 'My first popup' }, + { key: 'marker2', position: [51.51, -0.1], children: 'My second popup' }, + { key: 'marker3', position: [51.49, -0.05], children: 'My third popup' }, + ]; + return ( + + + + + ); + } +} + +// SOURCE ??? +export class MarkerWithDivIconExample extends Component { + render() { + return ( + + + + ); + } +} + +// draggable-marker.js +interface DraggableExampleState { + center: L.LatLngLiteral; + marker: L.LatLngLiteral; + zoom: number; + draggable: boolean; +} + +export class DraggableExample extends Component { + state = { + center: { + lat: 51.505, + lng: -0.09, + }, + marker: { + lat: 51.505, + lng: -0.09, + }, + zoom: 13, + draggable: true, + }; + + toggleDraggable = () => { + this.setState({ draggable: !this.state.draggable }); + } + + updatePosition = () => { + const { + lat, + lng, + } = (this.refs.marker as Marker).leafletElement.getLatLng(); + this.setState({ + marker: { lat, lng }, + }); + } + + render() { + const position: L.LatLngExpression = [this.state.center.lat, this.state.center.lng]; + const markerPosition: L.LatLngExpression = [this.state.marker.lat, this.state.marker.lng]; + + return ( + + + + + + {this.state.draggable ? 'DRAG MARKER' : 'MARKER FIXED'} + + + + + ); + } +} + +// events.js +interface EventsExampleState { + hasLocation: boolean; + latlng: L.LatLngLiteral; +} + +export class EventsExample extends Component { + state = { + hasLocation: false, + latlng: { + lat: 51.505, + lng: -0.09, + }, + }; + + handleClick = () => { + (this.refs.map as Map).leafletElement.locate(); + } + + handleLocationFound = (e: L.LocationEvent) => { + this.setState({ + hasLocation: true, + latlng: e.latlng, + }); + } + + render() { + const marker = this.state.hasLocation ? ( + + + You are here + + + ) : null; + + return ( + + + {marker} + + ); + } +} + +// layers-control.js +export class LayersControlExample extends Component { + render() { + const center: L.LatLngExpression = [51.505, -0.09]; + const rectangle: L.LatLngBoundsExpression = [ + [51.49, -0.08], + [51.5, -0.06], + ]; + + return ( + + + + + + + + + + + + A pretty CSS3 popup.
Easily customizable. + + + + + + + + + + + + + + + + Popup in FeatureGroup + + + + + + + + ); + } +} + +// other-layers.js +export class OtherLayersExample extends Component { + render() { + const center: L.LatLngExpression = [51.505, -0.09]; + const rectangle: L.LatLngBoundsExpression = [ + [51.49, -0.08], + [51.5, -0.06], + ]; + + return ( + + + + + + + + + + + + Popup in FeatureGroup + + + + + + ); + } +} + +// pane.js +interface PaneExampleState { + render: boolean; +} + +export class PaneExample extends Component { + state = { + render: true, + }; + + componentDidMount() { + setInterval(() => { + this.setState({ + render: !this.state.render, + }); + }, 5000); + } + + render() { + return ( + + + {this.state.render ? ( + + + + ) : null} + + + + + + + + ); + } +} + +// simple.js +interface SimpleExampleState { + lat: number; + lng: number; + zoom: number; +} + +export class SimpleExample extends Component { + state = { + lat: 51.505, + lng: -0.09, + zoom: 13, + }; + + render() { + const position: L.LatLngExpression = [this.state.lat, this.state.lng]; + return ( + + + + + A pretty CSS3 popup.
Easily customizable. + + + + ); + } +} + +// tooltip.js +interface TooltipExampleState { + clicked: number; +} + +export class TooltipExample extends Component { + state = { + clicked: 0, + }; + + onClickCircle = () => { + this.setState({ clicked: this.state.clicked + 1 }); + } + + render() { + const center: L.LatLngExpression = [51.505, -0.09]; + + const multiPolygon: L.LatLngExpression[][] = [ + [[51.51, -0.12], [51.51, -0.13], [51.53, -0.13]], + [[51.51, -0.05], [51.51, -0.07], [51.53, -0.07]], + ]; + + const rectangle: L.LatLngBoundsExpression = [ + [51.49, -0.08], + [51.5, -0.06], + ]; + + const clickedText = this.state.clicked === 0 + ? 'Click this Circle to change the Tooltip text' + : `Circle click: ${this.state.clicked}`; + + return ( + + + + + {clickedText} + + + + + Tooltip for CircleMarker + + + + + Popup for Marker + + + Tooltip for Marker + + + + + sticky Tooltip for Polygon + + + + + permanent Tooltip for Rectangle + + + + ); + } +} + +// vector-layers.js +export class VectorLayersExample extends Component { + render() { + const center: L.LatLngExpression = [51.505, -0.09]; + + const polyline: L.LatLngExpression[] = [ + [51.505, -0.09], + [51.51, -0.1], + [51.51, -0.12], + ]; + + const multiPolyline: L.LatLngExpression[][] = [ + [[51.5, -0.1], [51.5, -0.12], [51.52, -0.12]], + [[51.5, -0.05], [51.5, -0.06], [51.52, -0.06]], + ]; + + const polygon: L.LatLngExpression[] = [ + [51.515, -0.09], + [51.52, -0.1], + [51.52, -0.12], + ]; + + const multiPolygon: L.LatLngExpression[][] = [ + [[51.51, -0.12], [51.51, -0.13], [51.53, -0.13]], + [[51.51, -0.05], [51.51, -0.07], [51.53, -0.07]], + ]; + + const rectangle: L.LatLngBoundsExpression = [ + [51.49, -0.08], + [51.5, -0.06], + ]; + + return ( + + + + + + Popup in CircleMarker + + + + + + + + + ); + } +} + +// wms-tile-layer.js +interface WMSTileLayerExampleState { + lat: number; + lng: number; + zoom: number; + bluemarble: boolean; +} + +export class WMSTileLayerExample extends Component { + state = { + lat: 51.505, + lng: -0.09, + zoom: 5, + bluemarble: false, + }; + + onClick = () => { + this.setState({ + bluemarble: !this.state.bluemarble, + }); + } + + render() { + return ( + + + + + ); + } +} + +// zoom-control.js +const ZoomControlExample = () => ( + + + + +); + +// MapControl https://github.com/PaulLeCam/react-leaflet/issues/130 +class CenterControl extends MapControl { // note we're extending MapControl from react-leaflet, not Component from react + componentWillMount() { + const centerControl = new L.Control({ position: 'bottomright' }); // see http://leafletjs.com/reference.html#control-positions for other positions + const jsx = ( + // PUT YOUR JSX FOR THE COMPONENT HERE: +
+ {/* add your JSX */} +
+ ); + + centerControl.onAdd = (map) => { + const div = L.DomUtil.create('div', ''); + ReactDOM.render(jsx, div); + return div; + }; + + this.leafletElement = centerControl; + } +} + +const mapControlCenter: L.LatLngExpression = [51.505, -0.09]; + +const CenterControlExample = () => ( + + + +); + +class LegendControl extends MapControl { + componentWillMount() { + const legend = new L.Control({ position: 'bottomright' }); + const jsx = ( +
+ {this.props.children} +
+ ); + + legend.onAdd = (map) => { + const div = L.DomUtil.create('div', ''); + ReactDOM.render(jsx, div); + return div; + }; + + this.leafletElement = legend; + } +} + +const LegendControlExample = () => ( + + + +
    +
  • Strong Support
    • +
  • Weak Support
    • +
  • Weak Oppose
    • +
  • Strong Oppose
    • +
+ + +); diff --git a/types/react-leaflet/v1/tsconfig.json b/types/react-leaflet/v1/tsconfig.json new file mode 100644 index 0000000000..bb2d85cfe8 --- /dev/null +++ b/types/react-leaflet/v1/tsconfig.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../../", + "jsx": "react", + "typeRoots": [ + "../../" + ], + "types": [], + "paths": { + "react-leaflet": [ + "react-leaflet/v1" + ], + "react-leaflet/*": [ + "react-leaflet/v1/*" + ] + }, + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-leaflet-tests.tsx" + ] +} \ No newline at end of file diff --git a/types/react-leaflet/v1/tslint.json b/types/react-leaflet/v1/tslint.json new file mode 100644 index 0000000000..440efbd687 --- /dev/null +++ b/types/react-leaflet/v1/tslint.json @@ -0,0 +1,7 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + // TODO + "no-duplicate-imports": false + } +} From 2d53097235519333fb07573d1966a70a89430fd9 Mon Sep 17 00:00:00 2001 From: Henry Wu Date: Mon, 25 Feb 2019 23:27:49 -0800 Subject: [PATCH 19/19] Use React.Provider and React.Consumer for context --- types/react-leaflet/index.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/types/react-leaflet/index.d.ts b/types/react-leaflet/index.d.ts index 5f17e15d8a..04fe17a04f 100644 --- a/types/react-leaflet/index.d.ts +++ b/types/react-leaflet/index.d.ts @@ -440,8 +440,8 @@ export class ZoomControl

> {} -export class LeafletProvider extends React.Component> {} +export const LeafletProvider: React.Provider; +export const LeafletConsumer: React.Consumer; export interface ContextProps { leaflet?: LeafletContext;