Improve Type Definitions (#1308)

package.json

@@ -47,6 +47,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
+    "@types/geojson": "^7946.0.7",
+    "@types/mapbox-gl": "^2.0.3",
     "mapbox-gl": "^1.0.0",
     "mjolnir.js": "^2.5.0",
     "prop-types": "^15.7.2",

src/components/attribution-control.d.ts

@@ -1,7 +1,7 @@
 import {ReactElement} from 'react';
 import {MapControlProps} from './use-map-control';
 
-type AttributionControlProps = MapControlProps & Partial<{
+export type AttributionControlProps = MapControlProps & Partial<{
   toggleLabel: string,
   className: string,
   style: Object,

src/components/draggable-control.d.ts

@@ -8,12 +8,12 @@ type CallbackEvent = MjolnirEvent & {
 };
 
 export type DraggableControlProps = MapControlProps & {
-  draggable: boolean,
+  draggable?: boolean,
   onDrag?: (evt: CallbackEvent) => void,
   onDragEnd?: (evt: CallbackEvent) => void,
   onDragStart?: (evt: CallbackEvent) => void,
-  offsetLeft: number,
-  offsetTop: number
+  offsetLeft?: number,
+  offsetTop?: number
 };
 
 type State = {
@@ -32,4 +32,4 @@ export type DraggableControlRef = MapControlRef & {
 export default function useDraggableControl(
   props: DraggableControlProps,
   callbacks: any
-): DraggableControlRef;
+): DraggableControlRef;

src/components/fullscreen-control.d.ts

@@ -1,7 +1,7 @@
 import {ReactElement} from 'react';
 import {MapControlProps} from './use-map-control';
 
-type FullscreenControlProps = MapControlProps & Partial<{
+export type FullscreenControlProps = MapControlProps & Partial<{
   className: string,
   style: Object,
   container: HTMLElement,

src/components/interactive-map.d.ts

@@ -1,5 +1,5 @@
-import {ReactElement} from 'react';
-import type {StaticMapProps} from './static-map';
+import {ReactElement, Ref} from 'react';
+import type {MapRef, StaticMapProps} from './static-map';
 import MapController, {MjolnirEvent} from '../utils/map-controller';
 
 type State = {
@@ -8,7 +8,7 @@ type State = {
   isHovering: boolean
 };
 
-type MapEvent = MjolnirEvent & {
+export type MapEvent = MjolnirEvent & {
   point: Array<number>,
   lngLat: Array<number>,
   features?: Array<any>
@@ -46,13 +46,13 @@ export type InteractiveMapProps = StaticMapProps & Partial<{
   touchZoom: boolean,
   touchRotate: boolean,
   keyboard: boolean,
-
   touchAction: string,
   eventRecognizerOptions: any,
   clickRadius: number,
   interactiveLayerIds: Array<string>,
   getCursor: (state: State) => string,
-  controller: MapController
+  controller: MapController,
+  ref: Ref<MapRef>
 }>;
 
 export default function InteractiveMap(props: InteractiveMapProps): ReactElement;

src/components/layer.d.ts

@@ -1,15 +1,28 @@
+import * as MapboxGL from "mapbox-gl";
+import {PureComponent, Ref} from "react";
 
-type LayerProps = {
-  id?: string,
-  type: 'fill' | 'line' | 'symbol' | 'circle' | 'fill-extrusion' | 'raster' | 'background' | 'heatmap' | 'hillshade',
-  source?: string,
-  'source-layer'?: string,
-  beforeId?: string,
-  layout?: any,
-  paint?: any,
-  filter?: Array<any>,
-  minzoom?: number,
-  maxzoom?: number
-};
+export interface LayerProps {
+  id?: string;
+  type:  'fill' | 'line' | 'symbol' | 'circle' | 'fill-extrusion' | 'raster' | 'background' | 'heatmap' | 'hillshade';
+  source?: string;
+  beforeId?: string;
+  layout?: MapboxGL.AnyLayout;
+  paint:
+    | MapboxGL.BackgroundPaint
+    | MapboxGL.FillPaint
+    | MapboxGL.FillExtrusionPaint
+    | MapboxGL.LinePaint
+    | MapboxGL.SymbolPaint
+    | MapboxGL.RasterPaint
+    | MapboxGL.CirclePaint
+    | MapboxGL.HeatmapPaint
+    | MapboxGL.HillshadePaint;
+  filter?: any[];
+  minzoom?: number;
+  maxzoom?: number;
+  ref?:Ref<LayerProps>
+}
 
 export default function Layer(props: LayerProps): null;
+
+

src/components/marker.d.ts

@@ -1,7 +1,7 @@
 import {ReactElement} from 'react';
 import type {DraggableControlProps} from './draggable-control';
 
-type MarkerProps = DraggableControlProps & {
+export type MarkerProps = DraggableControlProps & {
   className?: string,
   longitude: number,
   latitude: number

src/components/popup.d.ts

@@ -2,7 +2,7 @@ import {ReactElement} from 'react';
 import {MapControlProps} from './use-map-control';
 import type {PositionType} from '../utils/dynamic-position';
 
-type PopupProps = MapControlProps & {
+export type PopupProps = MapControlProps & {
   className?: string,
   longitude: number,
   latitude: number,

src/components/source.d.ts

@@ -1,14 +1,33 @@
 
-import {ReactElement} from 'react';
+import {PureComponent, ReactElement} from 'react';
+import * as GeoJSON from 'geojson';
 
-type SourceProps = {
-  id?: string,
-  type: string,
-  children?: any,
-  data?: any,
-  coordinates?: any,
-  url?: any,
-  tiles?: any
-};
+export interface SourceProps {
+  id?: string;
+  type: string;
+  url?: string;
+  tiles?: string[];
+  tileSize?: number;
+  bounds?: number[];
+  scheme?: 'xyz' | 'tms';
+  minzoom?: number;
+  maxzoom?: number;
+  attribution?: string;
+  encoding?: 'terrarium' | 'mapbox';
+  data?: GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry> | string;
+  buffer?: number;
+  tolerance?: number;
+  cluster?: boolean;
+  clusterRadius?: number;
+  clusterProperties?: object;
+  clusterMaxZoom?: number;
+  lineMetrics?: boolean;
+  generateId?: boolean;
+  coordinates?: number[][];
+  urls?: string[];
+  children?: any;
+
+}
+
+export default class Source extends PureComponent<SourceProps> {}
 
-export default function Source(props: SourceProps): ReactElement;

src/index.d.ts

@@ -54,6 +54,13 @@ export {default as setRTLTextPlugin} from './utils/set-rtl-text-plugin';
 export {default as _MapContext} from './components/map-context';
 
 // Types
+export {MapEvent} from './components/interactive-map'
 export {ViewportProps} from './utils/map-state';
 export {MapContextProps} from './components/map-context';
 export {MapRef} from './components/static-map';
+export {SourceProps} from './components/source';
+export {LayerProps} from './components/layer'
+export {MarkerProps} from './components/marker'
+export {AttributionControlProps} from './components/attribution-control'
+export {FullscreenControlProps} from './components/fullscreen-control'
+export {PopupProps} from './components/popup'

yarn.lock

@@ -1932,6 +1932,11 @@
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
   integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
 
+"@types/geojson@*", "@types/geojson@^7946.0.7":
+  version "7946.0.7"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
+  integrity sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==
+
 "@types/glob@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
@@ -1946,6 +1951,13 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
+"@types/mapbox-gl@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/mapbox-gl/-/mapbox-gl-2.0.3.tgz#06faab3b509902a97d65a27c200d6af151824e42"
+  integrity sha512-mf51FlRjBo9IIjhgN0z6b0d1s5ShtvdSi6X+VfGGrzFki/oOLcUHk9q2eQ3XY5VQY8AJzc1nILAd0gV90ifYYA==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"