/* jshint esnext: true, asi: true */

​

const debounce = _.debounce

const Component = React.Component

const Tabs = ReactBootstrap.Tabs

const Tab = ReactBootstrap.Tab

​

/////////////////////////

// Equalizer

// From: https://github.com/patrickgalbraith/react-equalizer

// Version 1.0.5

// Note: This version may not be the latest see Github for latest

//       Scroll down for example usage code

​

class Equalizer extends Component {

  constructor(){

    super()

    this.handleResize          = debounce(this.handleResize.bind(this), 50)

    this.updateChildrenHeights = this.updateChildrenHeights.bind(this)

  }

​

  componentDidMount() {

    this.handleResize()

    addEventListener('resize', this.handleResize)

  }

​

  componentWillUnmount() {

    removeEventListener('resize', this.handleResize)

  }

​

  componentDidUpdate() {

    this.handleResize()

  }

​

  handleResize() {

    setTimeout(this.updateChildrenHeights, 0)

  }

​

  static getHeights(nodes, byRow = true) {

    let lastElTopOffset = 0,

        groups          = [],

        row             = 0

​

    groups[row] = []

​

    for(let i = 0; i < nodes.length; i++){

      let node = nodes[i]

​

      node.style.height    = 'auto'

      node.style.maxHeight = ''

      node.style.minHeight = ''

​

      const elOffsetTop = node.offsetTop

      const elHeight    = node.offsetHeight

​

      if(i === 0) {

        lastElTopOffset = elOffsetTop

      }

​

      if (elOffsetTop != lastElTopOffset && byRow) {

        row++

        groups[row] = []

        lastElTopOffset = elOffsetTop

      }

​

      groups[row].push([node, elHeight])

    }

​

    for (let j = 0; j < groups.length; j++) {

      const heights = groups[j].map((item) => item[1])

      const max     = Math.max.apply(null, heights)

      groups[j].push(max)

    }

​

    return groups

  }

​

  updateChildrenHeights() {

    const { property, byRow, enabled } = this.props

    const node = ReactDOM.findDOMNode(this)

​

    if (!enabled(this, node)) {

      return

    }

​

    if (node !== undefined) {

      const children = this.props.nodes(this, node)

      const heights  = this.constructor.getHeights(children, byRow)

​

      for (let row = 0; row < heights.length; row++) {

        const max = heights[row][heights[row].length-1]

​

        for (let i = 0; i < (heights[row].length - 1); i++) {

          heights[row][i][0].style[property] = max + 'px'

        }

      }

    }

  }

​

  render() {

    const {children, property, byRow, enabled, nodes, ...otherProps} = this.props

    return (

      <div onLoad={this.handleResize} {...otherProps}>

        {children}

      </div>

    )

  }

}

​

Equalizer.defaultProps = {

  property: 'height',

  byRow:    true,

  enabled:  () => true,

  nodes:    (component, node) => node.children

}

​

Equalizer.propTypes = {

  children: React.PropTypes.node.isRequired,

  property: React.PropTypes.string,

  byRow:    React.PropTypes.bool,

  enabled:  React.PropTypes.func,

  nodes:    React.PropTypes.func

}

​

​

////////////////////////

// Example Component

​

class MyComponent extends React.Component {

  render() {

    let colStyles = {

      float: 'left',

      width: '50%',

      padding: '10px',

      background: '#ddd',

      border: '4px solid white',

      boxSizing: 'border-box'

    }

    return (

      <div>

        <Tabs defaultActiveKey={2}>

          <Tab eventKey={1} title="Tab 1">

            <Equalizer byRow={false}>

              <div style={colStyles}>

                <img src="http://placehold.it/200x300" />

              </div>

              <div style={colStyles}>

                Test content

              </div>

            </Equalizer>

          </Tab>

          <Tab eventKey={2} title="Tab 2">

            <Equalizer byRow={false}>

              <div style={colStyles}>

                <img src="http://placehold.it/200x300" />

              </div>

              <div style={colStyles}>

                Test content

              </div>

            </Equalizer>

          </Tab>

          <Tab eventKey={3} title="Tab 3">

            <Equalizer byRow={false}>

              <div style={colStyles}>

                <img src="http://placehold.it/200x300" />

              </div>

              <div style={colStyles}>

                Test content

              </div>

            </Equalizer>

          </Tab>

        </Tabs>

      </div>

    )

  }

}

​

ReactDOM.render(

  <MyComponent />,

  document.getElementById('react_root')

)