All files / tabs index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
2x
2x
2x
1x
 
 
2x
 
 
 
 
 
 
 
4x
4x
4x
4x
 
4x
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react'
import {Link, withRouter} from 'react-router'
 
/**
 * Tabs component
 */
class Tabs extends React.Component {
 
  /**
   * Property types
   */
  static propTypes = {
    tabs: React.PropTypes.array
  }
 
  /**
   * Default properties
   */
  static defaultProps = {
    tabs: []
  }
 
  state = {
    index: 0,
    direction: ''
  }
 
  /**
   * Handle click on tab
   */
  onClick = (index) => {
    var direction = index > this.state.index ? 'right' : 'left'
    this.setState({
      index,
      direction
    })
  }
 
  /**
   * Component did mount
   */
  componentDidMount () {
    var activeRouteIndex = 0
    this.props.tabs.forEach((tab, index) => {
      if (this.props.router.isActive(tab.href)) {
        activeRouteIndex = index
      }
    })
    this.setState({
      index: activeRouteIndex
    })
  }
 
  /**
   * Render component
   */
  render () {
    var width = 100 / this.props.tabs.length
    var left = this.state.index * width
    var right = (this.props.tabs.length - this.state.index - 1) * width
 
    return (
      <div className='Tabs'>
        {this.props.tabs.map((tab, index) =>
          <Link
            key={index}
            activeClassName='active'
            to={tab.href}
            className='Tabs-Item'
            onClick={this.onClick.bind(this, index)}
          >
            {tab.text}
          </Link>
        )}
        <div
          className={`Tabs-InkBar transition-${this.state.direction}`}
          style={{
            left: `${left}%`,
            right: `${right}%`
          }}
        />
      </div>
    )
  }
 
}
 
export default withRouter(Tabs)