feat(ToastContainer): add clear interface

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

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/client/scripts/index.js b/client/scripts/index.js
@@ -8,10 +8,15 @@ var Hello = React.createClass({
     this.refs.container.success("hi! Now" + new Date(), "///title\\\\\\");
   },
 
+  clearAlert () {
+    this.refs.container.clear();
+  },
+
   render: function() {
     return <div>
       <ToastContainer toastMessageClass={ToastMessage.jQuery} ref="container" className="toast-top-right" />
       <p onClick={this.addAlert}>Hello {this.props.name}</p>
+      <button onClick={this.clearAlert}>CLEAR</button>
     </div>;
   }
 });

diff --git a/src/ToastContainer.js b/src/ToastContainer.js
@@ -25,6 +25,14 @@ module.exports = React.createClass({
     this._notify(this.props.toastType.warning, message, title, optionsOverride);
   },
 
+  clear () {
+    var {refs} = this,
+        key;
+    for (key in refs) {
+      refs[key].hideToast(false);
+    }
+  },
+
   getDefaultProps () {
     return {
       toastType: {
@@ -44,6 +52,7 @@ module.exports = React.createClass({
   getInitialState () {
     return {
       toasts: [],
+      toastId: 0,
       previousMessage: null
     };
   },
@@ -55,13 +64,14 @@ module.exports = React.createClass({
         return;
       }
     }
-    var key = Date.now();
+    var key = state.toastId++;
     var newToast = update(optionsOverride || {}, {
       $merge: {
-        key,
         type,
         title,
         message,
+        key,
+        ref: `toasts__${ key }`,
         handleOnClick: this._handleToastOnClick,
         handleRemove: this._handleToastRemove
       }
@@ -70,8 +80,8 @@ module.exports = React.createClass({
     toastOperation[(props.newestOnTop ? "$unshift" : "$push")] = [newToast];
 
     var newState = update(state, {
-      previousMessage: { $set: message },
-      toasts: toastOperation
+      toasts: toastOperation,
+      previousMessage: { $set: message }
     });
     this.setState(newState);
   },

diff --git a/src/ToastMessage/jQueryMixin.js b/src/ToastMessage/jQueryMixin.js
@@ -69,10 +69,10 @@ module.exports = {
   },
 
   hideToast (override) {
-    if (this.state.intervalId == null && !override) return;
+    var {state, props} = this;
+    if (state.isHiding || (state.intervalId == null && !override)) return;
     this.setState({isHiding: true});
 
-    var {props} = this;
     this._get$Node()[props.hideMethod]({
       duration: props.hideDuration,
       easing: props.hideEasing,