[google] PR feedback, fix CAAnimation bug

components/MapCallout.js

@@ -3,7 +3,10 @@ import {
   View,
   StyleSheet,
 } from 'react-native';
-import { decorateMapComponent, SUPPORTED, USES_DEFAULT_IMPLEMENTATION } from './common';
+import decorateMapComponent, {
+  SUPPORTED,
+  USES_DEFAULT_IMPLEMENTATION,
+} from './decorateMapComponent';
 
 const propTypes = {
   ...View.propTypes,

components/MapCircle.js

@@ -2,7 +2,10 @@ import React, { PropTypes } from 'react';
 import {
   View,
 } from 'react-native';
-import { decorateMapComponent, USES_DEFAULT_IMPLEMENTATION, NOT_SUPPORTED } from './common';
+import decorateMapComponent, {
+  USES_DEFAULT_IMPLEMENTATION,
+  NOT_SUPPORTED,
+} from './decorateMapComponent';
 
 const propTypes = {
   ...View.propTypes,

components/MapMarker.js

@@ -9,10 +9,13 @@ import {
 } from 'react-native';
 
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
-import { decorateMapComponent, SUPPORTED, USES_DEFAULT_IMPLEMENTATION } from './common';
+import decorateMapComponent, {
+  SUPPORTED,
+  USES_DEFAULT_IMPLEMENTATION,
+} from './decorateMapComponent';
 
 const viewConfig = {
-  uiViewClassName: 'AIR?MapMarker',
+  uiViewClassName: 'AIR<provider>MapMarker',
   validAttributes: {
     coordinate: true,
   },

components/MapPolygon.js

@@ -2,7 +2,10 @@ import React, { PropTypes } from 'react';
 import {
   View,
 } from 'react-native';
-import { decorateMapComponent, USES_DEFAULT_IMPLEMENTATION, NOT_SUPPORTED } from './common';
+import decorateMapComponent, {
+  USES_DEFAULT_IMPLEMENTATION,
+  NOT_SUPPORTED,
+} from './decorateMapComponent';
 
 const propTypes = {
   ...View.propTypes,

components/MapPolyline.js

@@ -2,7 +2,10 @@ import React, { PropTypes } from 'react';
 import {
   View,
 } from 'react-native';
-import { decorateMapComponent, USES_DEFAULT_IMPLEMENTATION, NOT_SUPPORTED } from './common';
+import decorateMapComponent, {
+  USES_DEFAULT_IMPLEMENTATION,
+  NOT_SUPPORTED,
+} from './decorateMapComponent';
 
 const propTypes = {
   ...View.propTypes,

components/MapView.js

@@ -15,14 +15,14 @@ import MapPolygon from './MapPolygon';
 import MapCircle from './MapCircle';
 import MapCallout from './MapCallout';
 import {
-  contextTypes,
-  airMapName,
-  AIRGoogleMapIsInstalled,
+  contextTypes as childContextTypes,
+  getAirMapName,
+  googleMapIsInstalled,
   createNotSupportedComponent,
-} from './common';
+} from './decorateMapComponent';
 
 const viewConfig = {
-  uiViewClassName: 'AIR?Map',
+  uiViewClassName: 'AIR<provider>Map',
   validAttributes: {
     region: true,
   },
@@ -31,13 +31,11 @@ const viewConfig = {
 const propTypes = {
   ...View.propTypes,
   /**
-   * When mapProvider is "google", we will use GoogleMaps.
+   * When provider is "google", we will use GoogleMaps.
    * Any value other than "google" will default to using
    * MapKit in iOS or GoogleMaps in android as the map provider.
    */
-  mapProvider: PropTypes.oneOf([
-    null,
-    undefined,
+  provider: PropTypes.oneOf([
     'google',
   ]),
 
@@ -342,7 +340,7 @@ class MapView extends React.Component {
   }
 
   getChildContext() {
-    return { mapProvider: this.props.mapProvider };
+    return { provider: this.props.provider };
   }
 
   componentDidMount() {
@@ -426,11 +424,11 @@ class MapView extends React.Component {
   }
 
   _uiManagerCommand(name) {
-    return NativeModules.UIManager[airMapName(this.props.mapProvider)].Commands[name];
+    return NativeModules.UIManager[getAirMapName(this.props.provider)].Commands[name];
   }
 
   _mapManagerCommand(name) {
-    return NativeModules[`${airMapName(this.props.mapProvider)}Manager`][name];
+    return NativeModules[`${getAirMapName(this.props.provider)}Manager`][name];
   }
 
   _getHandle() {
@@ -486,7 +484,7 @@ class MapView extends React.Component {
       };
     }
 
-    const AIRMap = airMapComponent(this.props.mapProvider);
+    const AIRMap = airMapComponent(this.props.provider);
 
     return (
       <AIRMap
@@ -499,7 +497,7 @@ class MapView extends React.Component {
 
 MapView.propTypes = propTypes;
 MapView.viewConfig = viewConfig;
-MapView.childContextTypes = contextTypes;
+MapView.childContextTypes = childContextTypes;
 
 const nativeComponent = Component => requireNativeComponent(Component, MapView, {
   nativeOnly: {
@@ -514,10 +512,10 @@ const airMaps = {
 if (Platform.OS === 'android') {
   airMaps.google = airMaps.default;
 } else {
-  airMaps.google = AIRGoogleMapIsInstalled ? nativeComponent('AIRGoogleMap') :
+  airMaps.google = googleMapIsInstalled ? nativeComponent('AIRGoogleMap') :
     createNotSupportedComponent('react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS.'); // eslint-disable-line max-len
 }
-const airMapComponent = mapProvider => airMaps[mapProvider || 'default'];
+const airMapComponent = provider => airMaps[provider || 'default'];
 
 MapView.Marker = MapMarker;
 MapView.Polyline = MapPolyline;

components/decorateMapComponent.js

@@ -0,0 +1,65 @@
+/* eslint-disable */
+
+import { PropTypes } from 'react';
+import {
+  requireNativeComponent,
+  NativeModules,
+  Platform,
+} from 'react-native';
+
+export const SUPPORTED = 'SUPPORTED';
+export const USES_DEFAULT_IMPLEMENTATION = 'USES_DEFAULT_IMPLEMENTATION';
+export const NOT_SUPPORTED = 'NOT_SUPPORTED';
+
+export function getAirMapName(provider) {
+  if (provider === 'google') return 'AIRGoogleMap';
+  return 'AIRMap';
+}
+
+function getAirComponentName(provider, component) {
+  return `${getAirMapName(provider)}${component}`;
+}
+
+export const contextTypes = {
+  provider: PropTypes.string,
+};
+
+export const createNotSupportedComponent = message => () => console.error(message) || null;
+
+export const googleMapIsInstalled = !!NativeModules.UIManager[getAirMapName('google')];
+
+export default function decorateMapComponent(Component, { componentType, providers }) {
+  const components = {
+    default: requireNativeComponent(getAirComponentName(null, componentType), Component),
+  };
+
+  Object.entries(providers).forEach(([provider, providerInfo]) => {
+    const platformSupport = providerInfo[Platform.OS];
+    const componentName = getAirComponentName(provider, componentType);
+    if (platformSupport === NOT_SUPPORTED) {
+      components[provider] = createNotSupportedComponent(`react-native-maps: ${componentName} is not supported on ${Platform.OS}`);
+    } else if (platformSupport === USES_DEFAULT_IMPLEMENTATION) {
+      components[provider] = components.default;
+    } else { // (platformSupport === SUPPORTED)
+      if (Platform.OS === 'android' || (Platform.OS === 'ios' && googleMapIsInstalled)) {
+        components[provider] = requireNativeComponent(componentName, Component);
+      }
+    }
+  });
+
+  Component.contextTypes = contextTypes;
+  Component.prototype.airComponent = function() {
+    return components[this.context.provider || 'default'];
+  };
+
+  Component.prototype.uiManagerCommand = function(name) {
+    return NativeModules.UIManager[getAirComponentName(this.context.provider, componentType)]
+      .Commands[name];
+  };
+
+  Component.prototype.mapManagerCommand = function(name) {
+    return NativeModules[`${getAirComponentName(this.context.provider, componentType)}Manager`][name];
+  };
+
+  return Component;
+}

docs/mapview.md

@@ -4,7 +4,7 @@
 
 | Prop | Type | Default | Note |
 |---|---|---|---|
-| `mapRegion` | `string` |  | The map framework to use. <br/><br/>Either `"google"` for GoogleMaps, otherwise `null` or `undefined` to use the native map framework (`MapKit` in iOS and `GoogleMaps` in android).
+| `provider` | `string` |  | The map framework to use. <br/><br/>Either `"google"` for GoogleMaps, otherwise `null` or `undefined` to use the native map framework (`MapKit` in iOS and `GoogleMaps` in android).
 | `region` | `Region` |  | The region to be displayed by the map. <br/><br/>The region is defined by the center coordinates and the span of coordinates to display.
 | `initialRegion` | `Region` |  | The initial region to be displayed by the map.  Use this prop instead of `region` only if you don't want to control the viewport of the map besides the initial region.<br/><br/> Changing this prop after the component has mounted will not result in a region change.<br/><br/> This is similar to the `initialValue` prop of a text input.
 | `mapType` | `String` | `"standard"` | The map type to be displayed. <br/><br/> - standard: standard road map (default)<br/> - satellite: satellite view<br/> - hybrid: satellite view with roads and points of interest overlayed<br/> - terrain: (Android only) topographic view

example/ios/Podfile

@@ -9,18 +9,18 @@ platform :ios, '8.0'
 use_frameworks!
 
 target 'AirMapsExplorer' do
-	pod 'React', path: '../node_modules/react-native', :subspecs => [
-      'Core',
-      'RCTActionSheet',
-      'RCTGeolocation',
-      'RCTImage',
-      'RCTLinkingIOS',
-      'RCTNetwork',
-      'RCTSettings',
-      'RCTText',
-      'RCTVibration',
-      'RCTWebSocket'
-    ]
+  pod 'React', path: '../node_modules/react-native', :subspecs => [
+    'Core',
+    'RCTActionSheet',
+    'RCTGeolocation',
+    'RCTImage',
+    'RCTLinkingIOS',
+    'RCTNetwork',
+    'RCTSettings',
+    'RCTText',
+    'RCTVibration',
+    'RCTWebSocket'
+  ]
 
 # when not using frameworks  we can do this instead of including the source files in our project (1/4):
 # pod 'react-native-maps', path: '../../'

example/ios/Podfile.lock

@@ -4,27 +4,27 @@ PODS:
   - GoogleMaps/Base (2.0.1)
   - GoogleMaps/Maps (2.0.1):
     - GoogleMaps/Base (= 2.0.1)
-  - React/Core (0.32.1):
+  - React/Core (0.33.0):
     - React/CSSLayout
-  - React/CSSLayout (0.32.1)
-  - React/RCTActionSheet (0.32.1):
+  - React/CSSLayout (0.33.0)
+  - React/RCTActionSheet (0.33.0):
     - React/Core
-  - React/RCTGeolocation (0.32.1):
+  - React/RCTGeolocation (0.33.0):
     - React/Core
-  - React/RCTImage (0.32.1):
+  - React/RCTImage (0.33.0):
     - React/Core
     - React/RCTNetwork
-  - React/RCTLinkingIOS (0.32.1):
+  - React/RCTLinkingIOS (0.33.0):
     - React/Core
-  - React/RCTNetwork (0.32.1):
+  - React/RCTNetwork (0.33.0):
     - React/Core
-  - React/RCTSettings (0.32.1):
+  - React/RCTSettings (0.33.0):
     - React/Core
-  - React/RCTText (0.32.1):
+  - React/RCTText (0.33.0):
     - React/Core
-  - React/RCTVibration (0.32.1):
+  - React/RCTVibration (0.33.0):
     - React/Core
-  - React/RCTWebSocket (0.32.1):
+  - React/RCTWebSocket (0.33.0):
     - React/Core
 
 DEPENDENCIES:
@@ -46,6 +46,6 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   GoogleMaps: f09da64fc987c1aa29394567c3cab5a3df83c402
-  React: 304abd16605aeff4b114da814812a78de24d4ca5
+  React: 46edc166689ba71b0b6cf11e64dbdb258d177089
 
 COCOAPODS: 0.39.0

ios/AirMaps/Callout/SMCalloutView.h

@@ -40,7 +40,7 @@ extern NSTimeInterval const kSMCalloutViewRepositionDelayForUIScrollView;
 // Callout view.
 //
 
-@interface SMCalloutView : UIView
+@interface SMCalloutView : UIView <CAAnimationDelegate>
 
 @property (nonatomic, weak, nullable) id<SMCalloutViewDelegate> delegate;
 /// title/titleView relationship mimics UINavigationBar.
@@ -197,4 +197,4 @@ extern NSTimeInterval const kSMCalloutViewRepositionDelayForUIScrollView;
 - (void)calloutViewDidDisappear:(SMCalloutView *)calloutView;
 
 NS_ASSUME_NONNULL_END
-@end
+@end