feat(InfoReactElement): allow React elements as content for InfoWindo…

…w and InfoBox

examples/gh-pages/scripts/components/basics/StyledMap.js

@@ -4,18 +4,15 @@ import InfoBox from "react-google-maps/addons/InfoBox";
 
 class StyledMap extends React.Component {
 
+  _test_component_click(e) {
+    console.log("clicked InfoBox");
+  }
+
   render () {
     const {props, state} = this,
           {googleMapsApi, mapStyles, ...otherProps} = props;
     const myLatLng = new google.maps.LatLng(25.03, 121.6);
 
-    const InfoBoxContent = `
-      <div style="background-color:yellow; opacity:0.75;">
-        <div style="font-size: 16px; font-color:#08233B">
-          Taipei
-        </div>
-      </div>
-    `;
     return (
       <GoogleMaps containerProps={{
           ...otherProps,
@@ -30,7 +27,13 @@ class StyledMap extends React.Component {
         <InfoBox
           closeBoxURL=""
           position={myLatLng}
-          content={InfoBoxContent}/>
+          enableEventPropagation={true}>
+            <div style={{backgroundColor: 'yellow', opacity: '0.75'}} onClick={this._test_component_click}>
+              <div style={{fontSize: 16, fontColor: '#08233B'}}>
+                Taipei
+              </div>
+            </div>
+        </InfoBox>
       </GoogleMaps>
     );
   }

examples/gh-pages/scripts/components/events/ClosureListeners.js

@@ -49,6 +49,10 @@ class ClosureListeners extends React.Component {
     this.setState(this.state);
   }
 
+  _handle_infowindow_click () {
+    console.log('clicked InfoWindow');
+  }
+
   render () {
     const {props, state} = this,
           {googleMapsApi, ...otherProps} = props;
@@ -81,7 +85,9 @@ class ClosureListeners extends React.Component {
 
     function renderInfoWindow (marker, index) {
       var ref = `marker_${index}`;
-      return marker.showInfo ? <InfoWindow key={`${ref}_info_window`} owner={ref} content={marker.content} onCloseclick={this._handle_closeclick.bind(this, marker)} /> : null;
+      return marker.showInfo ? <InfoWindow key={`${ref}_info_window`} owner={ref} onCloseclick={this._handle_closeclick.bind(this, marker)}>
+          <div onClick={this._handle_infowindow_click} className="own-css-class" wrapperClassName="wrapper-css-class"> {marker.content} </div>
+        </InfoWindow> : null;
     }
   }
 

lib/addons/InfoBox.js

@@ -70,7 +70,7 @@ var InfoBox = (function (_SimpleChildComponent) {
         // As a result, we import "google-maps-infobox" here to prevent an error on
         // a isomorphic server.
         var GoogleMapsInfobox = require("google-maps-infobox");
-        instance = new GoogleMapsInfobox(googleMapsConfig);
+        instance = new GoogleMapsInfobox(_get(Object.getPrototypeOf(InfoBox.prototype), "_handleMissingContent", this).call(this, googleMapsConfig));
         (0, _internalsExposeGetters2["default"])(this, GoogleMapsInfobox.prototype, instance);
         this.setState({ instance: instance });
         instance.open(this.props.map, this.props.anchor);

lib/internals/SimpleChildComponent.js

@@ -81,21 +81,38 @@ var SimpleChildComponent = (function (_EventComponent) {
           delete googleMapsConfig.map;
           delete googleMapsConfig.animation;
         }
-        instance.setOptions(googleMapsConfig);
+        instance.setOptions(this._handleMissingContent(googleMapsConfig));
       } else {
         var googleMapsClassName = this.constructor._GoogleMapsClassName;
         if (!_objectPath2["default"].has(googleMapsApi, googleMapsClassName)) {
           (0, _reactLibWarning2["default"])(false, "This react-google-maps component can't find the corresponding " + "Google Maps API class 'google.maps.%s'. You may have to include " + "additional Google Maps libraries in your javascript src URL. " + "See: https://developers.google.com/maps/documentation/javascript/libraries", googleMapsClassName);
           return;
         }
         var GoogleMapsClass = _objectPath2["default"].get(googleMapsApi, googleMapsClassName);
-        instance = new GoogleMapsClass(googleMapsConfig);
+        instance = new GoogleMapsClass(this._handleMissingContent(googleMapsConfig));
 
         (0, _exposeGetters2["default"])(this, GoogleMapsClass.prototype, instance);
         this.setState({ instance: instance });
       }
       return instance;
     }
+  }, {
+    key: "_handleMissingContent",
+    value: function _handleMissingContent(config) {
+      var googleMapsClassName = this.constructor._GoogleMapsClassName;
+      if (googleMapsClassName !== "InfoWindow" && googleMapsClassName !== "InfoBox" || config.content) {
+        return config;
+      } else {
+        var detachedDiv = document.createElement("div"),
+            childComponent = _react2["default"].Children.only(this.props.children);
+        if (childComponent.props.wrapperClassName) {
+          detachedDiv.className = childComponent.props.wrapperClassName;
+        }
+        _react2["default"].render(childComponent, detachedDiv);
+        config.content = detachedDiv;
+        return config;
+      }
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {

src/addons/InfoBox.js

@@ -26,7 +26,7 @@ class InfoBox extends SimpleChildComponent {
       // As a result, we import "google-maps-infobox" here to prevent an error on
       // a isomorphic server.
       const GoogleMapsInfobox = require("google-maps-infobox");
-      instance = new GoogleMapsInfobox(googleMapsConfig);
+      instance = new GoogleMapsInfobox(super._handleMissingContent(googleMapsConfig));
       exposeGetters(this, GoogleMapsInfobox.prototype, instance);
       this.setState({instance});
       instance.open(

src/internals/SimpleChildComponent.js

@@ -26,14 +26,13 @@ class SimpleChildComponent extends EventComponent {
     }
     const {googleMapsApi, ...googleMapsConfig} = props;
     var {instance} = this.state;
-
     if (instance) {
       if (googleMapsConfig.map === instance.getMap()) {
         // Set map and animation props only on the first run:
         delete googleMapsConfig.map;
         delete googleMapsConfig.animation;
       }
-      instance.setOptions(googleMapsConfig);
+      instance.setOptions(this._handleMissingContent(googleMapsConfig));
     } else {
       const googleMapsClassName = this.constructor._GoogleMapsClassName;
       if (!objectPath.has(googleMapsApi, googleMapsClassName)) {
@@ -46,14 +45,30 @@ class SimpleChildComponent extends EventComponent {
         return;
       }
       const GoogleMapsClass = objectPath.get(googleMapsApi, googleMapsClassName);
-      instance = new GoogleMapsClass(googleMapsConfig);
+      instance = new GoogleMapsClass(this._handleMissingContent(googleMapsConfig));
 
       exposeGetters(this, GoogleMapsClass.prototype, instance);
       this.setState({instance});
     }
     return instance;
   }
 
+  _handleMissingContent(config) {
+    const googleMapsClassName = this.constructor._GoogleMapsClassName;
+    if ((googleMapsClassName !== "InfoWindow" && googleMapsClassName !== "InfoBox") || config.content) {
+      return config;
+    } else {
+      var detachedDiv = document.createElement("div"),
+          childComponent = React.Children.only(this.props.children);
+      if (childComponent.props.wrapperClassName) {
+          detachedDiv.className = childComponent.props.wrapperClassName;
+      }
+      React.render(childComponent, detachedDiv);
+      config.content = detachedDiv;
+      return config;
+    }
+  }
+
   componentWillUnmount () {
     super.componentWillUnmount();
     const {instance} = this.state;

src/internals/VirtualContainer.js

@@ -16,7 +16,7 @@ class VirtualContainer extends React.Component {
     const {props} = this;
     const extraProps = {
       googleMapsApi: props.googleMapsApi,
-      map: props.map,
+      map: props.map
     };
 
     return React.Children.map(props.children, (child) => {