feat(Marker): update options when componentDidUpdate

* don't expose getMap function
tomchentw · Oct 25, 2014 · 0a7e490 · 0a7e490
1 parent bad5456
commit 0a7e490
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
       }
     });