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

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

define(["exports"], function (exports) {
    "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;
});