reactui/lib/components/layout/tabControl/tabControl.js

A components library for ReactJS. This is part of the Gearz project

"use strict";

var React = require("react");
var TabHeader = require("./tabHeader.jsx");
var gearzMixin = require("../../gearz.mixin");

var TabControl = React.createClass({
    displayName: "TabControl",

    mixins: [gearzMixin],
    propTypes: {
        // current tab
        activeTab: React.PropTypes.string.isRequired,
        // A collection of Tab controls
        children: React.PropTypes.array.isRequired
    },
    getInitialState: function getInitialState() {
        return {};
    },
    activeTabChanged: function activeTabChanged(e) {
        this.set("activeTab", e.value);
    },
    render: function render() {
        var tabs = this.props.children;
        var activeTab = this.get("activeTab");
        var tabHeaderItems = [];
        for (var i = 0; i < tabs.length; i++) {
            var tab = tabs[i];
            tabHeaderItems.push({ name: tab.props.name, displayName: tab.props.displayName });
        }

        return React.createElement(
            "div",
            { className: "tabControl" },
            React.createElement(TabHeader, { tabs: tabHeaderItems, activeTab: activeTab, onActiveTabChange: this.activeTabChanged }),
            React.createElement(
                "div",
                { className: "tabControl-content" },
                this.props.children.map(function (item) {
                    var tabName = item.props.name;
                    return React.createElement(
                        "div",
                        { className: activeTab == tabName ? "tab activeTab" : "tab" },
                        item
                    );
                })
            )
        );
    }
});

module.exports = TabControl;