/** @jsx React.DOM */
require("../styles/index.scss");

var React = require("react/addons");
var {ToastContainer, ToastMessage} = require("../../src");

var Hello = React.createClass({
  addAlert () {
    this.refs.container.success("hi! Now" + new Date(), "///title\\\\\\", {
      closeButton: true
    });
  },

  clearAlert () {
    this.refs.container.clear();
  },

  render: function() {
    return <div id="react-root">
      <ToastContainer toastMessageClass={ToastMessage.jQuery} ref="container" className="toast-top-right" />

      <h1>
        React-Toastr
        <small>React.js toastr component</small>
      </h1>



      <div className="btn-container">
        <button className="primary" onClick={this.addAlert}>Hello {this.props.name}</button>
        <button className="primary" onClick={this.clearAlert}>CLEAR</button>
      </div>

      <div className="github-button-container">
        <iframe src="http://ghbtns.com/github-btn.html?user=tomchentw&amp;repo=react-toastr&amp;type=watch&amp;count=true" allowTransparency="true" frameBorder="0" scrolling="0" width="90" height="20"></iframe>
        <iframe src="http://ghbtns.com/github-btn.html?user=tomchentw&amp;repo=react-toastr&amp;type=fork&amp;count=true" allowTransparency="true" frameBorder="0" scrolling="0" width="90" height="20"></iframe>
      </div>
    </div>;
  }
});


React.renderComponent(<Hello name="World" />, document.body);

@@ -1,25 +1,17 @@
-/** @jsx React.DOM */
+%22use strict%22;
 %0Areq
@@ -86,24 +86,83 @@
 var 
-%7BToastContainer,
+ReactToastr = require(%22../../src%22);%0Avar %7BToastContainer%7D = ReactToastr;%0Avar
  Toa
@@ -174,39 +174,70 @@
 sage
-%7D
  = 
-require(%22../../src%22
+React.createFactory(ReactToastr.ToastMessage.jQuery
 );%0A%0Avar 
 Hell
@@ -232,21 +232,20 @@
 );%0A%0Avar 
-Hello
+Body
  = React
@@ -555,23 +555,16 @@
 tMessage
-.jQuery
 %7D ref=%22c

migrate to React.createFactory