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 }
|