feat(index.js): add onClick handler and hook toast callback

tomchentw · Oct 12, 2014 · e71a005 · e71a005
1 parent c9d548b
commit e71a005
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/client/scripts/index.js b/client/scripts/index.js
@@ -9,9 +9,9 @@ var Hello = React.createClass({
   },
 
   render: function() {
-    return <div onClick={this.addAlert}>
+    return <div>
       <Container ref="container" className="toast-top-right" />
-      Hello {this.props.name}
+      <p onClick={this.addAlert}>Hello {this.props.name}</p>
     </div>;
   }
 });

diff --git a/src/index.js b/src/index.js
@@ -2,6 +2,8 @@
 var React = require("react/addons");
 var {update} = React.addons;
 
+function noop () {}
+
 var AlertMessage = React.createClass({
   displayName: "AlertMessage",
 
@@ -54,7 +56,7 @@ var AlertMessage = React.createClass({
     toastClass[iconClassName] = true;
 
     return (
-      <div className={cx(toastClass)}>
+      <div className={cx(toastClass)} onClick={props.onClick}>
         {this._render_close_button(props)}
         {this._render_title_element(props)}
         {this._render_message_element(props)}
@@ -91,7 +93,8 @@ module.exports = React.createClass({
         warning: "warning"
       },
       id: "toast-container",
-      preventDuplicates: false
+      preventDuplicates: false,
+      onClick: noop
     };
   },
 
@@ -112,7 +115,8 @@ module.exports = React.createClass({
       $merge: {
         type,
         title,
-        message
+        message,
+        onClick: this._handleToastOnClick
       }
     });
     var newState = update(this.state, {
@@ -122,6 +126,18 @@ module.exports = React.createClass({
     this.setState(newState);
   },
 
+  _handleToastOnClick (event) {
+    this.props.onClick(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this._hideToast();
+  },
+
+  _hideToast: noop,
+
   render () {
     return this.transferPropsTo(
       <div aria-live="polite" role="alert">