diff --git a/ui/app/components/page-container/page-container-header/page-container-header.component.js b/ui/app/components/page-container/page-container-header/page-container-header.component.js
index 338598e5f..a8458604e 100644
--- a/ui/app/components/page-container/page-container-header/page-container-header.component.js
+++ b/ui/app/components/page-container/page-container-header/page-container-header.component.js
@@ -47,7 +47,7 @@ export default class PageContainerHeader extends Component {
diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/page-container/page-container.component.js
index 10923d2fd..3a2274a29 100644
--- a/ui/app/components/page-container/page-container.component.js
+++ b/ui/app/components/page-container/page-container.component.js
@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import PageContainerHeader from './page-container-header'
import PageContainerFooter from './page-container-footer'
-export default class PageContainer extends Component {
+export default class PageContainer extends PureComponent {
static propTypes = {
// PageContainerHeader props
backButtonString: PropTypes.string,
@@ -28,25 +28,11 @@ export default class PageContainer extends Component {
}
state = {
- activeTabIndex: 0,
+ activeTabIndex: this.props.defaultActiveTabIndex || 0,
}
- componentDidMount () {
- const { defaultActiveTabIndex } = this.props
-
- if (defaultActiveTabIndex) {
- this.setState({ activeTabIndex: defaultActiveTabIndex })
- }
- }
-
- handleTabClick (tabIndex) {
- const { activeTabIndex } = this.state
-
- if (tabIndex !== activeTabIndex) {
- this.setState({
- activeTabIndex: tabIndex,
- })
- }
+ handleTabClick (activeTabIndex) {
+ this.setState({ activeTabIndex })
}
renderTabs () {
@@ -58,12 +44,12 @@ export default class PageContainer extends Component {
const numberOfTabs = React.Children.count(tabsComponent.props.children)
- return React.Children.map(tabsComponent.props.children, (child, index) => {
+ return React.Children.map(tabsComponent.props.children, (child, tabIndex) => {
return child && React.cloneElement(child, {
onClick: index => this.handleTabClick(index),
- tabIndex: index,
- isActive: numberOfTabs > 1 && index === this.state.activeTabIndex,
- key: index,
+ tabIndex,
+ isActive: numberOfTabs > 1 && tabIndex === this.state.activeTabIndex,
+ key: tabIndex,
className: 'page-container__tab',
activeClassName: 'page-container__tab--selected',
})
@@ -83,13 +69,12 @@ export default class PageContainer extends Component {
renderContent () {
const { contentComponent, tabsComponent } = this.props
- switch (true) {
- case Boolean(contentComponent):
- return contentComponent
- case Boolean(tabsComponent):
- return this.renderActiveTabContent()
- default:
- return null
+ if (contentComponent) {
+ return contentComponent
+ } else if (tabsComponent) {
+ return this.renderActiveTabContent()
+ } else {
+ return null
}
}
diff --git a/ui/app/components/tabs/tab/tab.component.js b/ui/app/components/tabs/tab/tab.component.js
index 481513233..9e590391c 100644
--- a/ui/app/components/tabs/tab/tab.component.js
+++ b/ui/app/components/tabs/tab/tab.component.js
@@ -8,8 +8,8 @@ const Tab = props => {
return (
{
event.preventDefault()
@@ -30,4 +30,9 @@ Tab.propTypes = {
activeClassName: PropTypes.string,
}
+Tab.defaultProps = {
+ className: 'tab',
+ activeClassName: 'tab--active',
+}
+
export default Tab