feat: support react 17 (#1)

Author: mihkeleidast

example/package-lock.json

@@ -29,8 +29,8 @@
   "dependencies": {
     "es6-promisify": "5.0.0",
     "raw.macro": "^0.3.0",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-live": "2.2.1",
     "react-markdown": "2.5.1",
     "react-router": "3.0.5",
@@ -42,8 +42,8 @@
   "devDependencies": {
     "@types/enzyme": "3.1.14",
     "@types/es6-promisify": "5.0.0",
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.3",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
     "@types/react-router": "3.0.13",
     "@types/xml2js": "0.4.0",
     "gh-pages": "1.0.0"

example/package.json

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HeatmapPaint } from 'mapbox-gl';
 import ReactMapboxGl, { Layer, Feature } from '../../../';
 
 // tslint:disable-next-line:no-var-requires
@@ -17,7 +18,7 @@ export interface Props {
   onStyleLoad?: (map: any) => any;
 }
 
-const layerPaint = {
+const layerPaint: HeatmapPaint = {
   'heatmap-weight': {
     property: 'priceIndicator',
     type: 'exponential',

example/src/demos/heatmap.tsx

@@ -48,7 +48,7 @@ const StyledPopup = styled.div`
 
 export interface State {
   popup?: {
-    coordinates: GeoJSON.Position;
+    coordinates: [number, number];
     total: number;
     leaves: Array<React.ReactElement<any>>;
   };
@@ -67,7 +67,7 @@ class HtmlCluster extends React.Component<Props, State> {
   private zoom: [number] = [4];
 
   private clusterMarker = (
-    coordinates: GeoJSON.Position,
+    coordinates: [number, number],
     pointCount: number,
     getLeaves: (
       limit?: number,
@@ -91,7 +91,7 @@ class HtmlCluster extends React.Component<Props, State> {
   };
 
   private clusterClick = (
-    coordinates: GeoJSON.Position,
+    coordinates: [number, number],
     total: number,
     getLeaves: (
       limit?: number,

example/src/demos/htmlCluster.tsx

@@ -113,9 +113,24 @@ export default class LondonCycle extends React.Component<Props, State> {
           {Object.keys(stations).map((stationK, index) => (
             <Feature
               key={stationK}
-              onMouseEnter={this.onToggleHover.bind(this, 'pointer')}
-              onMouseLeave={this.onToggleHover.bind(this, '')}
-              onClick={this.markerClick.bind(this, stations[stationK])}
+              onMouseEnter={
+                (this.onToggleHover.bind(
+                  this,
+                  'pointer'
+                ) as unknown) as React.MouseEventHandler<HTMLElement>
+              }
+              onMouseLeave={
+                (this.onToggleHover.bind(
+                  this,
+                  ''
+                ) as unknown) as React.MouseEventHandler<HTMLElement>
+              }
+              onClick={
+                (this.markerClick.bind(
+                  this,
+                  stations[stationK]
+                ) as unknown) as React.MouseEventHandler<HTMLElement>
+              }
               coordinates={stations[stationK].position}
             />
           ))}

example/src/demos/londonCycle.tsx

@@ -3,7 +3,7 @@ import promisify from 'es6-promisify';
 export interface Station {
   id: string;
   name: string;
-  position: number[];
+  position: [number, number];
   bikes: number;
   slots: number;
 }

example/src/demos/londonCycleData.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HeatmapPaint } from 'mapbox-gl';
 import ReactMapboxGl, { Layer, Feature } from '../../../';
 
 // tslint:disable-next-line:no-var-requires
@@ -17,7 +18,7 @@ export interface Props {
   onStyleLoad?: (map: any) => any;
 }
 
-const layerPaint = {
+const layerPaint: HeatmapPaint = {
   'heatmap-weight': {
     property: 'priceIndicator',
     type: 'exponential',

example/src/demos/raws/heatmap.raw

@@ -48,7 +48,7 @@ const StyledPopup = styled.div`
 
 export interface State {
   popup?: {
-    coordinates: GeoJSON.Position;
+    coordinates: [number, number];
     total: number;
     leaves: Array<React.ReactElement<any>>;
   };
@@ -67,7 +67,7 @@ class HtmlCluster extends React.Component<Props, State> {
   private zoom: [number] = [4];
 
   private clusterMarker = (
-    coordinates: GeoJSON.Position,
+    coordinates: [number, number],
     pointCount: number,
     getLeaves: (
       limit?: number,
@@ -91,7 +91,7 @@ class HtmlCluster extends React.Component<Props, State> {
   };
 
   private clusterClick = (
-    coordinates: GeoJSON.Position,
+    coordinates: [number, number],
     total: number,
     getLeaves: (
       limit?: number,

example/src/demos/raws/htmlCluster.raw

@@ -113,9 +113,24 @@ export default class LondonCycle extends React.Component<Props, State> {
           {Object.keys(stations).map((stationK, index) => (
             <Feature
               key={stationK}
-              onMouseEnter={this.onToggleHover.bind(this, 'pointer')}
-              onMouseLeave={this.onToggleHover.bind(this, '')}
-              onClick={this.markerClick.bind(this, stations[stationK])}
+              onMouseEnter={
+                (this.onToggleHover.bind(
+                  this,
+                  'pointer'
+                ) as unknown) as React.MouseEventHandler<HTMLElement>
+              }
+              onMouseLeave={
+                (this.onToggleHover.bind(
+                  this,
+                  ''
+                ) as unknown) as React.MouseEventHandler<HTMLElement>
+              }
+              onClick={
+                (this.markerClick.bind(
+                  this,
+                  stations[stationK]
+                ) as unknown) as React.MouseEventHandler<HTMLElement>
+              }
               coordinates={stations[stationK].position}
             />
           ))}

example/src/demos/raws/londonCycle.raw

@@ -104,7 +104,7 @@ export default class VectorLayer extends React.Component<Props> {
           <Layer
             id="mapillary"
             type="line"
-            source="mapillary"
+            sourceId="mapillary"
             sourceLayer="mapillary-sequences"
             layout={lineLayout}
             paint={linePaint}