From 1d616f2e8a7955be40bcbdbc94e6e05b9d7ea8dd Mon Sep 17 00:00:00 2001 From: Kenton Gray Date: Fri, 29 Jan 2021 11:22:28 -0600 Subject: [PATCH] Improve Type Definitions (#1308) --- package.json | 2 ++ src/components/attribution-control.d.ts | 2 +- src/components/draggable-control.d.ts | 8 ++--- src/components/fullscreen-control.d.ts | 2 +- src/components/interactive-map.d.ts | 10 +++--- src/components/layer.d.ts | 37 ++++++++++++++-------- src/components/marker.d.ts | 2 +- src/components/popup.d.ts | 2 +- src/components/source.d.ts | 41 ++++++++++++++++++------- src/index.d.ts | 7 +++++ yarn.lock | 12 ++++++++ 11 files changed, 89 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 43b114a3..58599f0d 100644 --- a/package.json +++ b/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", diff --git a/src/components/attribution-control.d.ts b/src/components/attribution-control.d.ts index 13a7421e..1dbdb30f 100644 --- a/src/components/attribution-control.d.ts +++ b/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, diff --git a/src/components/draggable-control.d.ts b/src/components/draggable-control.d.ts index 19c31266..3f1f5c55 100644 --- a/src/components/draggable-control.d.ts +++ b/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; \ No newline at end of file +): DraggableControlRef; diff --git a/src/components/fullscreen-control.d.ts b/src/components/fullscreen-control.d.ts index dffec4e8..e021023f 100644 --- a/src/components/fullscreen-control.d.ts +++ b/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, diff --git a/src/components/interactive-map.d.ts b/src/components/interactive-map.d.ts index 4ff01f06..ea2b226b 100644 --- a/src/components/interactive-map.d.ts +++ b/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, lngLat: Array, features?: Array @@ -46,13 +46,13 @@ export type InteractiveMapProps = StaticMapProps & Partial<{ touchZoom: boolean, touchRotate: boolean, keyboard: boolean, - touchAction: string, eventRecognizerOptions: any, clickRadius: number, interactiveLayerIds: Array, getCursor: (state: State) => string, - controller: MapController + controller: MapController, + ref: Ref }>; export default function InteractiveMap(props: InteractiveMapProps): ReactElement; diff --git a/src/components/layer.d.ts b/src/components/layer.d.ts index f958db77..a28a950a 100644 --- a/src/components/layer.d.ts +++ b/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, - 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 +} export default function Layer(props: LayerProps): null; + + diff --git a/src/components/marker.d.ts b/src/components/marker.d.ts index 3668a851..594a3ade 100644 --- a/src/components/marker.d.ts +++ b/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 diff --git a/src/components/popup.d.ts b/src/components/popup.d.ts index 59e4940a..7d697283 100644 --- a/src/components/popup.d.ts +++ b/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, diff --git a/src/components/source.d.ts b/src/components/source.d.ts index c558c0d9..29a28b09 100644 --- a/src/components/source.d.ts +++ b/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.FeatureCollection | 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 {} -export default function Source(props: SourceProps): ReactElement; diff --git a/src/index.d.ts b/src/index.d.ts index 5a7e06c5..419de772 100644 --- a/src/index.d.ts +++ b/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' diff --git a/yarn.lock b/yarn.lock index 06d33bb8..27665ea7 100644 --- a/yarn.lock +++ b/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"