m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fix code readability, use PureComponent over Component

Browse Source
This commit is contained in:
Alexander Tseung 2018-07-20 15:42:28 -07:00
parent 01c0c98501
commit d7d141cea5
3 changed files with 23 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/page-container/page-container-header/page-container-header.component.js
View File

@ -47,7 +47,7 @@ export default class PageContainerHeader extends Component {
<div className={ <div className={
classnames( classnames(
'page-container__header', 'page-container__header',
tabs && 'page-container__header--no-padding-bottom' { 'page-container__header--no-padding-bottom': Boolean(tabs) }
) )
}> }>

45
ui/app/components/page-container/page-container.component.js
View File

@ -1,10 +1,10 @@
import React, { Component } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import PageContainerHeader from './page-container-header' import PageContainerHeader from './page-container-header'
import PageContainerFooter from './page-container-footer' import PageContainerFooter from './page-container-footer'
export default class PageContainer extends Component { export default class PageContainer extends PureComponent {
static propTypes = { static propTypes = {
// PageContainerHeader props // PageContainerHeader props
backButtonString: PropTypes.string, backButtonString: PropTypes.string,
@ -28,25 +28,11 @@ export default class PageContainer extends Component {
} }
state = { state = {
activeTabIndex: 0, activeTabIndex: this.props.defaultActiveTabIndex || 0,
} }
componentDidMount () { handleTabClick (activeTabIndex) {
const { defaultActiveTabIndex } = this.props this.setState({ activeTabIndex })
if (defaultActiveTabIndex) {
this.setState({ activeTabIndex: defaultActiveTabIndex })
}
}
handleTabClick (tabIndex) {
const { activeTabIndex } = this.state
if (tabIndex !== activeTabIndex) {
this.setState({
activeTabIndex: tabIndex,
})
}
} }
renderTabs () { renderTabs () {
@ -58,12 +44,12 @@ export default class PageContainer extends Component {
const numberOfTabs = React.Children.count(tabsComponent.props.children) 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, { return child && React.cloneElement(child, {
onClick: index => this.handleTabClick(index), onClick: index => this.handleTabClick(index),
tabIndex: index, tabIndex,
isActive: numberOfTabs > 1 && index === this.state.activeTabIndex, isActive: numberOfTabs > 1 && tabIndex === this.state.activeTabIndex,
key: index, key: tabIndex,
className: 'page-container__tab', className: 'page-container__tab',
activeClassName: 'page-container__tab--selected', activeClassName: 'page-container__tab--selected',
}) })
@ -83,13 +69,12 @@ export default class PageContainer extends Component {
renderContent () { renderContent () {
const { contentComponent, tabsComponent } = this.props const { contentComponent, tabsComponent } = this.props
switch (true) { if (contentComponent) {
case Boolean(contentComponent): return contentComponent
return contentComponent } else if (tabsComponent) {
case Boolean(tabsComponent): return this.renderActiveTabContent()
return this.renderActiveTabContent() } else {
default: return null
return null
} }
} }

9
ui/app/components/tabs/tab/tab.component.js
View File

@ -8,8 +8,8 @@ const Tab = props => {
return ( return (
<li <li
className={classnames( className={classnames(
className || 'tab', className,
isActive && (activeClassName || 'tab--active'), { [activeClassName]: isActive },
)} )}
onClick={event => { onClick={event => {
event.preventDefault() event.preventDefault()
@ -30,4 +30,9 @@ Tab.propTypes = {
activeClassName: PropTypes.string, activeClassName: PropTypes.string,
} }
Tab.defaultProps = {
className: 'tab',
activeClassName: 'tab--active',
}
export default Tab export default Tab