Testing React Animation

Starting point for creating JSFiddles with React. This uses React with Addons.

by Dũng Hoàng Ngọc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

td, th{
    border: solid 1px black;
    padding: 2px;
}
th {
    font-weight: bold;
}

JavaScript 1.7

var ReactTransitionGroup = React.addons.TransitionGroup;

var Row = React.createClass({
	 componentWillEnter: function(done) {
        var node = ReactDOM.findDOMNode(this);
        $(node)
            .children('td')
            .wrapInner('<div style="display: none;" />')
            .children()
            .slideDown(400, done);
    },

    componentWillLeave: function(done) {
        var node = ReactDOM.findDOMNode(this);
        $(node)
            .children('td')
            .wrapInner('<div />')
            .children()
            .slideUp(400, done);
    },
    
    remove: function(id) {
    	this.props.onRemove(this.props.item.id);
    },
    
    save: function(id) {
    	this.props.onSave(this.props.item.id);
    },
    
    renderLink: function() {
      var link;

      if (this.props.item.isSaving) {
        link = <span>Saving...</span>	
      } else {
        link = <a href="#" onClick={this.save}>Save</a>
      }

      return link;
    },
    
    render: function() {
        return (
            <tr>
            	<td>{this.props.item.id}</td>
                <td>{this.props.item.name}</td>
                <td>{this.renderLink()}</td>
                <td><a href="#" onClick={this.remove}>Remove</a></td>
            </tr>
        );
    }
});
 
var Hello = React.createClass({
	getInitialState: function() {
    	return {
        	items: [
            	{id: Math.random(), name: Math.random(), isSaving: false},
              {id: Math.random(), name: Math.random(), isSaving: false}
            ]
        };
    },
    add: function() {
    	var items = this.state.items;
        
        items = items.concat([{
        	id: Math.random(), 
          name: Math.random(), 
          isSaving: false
        }]);
        
        this.setState({items: items});
    },
    remove: function(id) {
    	var items = this.state.items.filter(function(item){
        	return item.id !== id;
        });
        
        this.setState({items: items});
    },
   ...