
import React from 'react'

class Tabs extends React.Component {
  static propTypes = {
    tabs: React.PropTypes.array,
    location: React.PropTypes.object
  }

  static defaultProps = {
    tabs: []
  }

  state = {
    index: -1,
    direction: ''
  }

  componentDidMount () {
    this.setInkBarPosition(this.props)
  }

  /**
   * Make sure ink bar is removed when no active tab is found anymore.
   */
  componentWillReceiveProps (nextProps) {
    this.setInkBarPosition(nextProps)
  }

  setInkBarPosition = (props) => {
    const index = props.tabs.findIndex(tab => window.location.href.includes(tab.props.to))
    const direction = index > this.state.index ? 'right' : 'left'
    this.setState({
      index,
      direction
    })
  }

  /**
   * Render component
   */
  render () {
    const width = 100 / this.props.tabs.length
    const left = this.state.index * width
    const right = (this.props.tabs.length - this.state.index - 1) * width

    return (
      <div className='Tabs'>
        {this.props.tabs.map((tab, index) =>
          <div key={index} className='Tabs-Item'>
            {tab}
          </div>
        )}
        {this.state.index === -1
          ? null
          : <div
            className={`Tabs-InkBar transition-${this.state.direction}`}
            style={{
              left: `${left}%`,
              right: `${right}%`
            }}
          />
        }
      </div>
    )
  }
}

export default Tabs

@@ -116,46 +116,8 @@
 rray
-,%0A    location: React.PropTypes.object
 %0A  %7D
@@ -166,58 +166,8 @@
  %7D%0A%0A
-  state = %7B%0A    index: -1,%0A    direction: ''%0A  %7D%0A%0A
   co
@@ -218,149 +218,176 @@
 ion(
-this.props)%0A  %7D%0A%0A  /**%0A   * Make sur
+)%0A  %7D%0A%0A  componentDidUpdate () %7B%0A    // mov
 e ink
- 
 bar 
-is removed when no active tab is found anymore.%0A   */%0A  componentWillReceiveProps (nextProps) %7B
+AFTER nav/link children have been updated and reflect%0A    // %22activeClassName%22 (active). This cannot be done before.
 %0A   
@@ -414,17 +414,8 @@
 ion(
-nextProps
 )%0A  
@@ -440,21 +440,16 @@
 tion = (
-props
 ) =%3E %7B%0A 
@@ -469,256 +469,411 @@
 x = 
-props.tabs.findIndex(tab =%3E window.location.href.includes(tab.props.to))%0A    const direction = index %3E this.state.index ? 'right' : 'left'%0A    this.setState(%7B
+Array.prototype.slice.call(this.tabRoot.children)%0A      .filter(element =%3E !element.classList.contains('Tabs-InkBar'))%0A      .findIndex(tab =%3E tab.firstElementChild.classList.contains('active'))%0A    this.inkbarNode.classList.remove('transition-right', 'transition-left')
 %0A    
-  
+if (
 index
-,%0A      direction%0A    %7D)%0A  %7D%0A%0A  /**%0A   * Render component%0A   */%0A  render () %7B%0A
+ === -1) %7B%0A      this.inkbarNode.style.display = 'none'%0A    %7D else %7B%0A      this.inkbarNode.style.display = 'initial'%0A  
     
@@ -923,32 +923,201 @@
     
+  
 const 
-left = this.state.
+prevIndex = this.inkbarNode.style.left ? Math.round(parseFloat(this.inkbarNode.style.left) / width) : -1%0A      const direction = index %3E prevIndex ? 'right' : 'left'%0A      const left = 
 inde
@@ -1126,16 +1126,18 @@
 * width%0A
+  
     cons
@@ -1172,27 +1172,16 @@
 ength - 
-this.state.
 index - 
@@ -1191,16 +1191,237 @@
 * width%0A
+      this.inkbarNode.style.left = %60$%7Bleft%7D%25%60%0A      this.inkbarNode.style.right = %60$%7Bright%7D%25%60%0A      if (prevIndex !== -1) %7B%0A        this.inkbarNode.classList.add(%60transition-$%7Bdirection%7D%60)%0A      %7D%0A    %7D%0A  %7D%0A%0A  render () %7B
 %0A    ret
@@ -1453,16 +1453,54 @@
 e='Tabs'
+ ref=%7Bnode =%3E %7B this.tabRoot = node %7D%7D
 %3E%0A      
@@ -1646,69 +1646,64 @@
     
-%7Bthis.state.index === -1%0A          ? null%0A          : %3Cdiv%0A  
+%3Cdiv%0A          ref=%7Bnode =%3E %7B this.inkbarNode = node %7D%7D%0A
     
@@ -1722,10 +1722,9 @@
 ame=
-%7B%60
+'
 Tabs
@@ -1734,169 +1734,20 @@
 kBar
- transition-$%7Bthis.state.direction%7D%60%7D%0A            style=%7B%7B%0A              left: %60$%7Bleft%7D%25%60,%0A              right: %60$%7Bright%7D%25%60%0A            %7D%7D%0A          /%3E%0A        %7D
+'%0A        /%3E
 %0A   

make tabs router agnostic (#314)