JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>

CSS

.tabOuterWrapper {
    border: 1px solid black;
    overflow: hidden;
    transition: height 0.4s ease-out;
}

ul.tabs li {
    display: inline-block;
    width: 60px;
    border: 1px solid black;
    border-bottom: 0;
    margin-right: 3px;
}

ul.tabs li.active {
    font-weight: bold;
    background: #ddd;
}

JavaScript 1.7

/** @jsx React.DOM */

var EventMixin = {
    _events: {},
    on: function (eventName, fn) {
        if (_.isString(eventName) && _.isFunction(fn)) {
            if (!_.has(this._events, eventName)) {
                this._events[eventName] = [];
            }
            this._events[eventName].push(fn);
        }
    },
    un: function (eventName, fn) {
        if (_.isFunction(fn) && _.has(this._events, eventName)) {
            this._events[eventName] = _.without(this._events[eventName], fn);
        }
    },
    trigger: function (eventName) {
        if (_.has(this._events, eventName)) {
            _.each(this._events[eventName], function (fn) {
                _.bind(fn, this, _.rest(arguments))();
            });
        }
    },
    componentWillMount: function () { this.trigger('componentWillMount'); },
    componentDidMount: function () { this.trigger('componentDidMount'); },
    componentWillUpdate: function () { this.trigger('componentWillUpdate'); },
    componentDidUpdate: function () { this.trigger('componentDidUpdate'); },
    componentWillUnmount: function () { this.trigger('componentWillUnmount'); }
};

// default TabLinks component - override for more complex tab links
// Receives props getSelectedTab() and setSelectedTab()
var TabLinks = React.createClass({
    getTabLink: function (tab) {
        return <li
            key={tab.props.name}
            className={tab.props.isSelected() ? 'active' : ''}
            onClick={tab.props.selectTab}>
            {tab.props.name}
        </li>;
    },
    render: function () {
        return <ul className="tabs">
            {this.props.children.map(this.getTabLink)}
        </ul>;
    }
});

var SomeOtherTabImplementation = React.createClass({
    getTabLink: function (tab) {
        var that = this;
        return <li
            key={tab.props.name}
            className={tab.props.isSelected() ? 'active' : ''}
            onClick={tab.props.selectTab}>
            {tab.props.name} Select...