feat(ToastMessage): hookup remove toast from state

tomchentw · Oct 12, 2014 · f0a7222 · f0a7222
1 parent 1c2400c
commit f0a7222
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 18 deletions.
diff --git a/src/ToastContainer.js b/src/ToastContainer.js
@@ -55,12 +55,15 @@ module.exports = React.createClass({
         return;
       }
     }
+    var key = Date.now();
     var newToast = update(optionsOverride || {}, {
       $merge: {
+        key,
         type,
         title,
         message,
-        handleOnClick: this._handleToastOnClick
+        handleOnClick: this._handleToastOnClick,
+        handleRemove: this._handleToastRemove
       }
     });
     var toastOperation = {};
@@ -82,6 +85,19 @@ module.exports = React.createClass({
     event.stopPropagation();
   },
 
+  _handleToastRemove (key) {
+    var {state} = this;
+    state.toasts[(this.props.newestOnTop ? "reduceRight" : "reduce")]((found, toast, index) => {
+      if (found || toast.key !== key) {
+        return false;
+      }
+      this.setState(update(state, {
+        toasts: { $splice: [[index, 1]] }
+      }));
+      return true;
+    }, false);
+  },
+
   render () {
     var {props, state} = this;
     return this.transferPropsTo(

diff --git a/src/ToastMessage/index.js b/src/ToastMessage/index.js
@@ -55,6 +55,11 @@ var ToastMessageSpec = {
     }
   },
 
+  _handle_remove () {
+    var {props} = this;
+    props.handleRemove(props.key);
+  },
+
   render () {
     var cx = React.addons.classSet;
     var {props} = this;

diff --git a/src/ToastMessage/jQueryMixin.js b/src/ToastMessage/jQueryMixin.js
@@ -5,8 +5,6 @@ function callShowMethod ($node, props) {
   });
 }
 
-var INVALID_ID = "INVALID_ID";
-
 module.exports = {
   getDefaultProps () {
     return {
@@ -27,7 +25,8 @@ module.exports = {
 
   getInitialState () {
     return {
-      intervalId: INVALID_ID
+      intervalId: null,
+      isHiding: false
     };
   },
 
@@ -52,40 +51,32 @@ module.exports = {
   },
 
   handleMouseEnter () {
-    console.log("handleMouseEnter")
     clearTimeout(this.state.intervalId);
-    this._setIntervalId(INVALID_ID);
+    this._setIntervalId(null);
 
     callShowMethod(this._get$Node().stop(true, true), this.props);
   },
 
   handleMouseLeave () {
     var {props} = this;
 
-    if (props.timeOut > 0 || props.extendedTimeOut > 0) {
+    if (!this.state.isHiding &&
+        (props.timeOut > 0 || props.extendedTimeOut > 0)) {
       this._setIntervalId(
         setTimeout(this.hideToast, props.extendedTimeOut)
       );
     }
   },
 
   hideToast (override) {
-    console.log(this.state.intervalId === INVALID_ID, !!override);
-    if (this.state.intervalId === INVALID_ID && !override) {
-      return;
-    }
-    this._setIntervalId(INVALID_ID);
+    if (this.state.intervalId == null && !override) return;
+    this.setState({isHiding: true});
 
     var {props} = this;
     this._get$Node()[props.hideMethod]({
       duration: props.hideDuration,
       easing: props.hideEasing,
-      complete: function () {
-        // removeToast($toastElement);
-        // if (options.onHidden && response.state !== "hidden") {
-        //   options.onHidden();
-        // }
-      }
+      complete: this._handle_remove
     });
   }
 };