Fix control icons when used with mapbox-gl@>=1.6 (#967)

src/components/fullscreen-control.js

@@ -113,7 +113,9 @@ export default class FullscreenControl extends BaseControl<
         type="button"
         title={label}
         onClick={callback}
-      />
+      >
+        <span className="mapboxgl-ctrl-icon" aria-hidden="true" />
+      </button>
     );
   }
 

src/components/geolocate-control.js

@@ -216,7 +216,9 @@ export default class GeolocateControl extends BaseControl<
         type="button"
         title={label}
         onClick={callback}
-      />
+      >
+        <span className="mapboxgl-ctrl-icon" aria-hidden="true" />
+      </button>
     );
   };
 

src/components/navigation-control.js

@@ -7,6 +7,7 @@ import MapState from '../utils/map-state';
 import {LINEAR_TRANSITION_PROPS} from '../utils/map-controller';
 
 import deprecateWarn from '../utils/deprecate-warn';
+import {compareVersions} from '../utils/version';
 
 import type {BaseControlProps} from './base-control';
 
@@ -57,6 +58,14 @@ type ViewportProps = {
   bearing: number
 };
 
+// Mapbox version flags. CSS classes were changed in certain versions.
+const VERSION_LEGACY = 1;
+const VERSION_1_6 = 2;
+
+function getUIVersion(mapboxVersion: string): number {
+  return compareVersions(mapboxVersion, '1.6.0') >= 0 ? VERSION_1_6 : VERSION_LEGACY;
+}
+
 /*
  * PureComponent doesn't update when context changes, so
  * implementing our own shouldComponentUpdate here.
@@ -75,6 +84,8 @@ export default class NavigationControl extends BaseControl<
     deprecateWarn(props);
   }
 
+  _uiVersion: number;
+
   _updateViewport(opts: $Shape<ViewportProps>) {
     const {viewport} = this._context;
     const mapState = new MapState(Object.assign({}, viewport, opts));
@@ -105,8 +116,12 @@ export default class NavigationControl extends BaseControl<
 
   _renderCompass() {
     const {bearing} = this._context.viewport;
-    return (
-      <span className="mapboxgl-ctrl-compass-arrow" style={{transform: `rotate(${-bearing}deg)`}} />
+    const style = {transform: `rotate(${-bearing}deg)`};
+
+    return this._uiVersion === VERSION_1_6 ? (
+      <span className="mapboxgl-ctrl-icon" aria-hidden="true" style={style} />
+    ) : (
+      <span className="mapboxgl-ctrl-compass-arrow" style={style} />
     );
   }
 
@@ -119,7 +134,7 @@ export default class NavigationControl extends BaseControl<
         title={label}
         onClick={callback}
       >
-        {children}
+        {children || <span className="mapboxgl-ctrl-icon" aria-hidden="true" />}
       </button>
     );
   }
@@ -127,6 +142,10 @@ export default class NavigationControl extends BaseControl<
   _render() {
     const {className, showCompass, showZoom, zoomInLabel, zoomOutLabel, compassLabel} = this.props;
 
+    if (!this._uiVersion) {
+      this._uiVersion = getUIVersion(this._context.map.version);
+    }
+
     return (
       <div className={`mapboxgl-ctrl mapboxgl-ctrl-group ${className}`} ref={this._containerRef}>
         {showZoom && this._renderButton('zoom-in', zoomInLabel, this._onZoomIn)}

src/utils/version.js

@@ -0,0 +1,25 @@
+// @flow
+
+// Helper function for version comparison
+// A version is a string in the format of "{major}.{minor}.{patch}"
+// Empty/missing version is treated as "0.0.0"
+// If version1 is smaller than version2, return -1
+// If version1 is larger than version2, return 1
+// If equal, return 0
+export function compareVersions(version1: string, version2: string): number {
+  const v1 = (version1 || '').split('.').map(Number);
+  const v2 = (version2 || '').split('.').map(Number);
+
+  for (let i = 0; i < 3; i++) {
+    const part1 = v1[i] || 0;
+    const part2 = v2[i] || 0;
+    if (part1 < part2) {
+      return -1;
+    }
+    if (part1 > part2) {
+      return 1;
+    }
+  }
+
+  return 0;
+}

test/src/utils/index.js

@@ -6,3 +6,4 @@ import './transition-manager.spec';
 import './debounce.spec';
 import './deep-equal.spec';
 import './style-utils.spec';
+import './version.spec';

test/src/utils/version.spec.js

@@ -0,0 +1,46 @@
+import test from 'tape-catch';
+
+import {compareVersions} from 'react-map-gl/utils/version';
+
+test('compareVersions', t => {
+  const TEST_CASES = [
+    {
+      title: 'both empty',
+      version1: undefined,
+      version2: null,
+      expected: 0
+    },
+    {
+      title: 'one empty',
+      version1: undefined,
+      version2: '1.6.0',
+      expected: -1
+    },
+    {
+      title: 'major version diff',
+      version1: '0.53.1',
+      version2: '1.3.0',
+      expected: -1
+    },
+    {
+      title: 'minor version diff',
+      version1: '1.6.0',
+      version2: '1.13.0',
+      expected: -1
+    },
+    {
+      title: 'patch version diff',
+      version1: '1.6',
+      version2: '1.6.1',
+      expected: -1
+    }
+  ];
+
+  for (const testCase of TEST_CASES) {
+    t.is(compareVersions(testCase.version1, testCase.version2), testCase.expected, testCase.title);
+    // reverse order
+    t.is(compareVersions(testCase.version2, testCase.version1), -testCase.expected, testCase.title);
+  }
+
+  t.end();
+});