src/Tab.js File

  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. }
  96.