ReactSurface.js

/*
  This is an extension of the famo.us Surface type. It behaves the exact same except that the content
  property holds a ProxyConstructor object (the type  that gets returned by any of the React component 
  functions such as those in React.DOM or created by React.createClass) instead of a string or Node.
  One thing to note is that the component fed in to content will get an extra prop, _surface, which
  is the surface object that holds it
  
  example usage
 
    var TestComponent = React.createClass({
        countInc: function() {
            this.setState({count: this.state.count + 1});
        },
        getInitialState: function() {
            return {count: 0};
        },
        componentWillMount: function() {
            setInterval(this.countInc, this.props.countInterval || 1000);
        },
        render: function() {
            return (
                React.DOM.div({,
                    children: this.state.count
                })
            );
        }
    });
    
    var rs = new ReactSurface({
        size: [200, 200],
        content: TestComponent({countInterval: 100}),
        classes: ['backfaceVisibility'],
        properties: {
            color: 'white',
            textAlign: 'center',
            backgroundColor: '#FA5C4F'
        }
    });
*/
 
define(function(require, exports, module) {
	var Surface  = require('famous/core/Surface');
	var React = require('react');
	window.React = React;
	
	function transparentApply(fun, that, args) {
		return fun.apply(that,Array.prototype.slice.apply(args));
	}
 
	function ReactSurface() {
		transparentApply(Surface,this,arguments);
	}
	ReactSurface.prototype = Object.create(Surface.prototype);
	ReactSurface.prototype.constructor = ReactSurface;
 
	ReactSurface.prototype.deploy = function deploy (target) {
		var content = this.getContent();
		if(React.isValidComponent(content)){
			content = React.addons.cloneWithProps(content, {_surface: this});
			React.renderComponent(content,target);
		} else {
			throw new Error("Content is not a valid react component");
		}
	}
 
	module.exports = ReactSurface;
});