From 32b6d5ef2a9d86ca71075fa19cb3fc42b2a66ba1 Mon Sep 17 00:00:00 2001
From: Otto Urpelainen <oturpe@iki.fi>
Date: Fri, 4 Oct 2019 01:49:20 +0300
Subject: [PATCH] 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             | 33 ++++++++++++++++-------
 types/react-map-gl/react-map-gl-tests.tsx | 26 +++++++++++-------
 2 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/types/react-map-gl/index.d.ts b/types/react-map-gl/index.d.ts
index d36f2dfaf0..40ffc13c31 100644
--- a/types/react-map-gl/index.d.ts
+++ b/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;
 }
diff --git a/types/react-map-gl/react-map-gl-tests.tsx b/types/react-map-gl/react-map-gl-tests.tsx
index 2978c53273..43bc073674 100644
--- a/types/react-map-gl/react-map-gl-tests.tsx
+++ b/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}