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

…w and InfoBox
tomchentw · Jun 19, 2015 · e0b4ffb · e0b4ffb
1 parent 18606f5
commit e0b4ffb
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 12 deletions.
diff --git a/examples/gh-pages/scripts/components/events/ClosureListeners.js b/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;
     }
   }
 

diff --git a/lib/InfoWindow.js b/lib/InfoWindow.js
@@ -44,7 +44,7 @@ var InfoWindow = (function (_SimpleChildComponent) {
   _createClass(InfoWindow, [{
     key: "_createOrUpdateInstance",
     value: function _createOrUpdateInstance() {
-      var instance = _get(Object.getPrototypeOf(InfoWindow.prototype), "_createOrUpdateInstance", this).call(this);
+      var instance = _get(Object.getPrototypeOf(InfoWindow.prototype), "_createOrUpdateInstance", this).call(this, _get(Object.getPrototypeOf(InfoWindow.prototype), "_handleMissingContentProp", this).call(this, this.props));
       if (instance) {
         instance.open(this.props.map, this.props.anchor);
       }

diff --git a/lib/addons/InfoBox.js b/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), "_handleMissingContentProp", this).call(this, googleMapsConfig));
         (0, _internalsExposeGetters2["default"])(this, GoogleMapsInfobox.prototype, instance);
         this.setState({ instance: instance });
         instance.open(this.props.map, this.props.anchor);

diff --git a/lib/internals/SimpleChildComponent.js b/lib/internals/SimpleChildComponent.js
@@ -63,9 +63,8 @@ var SimpleChildComponent = (function (_EventComponent) {
 
   _createClass(SimpleChildComponent, [{
     key: "_createOrUpdateInstance",
-    value: function _createOrUpdateInstance() {
-      var props = this.props;
-
+    value: function _createOrUpdateInstance(updatedProps) {
+      var props = updatedProps ? updatedProps : this.props;
       if (!props.googleMapsApi || !props.map) {
         return;
       }
@@ -90,12 +89,27 @@ var SimpleChildComponent = (function (_EventComponent) {
         }
         var GoogleMapsClass = _objectPath2["default"].get(googleMapsApi, googleMapsClassName);
         instance = new GoogleMapsClass(googleMapsConfig);
-
         (0, _exposeGetters2["default"])(this, GoogleMapsClass.prototype, instance);
         this.setState({ instance: instance });
       }
       return instance;
     }
+  }, {
+    key: "_handleMissingContentProp",
+    value: function _handleMissingContentProp(mapConfig) {
+      if (mapConfig.content) {
+        return mapConfig;
+      } 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);
+        mapConfig.content = detachedDiv;
+        return mapConfig;
+      }
+    }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {

diff --git a/src/InfoWindow.js b/src/InfoWindow.js
@@ -8,7 +8,7 @@ const {PropTypes} = React;
 class InfoWindow extends SimpleChildComponent {
 
   _createOrUpdateInstance () {
-    const instance = super._createOrUpdateInstance();
+    const instance = super._createOrUpdateInstance(super._handleMissingContentProp(this.props));
     if (instance) {
       instance.open(
         this.props.map,

diff --git a/src/addons/InfoBox.js b/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._handleMissingContentProp(googleMapsConfig));
       exposeGetters(this, GoogleMapsInfobox.prototype, instance);
       this.setState({instance});
       instance.open(

diff --git a/src/internals/SimpleChildComponent.js b/src/internals/SimpleChildComponent.js
@@ -19,8 +19,8 @@ class SimpleChildComponent extends EventComponent {
     this.state = {};
   }
 
-  _createOrUpdateInstance () {
-    const {props} = this;
+  _createOrUpdateInstance (updatedProps) {
+    const props = updatedProps? updatedProps : this.props;
     if (!props.googleMapsApi || !props.map) {
       return;
     }
@@ -47,13 +47,28 @@ class SimpleChildComponent extends EventComponent {
       }
       const GoogleMapsClass = objectPath.get(googleMapsApi, googleMapsClassName);
       instance = new GoogleMapsClass(googleMapsConfig);
-
+      
       exposeGetters(this, GoogleMapsClass.prototype, instance);
       this.setState({instance});
     }
     return instance;
   }
 
+  _handleMissingContentProp(mapConfig) {
+    if (mapConfig.content) {
+      return mapConfig;
+    } 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);
+      mapConfig.content = detachedDiv;
+      return mapConfig;
+    }
+  }
+
   componentWillUnmount () {
     super.componentWillUnmount();
     const {instance} = this.state;