JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
<script src="http://fb.me/react-0.9.0.min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<!-- Batching -->

CSS

.tree {
    margin-left: 20px;
}

JavaScript 1.7

/** @jsx React.DOM */

var isEmpty = function(obj) {
  for (var key in obj) {
    return false;
  }
  return true;
}

var Tree = React.createClass({
    getInitialState: function() {
        return {active: {}};
    },
    onChange: function() {
        var t = performance.now();
        var count = 0;
        for (var file in this.props.tree) {
          count++;
          this.state.active[file] = !this.state.active[file];
          this.setState({active: this.state.active}, function() {
              if (--count === 0) {
                console.log(performance.now() - t);    
              }
          });
        }
    },
    render: function() {
        var files = [];
        for (var file in this.props.tree) {
            var rec = this.props.tree[file];
            files.push(
                <div className="tree" key={file}>
                    <input
                      type="checkbox"
                      checked={this.state.active[file]}
                      onChange={this.onChange.bind(this, file)}
                    />
                    <span style={{fontWeight: this.state.active[file] ? 'bold' : 'normal'}}>{file}</span>
                    {!isEmpty(rec) && <Tree tree={rec} />}
                </div>
            );
        }
        return <div>{files}</div>;
    }
});


var tree = getTree();
React.renderComponent(<Tree tree={tree} />, document.body);



















function getTree() {
var files =...