From 0a7e490f13af7c22e0a5b54dd5251527a7987964 Mon Sep 17 00:00:00 2001
From: Tom Chen <developer@tomchentw.com>
Date: Sat, 25 Oct 2014 12:33:27 +0800
Subject: [PATCH] feat(Marker): update options when componentDidUpdate

* don't expose getMap function
---
 client/scripts/index.js  | 25 +++++++++++++++++--------
 src/GoogleMapsMixin.js   |  7 -------
 src/Marker.js            | 13 ++++++++-----
 src/mixins/ChildMixin.js |  2 +-
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/client/scripts/index.js b/client/scripts/index.js
index 74c7d2cf..221660a4 100755
--- a/client/scripts/index.js
+++ b/client/scripts/index.js
@@ -12,14 +12,15 @@ var Body = React.createClass({
   getDefaultProps () {
     return {
       center: new google.maps.LatLng(-25.363882,131.044922),
-      zoom: 4,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
   },
 
   getInitialState () {
     return  {
-      googleMapsApi: google.maps
+      googleMapsApi: google.maps,
+      zoom: 4,
+      opacity: 1
     };
   },
 
@@ -31,22 +32,30 @@ var Body = React.createClass({
     console.log("_handle_map_click");
   },
 
+  _handle_map_zoom_changed () {
+    this.setState({
+      opacity: 0.5+(this.state.zoom/14),
+      zoom: this.refs.map.getZoom()
+    })
+  },
+
   _handle_marker_click () {
-    console.log("_handle_marker_click");
     this.setState({
-      zoom: (this.state.zoom || this.props.zoom)+1
+      zoom: 1+this.state.zoom
     });
   },
 
   _render (props, state) {
-    console.log('render', state);
     return <div>
-      <Map  center={props.center}
-            zoom={state.zoom || props.zoom}
+      <Map  ref="map"
+            center={props.center}
+            zoom={state.zoom}
             mapTypeId={props.mapTypeId}
-            onClick={this._handle_map_click} />
+            onClick={this._handle_map_click}
+            onZoomChanged={this._handle_map_zoom_changed} />
       <Marker position={props.center}
               title={"Hello World!"}
+              opacity={state.opacity}
               onClick={this._handle_marker_click} />
     </div>;
   }
diff --git a/src/GoogleMapsMixin.js b/src/GoogleMapsMixin.js
index 673572a7..af79ba3c 100644
--- a/src/GoogleMapsMixin.js
+++ b/src/GoogleMapsMixin.js
@@ -18,13 +18,6 @@ module.exports = {
     _set_map: React.PropTypes.func
   },
 
-  contextTypes: {
-    getMap: React.PropTypes.func,
-    getApi: React.PropTypes.func,
-    hasMap: React.PropTypes.func,
-    _set_map: React.PropTypes.func
-  },
-
   getChildContext () {
     return {
       getMap: this._get_map,
diff --git a/src/Marker.js b/src/Marker.js
index c20810f5..82d7b91b 100644
--- a/src/Marker.js
+++ b/src/Marker.js
@@ -19,8 +19,7 @@ module.exports = React.createClass({
   componentDidMount () {
     var {marker} = this.state;
     if (marker || !this.context.hasMap()) return;
-    marker = this._init_marker();
-    this.add_listeners(marker);
+    this.add_listeners(this._init_marker());
   },
 
   componentWillUpdate () {
@@ -31,9 +30,12 @@ module.exports = React.createClass({
 
   componentDidUpdate () {
     var {marker} = this.state;
-    if (marker || !this.context.hasMap()) return;
-    marker = this._init_marker();
-    this.add_listeners(marker);
+    if (!this.context.hasMap()) return;
+    if (marker) {
+      marker.setOptions(this.props);
+    } else {
+      this.add_listeners(this._init_marker());
+    }
   },
 
   componentWillUnmount () {
@@ -55,6 +57,7 @@ module.exports = React.createClass({
     var marker = new Marker(this.props);
     marker.setMap(context.getMap());
 
+    this.expose_getters_from(Marker.prototype, marker);
     this.setState({ marker });
     return marker;
   },
diff --git a/src/mixins/ChildMixin.js b/src/mixins/ChildMixin.js
index fe11b627..7facc1d7 100644
--- a/src/mixins/ChildMixin.js
+++ b/src/mixins/ChildMixin.js
@@ -16,7 +16,7 @@ module.exports = {
 
   expose_getters_from (prototype, instance) {
     Object.keys(prototype).forEach((key) => {
-      if (key.match(/^get/)) {
+      if (key.match(/^get/) && !key.match(/Map$/)) {
         this[key] = instance[key].bind(instance);
       }
     });