1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-24 11:01:41 +01:00
metamask-extension/ui/app/components/tabs/tabs.component.js
2018-07-06 16:27:08 -07:00

63 lines
1.4 KiB
JavaScript

import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class Tabs extends Component {
static propTypes = {
defaultActiveTabIndex: PropTypes.number,
children: PropTypes.node,
}
constructor (props) {
super(props)
this.state = {
activeTabIndex: props.defaultActiveTabIndex || 0,
}
}
handleTabClick (tabIndex) {
const { activeTabIndex } = this.state
if (tabIndex !== activeTabIndex) {
this.setState({
activeTabIndex: tabIndex,
})
}
}
renderTabs () {
const numberOfTabs = React.Children.count(this.props.children)
return React.Children.map(this.props.children, (child, index) => {
return child && React.cloneElement(child, {
onClick: index => this.handleTabClick(index),
tabIndex: index,
isActive: numberOfTabs > 1 && index === this.state.activeTabIndex,
key: index,
})
})
}
renderActiveTabContent () {
const { children } = this.props
const { activeTabIndex } = this.state
return children[activeTabIndex]
? children[activeTabIndex].props.children
: children.props.children
}
render () {
return (
<div className="tabs">
<ul className="tabs__list">
{ this.renderTabs() }
</ul>
<div className="tabs__content">
{ this.renderActiveTabContent() }
</div>
</div>
)
}
}