src/tab/Tab.js File

  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import Component from '../utils/Component'
  4. import classnames from 'classnames'
  5.  
  6. /**
  7.  * tab选项卡组件<br/>
  8.  * - 通过heading设置选项卡的显示内容。
  9.  * - 可通过clickCallback设置点击选项卡的回调函数。
  10.  * - 可自定义className等常用属性以及事件。
  11.  *
  12.  * 具体属性和接口如下：
  13.  * - heading:选项卡的显示内容, 默认'tab'
  14.  * - clickCallback:点击事件的回调函数
  15.  *
  16.  * 示例:
  17.  * ```code
  18.  *     <Tabset index={this.state.index} tabCallback={(index)=>{console.log(index);}>
  19.  *         <Tab heading='标题1' className='tab-test'>
  20.  *             横向内容1
  21.  *         </Tab>
  22.  *         <Tab heading='标题2' clickCallback={(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. export default class Tab extends Component {
  38.     static ProTypes = {
  39.         /**
  40.          * 选项卡的标题文字，默认为‘tab’
  41.          * @property heading
  42.          * @type String
  43.          * @default 'tab'
  44.          * */
  45.         heading: PropTypes.string,
  46.         /**
  47.          * 点击事件的回调函数
  48.          * @method clickCallback
  49.          * @param {number} index 索引值
  50.          * @type Function
  51.          * @default null
  52.          * */
  53.         clickCallback: PropTypes.func
  54.     };
  55.  
  56.     static defaultProps = {
  57.         heading: 'tab',
  58.         activeIndex:0,
  59.         vertical:false,
  60.         clickCallback: null,
  61.         classPrefix:'tab',
  62.         classMapping : {}
  63.     };
  64.  
  65.     constructor(props,context){
  66.         super(props,context);
  67.     }
  68.  
  69.     handleClick(){
  70.         this.props.changeActive(this.props.index);
  71.         this.props.clickCallback && this.props.clickCallback(this.props.index);
  72.     }
  73.  
  74.     isActive(){
  75.         return this.props.index == this.props.activeIndex ? 'active':'';
  76.     }
  77.  
  78.     isVertical(){
  79.         return !!this.props.vertical ? '': this.setPhPrefix('col',true);
  80.     }
  81.  
  82.     renderTab(){
  83.         let {className} = this.props;
  84.         return(
  85.             <li {...this.otherProps} className={
  86.                 classnames(
  87.                     this.isVertical(),
  88.                     this.setPhPrefix('tab-nav',true),
  89.                     this.isActive(),
  90.                     className
  91.                 )
  92.             } onClick={this.handleClick.bind(this)}>
  93.                 <a href='javascript:;'>{this.props.heading}</a>
  94.             </li>
  95.         )
  96.     }
  97.  
  98.     render(){
  99.         return this.renderTab()
  100.     }
  101. }
  102.