JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var match = function (criteria, matchAgainst) {
    // if all the props match the injected "match", show it
    return _.every(criteria, function (value, key) {

        // is this key present in matchAgainst?
        if (_.has(matchAgainst, key)) {
            var matchAgainstValue = matchAgainst[key];
            // accept either a direct match or a contains match
            return matchAgainstValue === value || _.contains(value, matchAgainstValue);
        }

        // no match!
        return false;

    });
};


window.CriteriaMatcher = React.createClass({

    propTypes: {
        match: React.PropTypes.object
    },

    render: function() {

        var acceptedChildren = [];

        React.Children.forEach(this.props.children, function (child) {
            if (child.props.criteria) {
                // if all the props match the injected "match", show it
                if (match(child.props.criteria, this.props.match)) {
                    acceptedChildren.push(child);
                }
            } else {
                // If there's no criteria, just show it
                acceptedChildren.push(child);
            }
        }, this);

        return <div>{acceptedChildren}</div>;
    },

    statics: {
        match: match
    }

});

window.RadioBox = React.createClass({

    propTypes: {
        horizontal: React.PropTypes.bool,
        radioButtonGroupName: React.PropTypes.string,   // get this from state instead of props!
        value: React.PropTypes.any,
        formData: React.PropTypes.object,
        onChange: React.PropTypes.func
    },

    getInitialState: function() {
        return {
            radioButtonGroupName: this.props.radioButtonGroupName || _.uniqueId('radio-button-group-name-')
        };
    },

    getDefaultProps: function() {
        return {
            horizontal: true,
            radioButtonGroupName: ''
        };
    },

    handleChange: function(value){
        if (this.props.onChange) {
           ...