feat(EventBindingMixin): hook to correct lifecycle events

tomchentw · Oct 24, 2014 · 4ef9fde · 4ef9fde
1 parent 5d33c30
commit 4ef9fde
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/src/Map.js b/src/Map.js
@@ -3,11 +3,12 @@
 var React = require("react/addons");
 
 var ChildMixin = require("./mixins/ChildMixin");
+var EventBindingMixin = require("./mixins/EventBindingMixin");
 
 module.exports = React.createClass({
   displayName: "Map",
 
-  mixins: [ChildMixin],
+  mixins: [ChildMixin, EventBindingMixin],
 
   contextTypes: {
     _set_map: React.PropTypes.func
@@ -16,11 +17,23 @@ module.exports = React.createClass({
   componentDidMount () {
     if (this.invalid_context(true)) return;
     this._init_map(this.context);
+    this.add_listeners(this.context);
+  },
+
+  componentWillUpdate () {
+    if (this.invalid_context(true)) return;
+    this.clear_listeners(this.context);
   },
 
   componentDidUpdate () {
     if (this.invalid_context(true)) return;
     this._init_map(this.context);
+    this.add_listeners(this.context);
+  },
+
+  componentWillUnmount () {
+    if (this.invalid_context(true)) return;
+    this.clear_listeners(this.context);
   },
 
   render () {

diff --git a/src/Marker.js b/src/Marker.js
@@ -3,11 +3,12 @@
 var React = require("react/addons");
 
 var ChildMixin = require("./mixins/ChildMixin");
+var EventBindingMixin = require("./mixins/EventBindingMixin");
 
 module.exports = React.createClass({
   displayName: "Marker",
 
-  mixins: [ChildMixin],
+  mixins: [ChildMixin, EventBindingMixin],
 
   getInitialState () {
     return {
@@ -24,18 +25,33 @@ module.exports = React.createClass({
   componentDidMount () {
     if (this.invalid_context(this.state.marker)) return;
     this._init_marker(this.context);
+    this.add_listeners(this.context);
+  },
+
+  componentWillUpdate () {
+    if (this.invalid_context(this.state.marker)) return;
+    this.clear_listeners(this.context);
   },
 
   componentDidUpdate () {
     if (this.invalid_context(this.state.marker)) return;
     this._init_marker(this.context);
+    this.add_listeners(this.context);
+  },
+
+  componentWillUnmount () {
+    if (this.invalid_context(this.state.marker)) return;
+    this.clear_listeners(this.context);
   },
 
   render () {
     return this._render(this.props, this.state);
   },
 
   _init_marker (context) {
+    if (this.state.marker || !context.hasMap() || !context.getApi()) {
+      return;
+    }
     var {Marker} = context.getApi();
     var marker = new Marker(this.props);
     marker.setMap(context.getMap());

diff --git a/src/mixins/EventBindingMixin.js b/src/mixins/EventBindingMixin.js
@@ -42,16 +42,15 @@ module.exports = {
     });
   },
 
-  upsert_listeners (googleMapsApi, map) {
-    this.clear_listeners(googleMapsApi, map);
+  add_listeners (context) {
     this.state.eventNames.forEach((eventName) => {
       var name = EVENT_MAP[eventName];
-      googleMapsApi.event.addListener(map, name, this.props[eventName]);
+      context.getApi().event.addListener(context.getMap(), name, this.props[eventName]);
     });
   },
 
-  clear_listeners (googleMapsApi, map) {
-    googleMapsApi.event.clearInstanceListeners(map);
+  clear_listeners (context) {
+    context.getApi().event.clearInstanceListeners(context.getMap());
   },
 
   _collect_event_names (props) {