Remove separate CSS, instead, apply inline style directly to ScrollBlocker

Author: jeroencoumans

ScrollBlocker.css

@@ -1,8 +1,12 @@
 /** @jsx React.DOM */
 var React = require('react');
-var cx = require('react/lib/cx');
+var spread = require('react/lib/Object.assign');
 
-var ScrollBlocker = React.createClass({displayName: 'ScrollBlocker',
+var style = {
+  pointerEvents: 'none'
+};
+
+var ScrollBlocker = React.createClass({displayName: "ScrollBlocker",
 
   getDefaultProps: function () {
     return {
@@ -11,12 +15,9 @@ var ScrollBlocker = React.createClass({displayName: 'ScrollBlocker',
   },
 
   render: function () {
-    var classes = cx({
-      'ScrollBlocker': this.props.active
-    });
 
     return (
-      React.DOM.div( {className:cx(this.props.className, classes)}, 
+      React.createElement("div", {style: spread({}, this.props.style, this.props.active && style)}, 
         this.props.children
       )
     );

ScrollBlocker.js

@@ -1,15 +1,17 @@
+'use strict';
+
 var win = typeof window !== 'undefined' ? window : false;
 var ViewportMetrics = require('react/lib/ViewportMetrics');
 
 var ScrollListenerMixin = {
 
-  getDefaultProps: function() {
+  getDefaultProps: function () {
     return {
       endScrollTimeout: 300
     };
   },
 
-  getInitialState: function() {
+  getInitialState: function () {
     return {
       scrollTop: 0,
       isScrolling: false

ScrollListenerMixin.js

@@ -1,6 +1,10 @@
 /** @jsx React.DOM */
 var React = require('react');
-var cx = require('react/lib/cx');
+var assign = require('react/lib/Object.assign');
+
+var style = {
+  pointerEvents: 'none'
+};
 
 var ScrollBlocker = React.createClass({
 
@@ -11,12 +15,9 @@ var ScrollBlocker = React.createClass({
   },
 
   render: function () {
-    var classes = cx({
-      'ScrollBlocker': this.props.active
-    });
 
     return (
-      <div className={cx(this.props.className, classes)}>
+      <div style={assign({}, this.props.style, this.props.active && style)}>
         {this.props.children}
       </div>
     );