broken n- React Loading Mixin with JQuery

by Trever Shick

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<link rel="stylesheet" href="https://rally1.rallydev.com/slm/js-lib/rui/builds/rui/resources/css/rui-fonts.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="here" />

SCSS

body {
    font-family:'ProximaNova'
}
div.hello {
    height:150px;
}

input {
    margin-top:30px;
}
.loading-container {
    position: relative;
    margin:0;
    padding:0;
    border:0;
    width:100%;
    
    .loading-overlay {
        border:1px solid rgba(100,100,100,0.5);;
        background-color:rgba(144,144,144,0.5);
        position: absolute;
        z-index: 1000;
        left: 0;
        top: 0;
        right:0;
        bottom:0;
        text-align:center;
        border-radius:0px;

        display:none;

        
        > div {
            position:absolute;
        	transform: translateX(-50%) translateY(-50%);            
            top:50%; left:50%;
            margin:auto;
            border:1px solid #666;
            padding:8px 24px;
            border-radius:3px;
            background-color:white;
            opacity:1;
            img {
                vertical-align:middle;
                height:16px;
            }
        }
    }
    .loading-content {
        position: relative;
        z-index: 0;
    }
}

JavaScript 1.7

jQuery.fn.fadeInOrOut = function(status){
    return status ? this.fadeIn() : this.fadeOut();
}


var LoadingMixin = {

  wrappedRender: function(originalRender) {
    var loading = this.props.loading || false;
    var content = originalRender.apply(this);
    var loadingText = this.props.loadingText || "Loading...";

      return (
        <div className="loading-container">
          <div className="loading-overlay">
<div><img src="http://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" /> {loadingText}</div>
          </div>
          <div className="loading-content">
          {content}
          </div>
        </div>);
  },
  toggleFade: function(props) {
    var e = $(this.getDOMNode());
    e.find(".loading-overlay").fadeInOrOut(props.loading);
    e.find(".loading-content").css("opacity", props.loading ? 0.2 : 1);  
  },
  componentWillMount: function() {
    this.render = LoadingMixin.wrappedRender.bind(this, this.render);
  },
  componentDidMount: function() {
    this.toggleFade(this.props);
  },
  componentWillReceiveProps:function(p) {
      this.toggleFade(p);
  }
};




var Button = React.createClass({
    render: function() {
        return <input type="button" onClick={this.props.onClick} value="Toggle"/>;
    } 
});

var Hello = React.createClass({
    mixins: [ LoadingMixin ],
    render: function() {
        return <div className="hello">Hello {this.props.name}</div>;
    }
});

var loading = false;
var toggleIt = function() {
    loading = !loading;
    rerender();
};
var rerender = function() {
React.render(
    <div>
    <Hello name="World" loading={loading} loadingText="Yeah Baby! Grrr " />
    <Button onClick={toggleIt}/>
    </div>, document.getElementById("here"));

}

rerender();