JSFiddle - React, Tailwind, and code Playground

by richardkiss

HTML

<script src="http://fb.me/react-0.8.0.js"></script>
<div id="example">hi</div>

JavaScript

function matcher(match_dict) {
  // return a custom filter function
  // Example: match_dict = { "count" : 5, "show_id" : function(v) { return v < 3; } }
  //  will return a function that matches objects o where
  //  o.count === 5 and o.show_id < 3 is true
  function filter_function(v) {
    var k;
    for (k in match_dict) {
      var val = match_dict[k];
      if (v[k] !== val) {
        return false;
      }
    }
    return true;
  }
  return filter_function;
}

var Button = React.createClass({displayName: 'Button',
  render: function() {
    return (
      React.DOM.button( { onClick: this.props.onClick },  this.props.children )
    );
  }
});

var List = React.createClass({
  displayName: 'List',
  render: function() {
    var get_nodes = function (original_state, new_state) {
      var nodes = this.props.items.filter(matcher({ list_id: original_state })).map(function (item) {
        var clickF = function() {
          this.props.onStateChange(item, new_state);
        }.bind(this);
        return Button( { onClick: clickF }, "move ",  item.val,  " from ",  original_state, " to ",  new_state  )
      }.bind(this));
      return nodes;
    }.bind(this);

    var nodes_1_to_2 = get_nodes(1, 2);
    var nodes_2_to_3 = get_nodes(2, 3);
    var nodes_3_to_1 = get_nodes(3, 1);
    return (
      React.DOM.p(null, "list 1", nodes_1_to_2, "list 2", nodes_2_to_3, "list 3", nodes_3_to_1)
    );
  }
});

var Series = React.createClass({displayName: 'Series',
  getInitialState: function() {
    return {
        items: [{ val:1, list_id:1}, { val:2, list_id:1}, { val:3, list_id:1}, { val:4, list_id:1}]
    };
  },
  handleStateChange: function(item, new_state) {
    item.list_id = new_state;
    this.setState(this.state);
  },
  render: function() {
    return (
      React.DOM.div(null, List( {items:this.state.items, onStateChange: this.handleStateChange } )
      )
    );
  }
});

React.renderComponent(
    Series( {} ),
  document.getElementById('example')
);