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>
)
}
}