Fix callback handler inputs to use ViewportProps instead of ViewState

* Fix callback handler inputs

Based on both react-map-gl documentation and trying things out, types
ViewportChangeHandler and ViewStrateChangeHandler both receive a
ViewportProps as input, rather than ViewState as was defined. This
commit fixes that problem.

Fields that were missing include at least 'width' and 'height',
important for working with an auto-resizing map.

* [react-map-gl] ExtraState interface fix

Add missing parameters to ExtraState interface, mark all as optional.
Any or none may be included in a ExtraState object when such is used.

* [react-map-gl] New onViewStateChange inputs

Added new input parameters 'interactionState' and 'oldViewState' to
callbacks 'onViewportChange' and 'onViewStateChange' in
'MapControllerOptions', 'InteractiveMaps' and 'MapContextProps'. There
are also other places where callbacks with similar names are used. But
in those cases, the extra parameters are never used. Because of this,
there are now two different types for callback functions.

types/react-map-gl/index.d.ts

@@ -3,6 +3,7 @@
 // Definitions by: Robert Imig <https://github.com/rimig>
 //                 Fabio Berta <https://github.com/fnberta>
 //                 Sander Siim <https://github.com/sandersiim>
+//                 Otto Urpelainen <https://github.com/oturpe>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.0
 
@@ -80,18 +81,24 @@ export class StaticMap extends React.PureComponent<StaticMapProps> {
 }
 
 export interface ExtraState {
-    isDragging: boolean;
-    isHovering: boolean;
+    inTransition?: boolean;
+    isDragging?: boolean;
+    isHovering?: boolean;
+    isPanning?: boolean;
+    isRotating?: boolean;
+    isZooming?: boolean;
 }
 
 export interface PositionInput {
     pos: [number, number];
 }
 
-export type ViewportChangeHandler = (viewState: ViewState) => void;
+export type ViewportChangeHandler = (viewState: ViewportProps) => void;
+
+export type ContextViewportChangeHandler = (viewState: ViewportProps, interactionState: ExtraState, oldViewState: ViewportProps) => void;
 
 export interface MapControllerOptions {
-    onViewportChange?: ViewportChangeHandler;
+    onViewportChange?: ContextViewportChangeHandler;
     onStateChange?: (state: MapState) => void;
     eventManager?: any;
     isInteractive: boolean;
@@ -209,18 +216,26 @@ export class LinearInterpolator extends TransitionInterpolator {
 export class FlyToInterpolator extends TransitionInterpolator {}
 
 export interface ViewStateChangeInfo {
-    viewState: ViewState;
+    viewState: ViewportProps;
+}
+
+export interface ContextViewStateChangeInfo {
+    viewState: ViewportProps;
+    interactionState: ExtraState;
+    newViewState: ViewportProps;
 }
 
 export type ViewStateChangeHandler = (info: ViewStateChangeInfo) => void;
 
+export type ContextViewStateChangeHandler = (info: ContextViewStateChangeInfo) => void;
+
 export interface InteractiveMapProps extends StaticMapProps {
     maxZoom?: number;
     minZoom?: number;
     maxPitch?: number;
     minPitch?: number;
-    onViewStateChange?: ViewStateChangeHandler;
-    onViewportChange?: ViewportChangeHandler;
+    onViewStateChange?: ContextViewStateChangeHandler;
+    onViewportChange?: ContextViewportChangeHandler;
     onInteractionStateChange?: (state: ExtraState) => void;
     transitionDuration?: number;
     transitionInterpolator?: TransitionInterpolator;
@@ -272,8 +287,8 @@ export interface MapContextProps {
     viewport?: WebMercatorViewport;
     map?: MapboxGL.Map;
     mapContainer: HTMLElement | null;
-    onViewStateChange?: ViewStateChangeHandler;
-    onViewportChange?: ViewportChangeHandler;
+    onViewStateChange?: ContextViewStateChangeHandler;
+    onViewportChange?: ContextViewportChangeHandler;
     isDragging: boolean;
     eventManager?: EventManager;
 }

types/react-map-gl/react-map-gl-tests.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import {
-    ViewState,
     InteractiveMap,
     CanvasOverlay,
     SVGOverlay,
@@ -10,22 +9,31 @@ import {
     CanvasRedrawOptions,
     HTMLRedrawOptions,
     SVGRedrawOptions,
-    StaticMap
+    StaticMap,
+    ViewportProps
 } from 'react-map-gl';
 import * as MapboxGL from "mapbox-gl";
 
 interface State {
-    viewState: ViewState;
+    viewport: ViewportProps;
 }
 
 class MyMap extends React.Component<{}, State> {
     readonly state: State = {
-        viewState: {
+        viewport: {
+            width: 400,
+            height: 400,
             bearing: 0,
             latitude: 0,
             longitude: 0,
             zoom: 3,
-        }
+            pitch: 0,
+            altitude: 1.5,
+            maxZoom: 20,
+            minZoom: 0,
+            maxPitch: 60,
+            minPitch: 0,
+        },
     };
     private map: MapboxGL.Map;
 
@@ -33,11 +41,11 @@ class MyMap extends React.Component<{}, State> {
         return (
             <div>
                 <InteractiveMap
-                    {...this.state.viewState}
+                    {...this.state.viewport}
                     mapboxApiAccessToken="pk.test"
-                    height={400}
-                    width={400}
                     ref={this.setRefInteractive}
+                    onViewportChange={viewport => this.setState({ viewport })}
+                    onViewStateChange={({ viewState }) => this.setState({ viewport: viewState })}
                 >
                     <FullscreenControl className="test-class" container={document.querySelector('body')} />
                     <GeolocateControl className="test-class" style={{ marginTop: "8px" }} />
@@ -102,7 +110,7 @@ class MyMap extends React.Component<{}, State> {
                     />
                 </InteractiveMap>
                 <StaticMap
-                    {...this.state.viewState}
+                    {...this.state.viewport}
                     mapboxApiAccessToken="pk.test"
                     height={400}
                     width={400}