import React from 'react';

export default React.createClass({
    displayName: "TabLinks",

    propTypes: {
        currentView: React.PropTypes.string.isRequired,
        linkList: React.PropTypes.array.isRequired,
        onChangeView: React.PropTypes.func.isRequired
    },

    onChangeView: function(item) {
        this.props.onChangeView(item);
    },

    renderLinks: function(item, i) {
        let active = "";
        if (item === this.props.currentView) {
            active = "TabLinks--active";
        }

        return (
            <li key={i} className="TabLinks-link">
                <a className={active}
                    onClick={this.onChangeView.bind(this, item)}
                >
                    {item}
                </a>
            </li>
        )
    },

    render: function() {
        return (
            <ul className="TabLinks clearFix">
                {this.props.linkList.map(this.renderLinks)}
            </ul>
        )
    }
});

import React from 'react';

// Renders a nav with several tabs. This nav is created with an onTabClick
// handler, such that, the parent can be notified when a new tab is selected.
// The parent could then render a view when a tab is selected.
export default React.createClass({
    displayName: "TabLinks",

    propTypes: {
        // Index into links that will be shown by default
        defaultLink: React.PropTypes.number.isRequired,
        // List of link names to be rendered
        links: React.PropTypes.array.isRequired,
        onTabClick: React.PropTypes.func.isRequired
    },

    getInitialState: function() {
        return {
            index: this.props.defaultLink
        }
    },

    onTabClick: function(index) {
        this.props.onTabClick(index);
        this.setState({ index })
    },


    renderLink: function(link, index) {
        let active = "";

        if (index === this.state.index) {
            active = "TabLinks--active";
        }

        let onClick = this.onTabClick.bind(this, index);

        return (
            <li key={index} className="TabLinks-link">
                <a className={active} onClick={onClick}>
                    {link}
                </a>
            </li>
        );
    },

    render: function() {
        return (
            <ul className="TabLinks clearFix">
                {this.props.links.map(this.renderLink)}
            </ul>
        );
    }
});

Change UI component to be independent and use indeces
Change UI component to be independent and use indeces

This tab nav now has more internal state. Before it required the parent to set
which tab is the current, now the parent only sets a default.

The other change is that the onChange listener relies an index rather than an
element (see propType defaultLink). There are a few good reasons for this,
it's better to compare against indexes than elements (typically strings).

There were some small name updates.
