@hbsis.uikit/react/src/components/tabs/index.js

Biblioteca ReactJS

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import Header from './header'

import StyledTabs from './tabs.styled'

class Tabs extends Component {
  state = {
    active: 0
  }

  componentWillMount () {
    const { children } = this.props
    const panes = React.Children.toArray(children)
    panes.map((pane, key) => {
      pane.props.active && this.setState({ active: key })
    })
  }

  changeActive = (key) => {
    this.setState({ active: key })
  }

  render () {
    const { active } = this.state
    const { children, full } = this.props
    const panes = React.Children.toArray(children)

    return (
      <StyledTabs>
        <Header
          tabs={panes}
          activeTab={active}
          onChangeTab={this.changeActive}
          full={full}
        />
        {panes[active]}
      </StyledTabs>
    )
  }
}

Tabs.propTypes = {
  children: PropTypes.node.isRequired
}

export { TabPane } from './tab-pane'
export { Tabs }