diff options
author | Dan Finlay <542863+danfinlay@users.noreply.github.com> | 2018-08-08 02:31:42 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-08-08 02:31:42 +0800 |
commit | 0601df9dae488d997277bb6b52c28df27546e27c (patch) | |
tree | ae33a0c4610b9a9e865c797258232542a72f57b6 /ui/app/components/tabs/tabs.component.js | |
parent | 4598554fea7b9435e5cbecc4735c479ffbadf37e (diff) | |
parent | f6490a2a6eda943a374c01df5884acb07ba28869 (diff) | |
download | tangerine-wallet-browser-0601df9dae488d997277bb6b52c28df27546e27c.tar.gz tangerine-wallet-browser-0601df9dae488d997277bb6b52c28df27546e27c.tar.zst tangerine-wallet-browser-0601df9dae488d997277bb6b52c28df27546e27c.zip |
Merge pull request #4954 from MetaMask/v4.9.0
V4.9.0
Diffstat (limited to 'ui/app/components/tabs/tabs.component.js')
-rw-r--r-- | ui/app/components/tabs/tabs.component.js | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/ui/app/components/tabs/tabs.component.js b/ui/app/components/tabs/tabs.component.js new file mode 100644 index 000000000..d26dcff2f --- /dev/null +++ b/ui/app/components/tabs/tabs.component.js @@ -0,0 +1,62 @@ +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> + ) + } +} |