JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/**
 * @jsx React.DOM
 */


var App = React.createClass({

	getInitialState: function() {
		return {x: 0}
	},

	move: function(i) {
		this.setState({x: this.state.x + i * 100});
	},

	render: function() {
		return <div className="ShowerItem">
			<p>
				<button onClick={this.move.bind(this, -1)}>Left</button>
				<button onClick={this.move.bind(this, 1)}>Right</button>
			</p>
			<svg><Dot x={this.state.x} duration={1000}/></svg>
		</div>
	}
});



var Dot = React.createClass({

	getInitialState: function() {
		return {
            start: 0,
			x: 0,
			final: 0,
            startTime: 0
		};
	},

	render: function() {
		var state = this.state;
		var props = this.props;
		var amount = 0;

        if (state.final !== props.x) {
	        state.final = props.x;
            state.start = state.x;
            state.startTime = Date.now();
        } else {
	        amount = (Date.now() - state.startTime) / this.props.duration;
        }

        if (amount <= 1) {
	        var x = state.start + amount * (props.x - state.start);
	        setTimeout(function() {
		        this.setState({x: x});
	        }.bind(this), 1);
        } else {
	        state.final = state.x = x = props.x;
        }

		return <circle r="10" cy="10" cx={x + 10}/>
	}
});


React.renderComponent(
	<App/>,
	document.body
);