Merge pull request #1 from yhsiang/infowindow

feat(InfoWindow): component with example

client/scripts/index.js

@@ -4,7 +4,7 @@ require("../styles/index.scss");
 var React = require("react/addons");
 var {update} = React.addons;
 
-var {GoogleMapsMixin, Map, Marker, Polygon, Polyline} = require("../../src");
+var {GoogleMapsMixin, Map, Marker, Polygon, Polyline, InfoWindow} = require("../../src");
 
 function geometryToComponentWithLatLng (geometry) {
   var typeFromThis = Array.isArray(geometry);
@@ -27,6 +27,7 @@ function geometryToComponentWithLatLng (geometry) {
       coordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
       return typeFromThis ? coordinates : {
         Component: Marker,
+        ChildComponent: InfoWindow,
         position: coordinates
       };
     default:
@@ -50,10 +51,15 @@ var Body = React.createClass({
           onZoomChanged: this._handle_map_zoom_changed
         },
         1: {
+          ref: "centerMarker",
           visible: true,
           draggable: true,
           onDragend: this._handle_marker_dragend,
-          onClick: this._handle_marker_click
+          onClick: this._handle_marker_click,
+          child: {
+            content: "Bermuda Triangle",
+            owner: "centerMarker"
+          }
         },
         3: {
           onRightclick: this._handle_polygon_rightclick
@@ -172,6 +178,11 @@ var Body = React.createClass({
           $merge: geoStatesOfFeature
         });
       }
+      if (style.child) {
+        var {ChildComponent} = result;
+        delete result.ChildComponent;
+        return Component(style, ChildComponent(style.child));
+      }
       return Component(style);
     });
 

package.json

@@ -63,7 +63,8 @@
     "webpack-dev-server": "^1.6.5"
   },
   "dependencies": {
-    "react": "^0.11.0"
+    "react": "^0.11.0",
+    "deep-equal": "^0.2.1"
   },
   "jest": {
     "scriptPreprocessor": "<rootDir>/test/__preprocessor__.js",

src/GoogleMapsMixin.js

@@ -15,6 +15,7 @@ module.exports = {
     getMap: React.PropTypes.func,
     getApi: React.PropTypes.func,
     hasMap: React.PropTypes.func,
+    getRef: React.PropTypes.func,
     _set_map: React.PropTypes.func
   },
 
@@ -23,6 +24,7 @@ module.exports = {
       getMap: this._get_map,
       getApi: this._get_api,
       hasMap: this._has_map,
+      getRef: this._get_ref,
       _set_map: this._set_map
     };
   },
@@ -39,6 +41,10 @@ module.exports = {
     return !!this._get_map();
   },
 
+  _get_ref (key) {
+    return this.refs[key];
+  },
+
   _set_map (map) {
     this.setState({ map });
     return map;

src/InfoWindow.js

@@ -0,0 +1,73 @@
+/** @jsx React.DOM */
+"use strict";
+var React = require("react/addons");
+
+var ChildMixin = require("./mixins/ChildMixin");
+var EventBindingMixin = require("./mixins/EventBindingMixin");
+
+module.exports = React.createClass({
+  displayName: "InfoWindow",
+
+  mixins: [ChildMixin, EventBindingMixin],
+
+  getInitialState () {
+    return {
+      infowindow: null
+    };
+  },
+
+  componentDidMount () {
+    var infowindow = this._init_infowindow();
+    if (!infowindow) return;
+    this.add_listeners(infowindow);
+  },
+
+  componentWillUpdate () {
+    var {infowindow} = this.state;
+    if (!infowindow) return;
+    this.clear_listeners(infowindow);
+  },
+
+  componentDidUpdate () {
+    var infowindow = this._init_infowindow();
+    if (!infowindow) return;
+    this.add_listeners(infowindow);
+    infowindow.setOptions(this.props);
+  },
+
+  componentWillUnmount () {
+    var {infowindow} = this.state;
+    if(!infowindow) return;
+    this.clear_listeners(infowindow);
+    this.setState({ infowindow: null });
+  },
+
+  render () {
+    return this._render(this.props, this.state);
+  },
+
+  get_event_names () {
+    return "click dblclick drag dragend dragstart mousedown mousemove mouseout mouseover mouseup rightclick";
+  },
+
+  _init_infowindow () {
+    var {context} = this;
+    var {infowindow} = this.state;
+    if(infowindow || !context.hasMap() || !context.getApi()) {
+      return infowindow;
+    }
+    var {InfoWindow} = context.getApi();
+    if (this.props.owner) {
+      var {marker} = context.getRef(this.props.owner).state;
+    }
+    infowindow = new InfoWindow(this.props);
+    infowindow.open(context.getMap(), marker);
+    this.expose_getters_from(InfoWindow.prototype, infowindow);
+    this.setState({ infowindow });
+    return infowindow;
+  },
+
+  _render (props, state) {
+    return null;
+  }
+});

src/Marker.js

@@ -66,6 +66,6 @@ module.exports = React.createClass({
   },
 
   _render (props, state) {
-    return null;
+    return (props.children)? props.children : null;
   }
 });

src/index.js

@@ -5,3 +5,4 @@ exports.Map = require("./Map");
 exports.Marker = require("./Marker");
 exports.Polygon = require("./Polygon");
 exports.Polyline = require("./Polyline");
+exports.InfoWindow = require("./InfoWindow");

src/mixins/ChildMixin.js

@@ -1,17 +1,22 @@
 /** @jsx React.DOM */
 "use strict";
 var React = require("react/addons");
+var deepEqual = require("deep-equal");
 
 module.exports = {
 
   shouldComponentUpdate(nextProps, nextState) {
+    if (this.props.children) {
+      return deepEqual(nextProps, this.props);
+    }
     return JSON.stringify(nextProps) !== JSON.stringify(this.props);
   },
 
   contextTypes: {
     getMap: React.PropTypes.func,
     getApi: React.PropTypes.func,
     hasMap: React.PropTypes.func,
+    getRef: React.PropTypes.func
   },
 
   expose_getters_from (prototype, instance) {