src/Tab.js File

import React, {PropTypes,Component} from 'react';
import ClassNameMixin from './utils/ClassNameMixin';
import {setPhoenixPrefix} from './utils/Tool';
import classnames from 'classnames';

/**
 * tab选项卡组件<br/>
 * - 通过heading设置选项卡的显示内容。
 * - 可通过onTabChange设置点击选项卡的回调函数。
 * - 可自定义className等常用属性以及事件。
 *
 * 具体属性和接口如下：
 * - heading:选项卡的显示内容, 默认'tab'
 * - onTabChange:点击事件的回调函数
 *
 * 示例:
 * ```code
 *     <Tabset activeIndex ={this.state.index} tabCallback={(index)=>{console.log(index);}>
 *         <Tab heading='标题1' className='tab-test'>
 *             横向内容1
 *         </Tab>
 *         <Tab heading='标题2' onTabChange={(index)=>{console.log(index);}>
 *             横向内容2
 *         </Tab>
 *     </Tabset>
 * ```
 *
 * @class Tab
 * @module 选项卡
 * @extends Component
 * @constructor
 * @since 0.1.0
 * @demo tab|tab.js{展示}
 * @show true
 * */

@ClassNameMixin
export default class Tab extends Component {
    static ProTypes = {
        /**
         * 选项卡的标题文字，默认为‘tab’
         * @property heading
         * @type String
         * @default 'tab'
         * */
        heading: PropTypes.string,
        /**
         * 点击事件的回调函数
         * @method onTabChange
         * @type Function
         * @default null
         * */
        onTabChange: PropTypes.func
    };

    static defaultProps = {
        heading: 'tab',
        activeIndex:0,
        vertical:false,
        onTabChange: null
    };

    constructor(props,context){
        super(props,context);
    }

    handleClick(){
        this.props.changeActive(this.props.index);
        this.props.onTabChange && this.props.onTabChange(this.props.index);
    }

    isActive(){
        return this.props.index == this.props.activeIndex ? 'active':'';
    }

    isVertical(){
        return !!this.props.vertical ? '':setPhoenixPrefix('col');
    }

    render(){
        let {className,onClick,...other} = this.props;
        return(
            <li className={
                classnames(
                    this.isVertical(),
                    setPhoenixPrefix('tab-nav'),
                    this.isActive(),
                    className
                )
            } onClick={::this.handleClick} {...other}>
                {this.props.heading}
            </li>
        )
    }
}