1. import React, {PropTypes,Component} from 'react';
  2. import ClassNameMixin from './utils/ClassNameMixin';
  3. import {setPhoenixPrefix} from './utils/Tool';
  4. import classnames from 'classnames';
  5.  
  6. /**
  7. * tab选项卡组件<br/>
  8. * - 通过heading设置选项卡的显示内容。
  9. * - 可通过onTabChange设置点击选项卡的回调函数。
  10. * - 可自定义className等常用属性以及事件。
  11. *
  12. * 具体属性和接口如下:
  13. * - heading:选项卡的显示内容, 默认'tab'
  14. * - onTabChange:点击事件的回调函数
  15. *
  16. * 示例:
  17. * ```code
  18. * <Tabset activeIndex ={this.state.index} tabCallback={(index)=>{console.log(index);}>
  19. * <Tab heading='标题1' className='tab-test'>
  20. * 横向内容1
  21. * </Tab>
  22. * <Tab heading='标题2' onTabChange={(index)=>{console.log(index);}>
  23. * 横向内容2
  24. * </Tab>
  25. * </Tabset>
  26. * ```
  27. *
  28. * @class Tab
  29. * @module 选项卡
  30. * @extends Component
  31. * @constructor
  32. * @since 0.1.0
  33. * @demo tab|tab.js{展示}
  34. * @show true
  35. * */
  36.  
  37. @ClassNameMixin
  38. export default class Tab extends Component {
  39. static ProTypes = {
  40. /**
  41. * 选项卡的标题文字,默认为‘tab’
  42. * @property heading
  43. * @type String
  44. * @default 'tab'
  45. * */
  46. heading: PropTypes.string,
  47. /**
  48. * 点击事件的回调函数
  49. * @method onTabChange
  50. * @type Function
  51. * @default null
  52. * */
  53. onTabChange: PropTypes.func
  54. };
  55.  
  56. static defaultProps = {
  57. heading: 'tab',
  58. activeIndex:0,
  59. vertical:false,
  60. onTabChange: null
  61. };
  62.  
  63. constructor(props,context){
  64. super(props,context);
  65. }
  66.  
  67. handleClick(){
  68. this.props.changeActive(this.props.index);
  69. this.props.onTabChange && this.props.onTabChange(this.props.index);
  70. }
  71.  
  72. isActive(){
  73. return this.props.index == this.props.activeIndex ? 'active':'';
  74. }
  75.  
  76. isVertical(){
  77. return !!this.props.vertical ? '':setPhoenixPrefix('col');
  78. }
  79.  
  80. render(){
  81. let {className,onClick,...other} = this.props;
  82. return(
  83. <li className={
  84. classnames(
  85. this.isVertical(),
  86. setPhoenixPrefix('tab-nav'),
  87. this.isActive(),
  88. className
  89. )
  90. } onClick={::this.handleClick} {...other}>
  91. {this.props.heading}
  92. </li>
  93. )
  94. }
  95. }