Merge pull request #4830 from MetaMask/page-container-tabs

Add tabs support for PageContainer

test/e2e/beta/metamask-beta-ui.spec.js

@@ -665,7 +665,7 @@ describe('MetaMask', function () {
     })
 
     it('picks the newly created Test token', async () => {
-      const addCustomToken = await findElement(driver, By.xpath("//div[contains(text(), 'Custom Token')]"))
+      const addCustomToken = await findElement(driver, By.xpath("//li[contains(text(), 'Custom Token')]"))
       await addCustomToken.click()
       await delay(regularDelayMs)
 

ui/app/components/page-container/index.scss

@@ -109,7 +109,7 @@
 
     &--selected {
       color: $curious-blue;
-      border-bottom: 3px solid $curious-blue;
+      border-bottom: 2px solid $curious-blue;
     }
   }
 

ui/app/components/page-container/page-container-header/page-container-header.component.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 export default class PageContainerHeader extends Component {
-
   static propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
@@ -11,8 +11,18 @@ export default class PageContainerHeader extends Component {
     onBackButtonClick: PropTypes.func,
     backButtonStyles: PropTypes.object,
     backButtonString: PropTypes.string,
-    children: PropTypes.node,
+    tabs: PropTypes.node,
-  };
+  }
+
+  renderTabs () {
+    const { tabs } = this.props
+
+    return tabs && (
+      <ul className="page-container__tabs">
+        { tabs }
+      </ul>
+    )
+  }
 
   renderHeaderRow () {
     const { showBackButton, onBackButtonClick, backButtonStyles, backButtonString } = this.props
@@ -31,15 +41,18 @@ export default class PageContainerHeader extends Component {
   }
 
   render () {
-    const { title, subtitle, onClose, children } = this.props
+    const { title, subtitle, onClose, tabs } = this.props
 
     return (
-      <div className="page-container__header">
+      <div className={
+        classnames(
+          'page-container__header',
+          { 'page-container__header--no-padding-bottom': Boolean(tabs) }
+        )
+      }>
 
         { this.renderHeaderRow() }
 
-        { children }
-
         {
           title && <div className="page-container__title">
             { title }
@@ -59,6 +72,7 @@ export default class PageContainerHeader extends Component {
           />
         }
 
+        { this.renderTabs() }
       </div>
     )
   }

ui/app/components/page-container/page-container.component.js

@@ -1,30 +1,82 @@
-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
-    title: PropTypes.string.isRequired,
+    backButtonString: PropTypes.string,
-    subtitle: PropTypes.string,
+    backButtonStyles: PropTypes.object,
+    onBackButtonClick: PropTypes.func,
     onClose: PropTypes.func,
     showBackButton: PropTypes.bool,
-    onBackButtonClick: PropTypes.func,
+    subtitle: PropTypes.string,
-    backButtonStyles: PropTypes.object,
+    title: PropTypes.string.isRequired,
-    backButtonString: PropTypes.string,
+    // Tabs-related props
+    defaultActiveTabIndex: PropTypes.number,
+    tabsComponent: PropTypes.node,
     // Content props
-    ContentComponent: PropTypes.func,
+    contentComponent: PropTypes.node,
-    contentComponentProps: PropTypes.object,
     // PageContainerFooter props
-    onCancel: PropTypes.func,
     cancelText: PropTypes.string,
+    disabled: PropTypes.bool,
+    onCancel: PropTypes.func,
     onSubmit: PropTypes.func,
     submitText: PropTypes.string,
-    disabled: PropTypes.bool,
+  }
-  };
+
+  state = {
+    activeTabIndex: this.props.defaultActiveTabIndex || 0,
+  }
+
+  handleTabClick (activeTabIndex) {
+    this.setState({ activeTabIndex })
+  }
+
+  renderTabs () {
+    const { tabsComponent } = this.props
+
+    if (!tabsComponent) {
+      return
+    }
+
+    const numberOfTabs = React.Children.count(tabsComponent.props.children)
+
+    return React.Children.map(tabsComponent.props.children, (child, tabIndex) => {
+      return child && React.cloneElement(child, {
+        onClick: index => this.handleTabClick(index),
+        tabIndex,
+        isActive: numberOfTabs > 1 && tabIndex === this.state.activeTabIndex,
+        key: tabIndex,
+        className: 'page-container__tab',
+        activeClassName: 'page-container__tab--selected',
+      })
+    })
+  }
+
+  renderActiveTabContent () {
+    const { tabsComponent } = this.props
+    const { children } = tabsComponent.props
+    const { activeTabIndex } = this.state
+
+    return children[activeTabIndex]
+      ? children[activeTabIndex].props.children
+      : children.props.children
+  }
+
+  renderContent () {
+    const { contentComponent, tabsComponent } = this.props
+
+    if (contentComponent) {
+      return contentComponent
+    } else if (tabsComponent) {
+      return this.renderActiveTabContent()
+    } else {
+      return null
+    }
+  }
 
   render () {
     const {
@@ -35,8 +87,6 @@ export default class PageContainer extends Component {
       onBackButtonClick,
       backButtonStyles,
       backButtonString,
-      ContentComponent,
-      contentComponentProps,
       onCancel,
       cancelText,
       onSubmit,
@@ -54,9 +104,10 @@ export default class PageContainer extends Component {
           onBackButtonClick={onBackButtonClick}
           backButtonStyles={backButtonStyles}
           backButtonString={backButtonString}
+          tabs={this.renderTabs()}
         />
         <div className="page-container__content">
-          <ContentComponent { ...contentComponentProps } />
+          { this.renderContent() }
         </div>
         <PageContainerFooter
           onCancel={onCancel}
@@ -68,5 +119,4 @@ export default class PageContainer extends Component {
       </div>
     )
   }
-
 }

ui/app/components/pages/add-token/add-token.component.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react'
-import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import ethUtil from 'ethereumjs-util'
 import { checkExistingAddresses } from './util'
 import { tokenInfoGetter } from '../../../token-util'
 import { DEFAULT_ROUTE, CONFIRM_ADD_TOKEN_ROUTE } from '../../../routes'
-import Button from '../../button'
 import TextField from '../../text-field'
 import TokenList from './token-list'
 import TokenSearch from './token-search'
+import PageContainer from '../../page-container'
+import { Tabs, Tab } from '../../tabs'
 
 const emptyAddr = '0x0000000000000000000000000000000000000000'
 const SEARCH_TAB = 'SEARCH'
@@ -285,65 +285,33 @@ class AddToken extends Component {
     )
   }
 
+  renderTabs () {
+    return (
+      <Tabs>
+        <Tab name={this.context.t('search')}>
+          { this.renderSearchToken() }
+        </Tab>
+        <Tab name={this.context.t('customToken')}>
+          { this.renderCustomTokenForm() }
+        </Tab>
+      </Tabs>
+    )
+  }
+
   render () {
-    const { displayedTab } = this.state
     const { history, clearPendingTokens } = this.props
 
     return (
-      <div className="page-container">
+      <PageContainer
-        <div className="page-container__header page-container__header--no-padding-bottom">
+        title={this.context.t('addTokens')}
-          <div className="page-container__title">
+        tabsComponent={this.renderTabs()}
-            { this.context.t('addTokens') }
+        onSubmit={() => this.handleNext()}
-          </div>
+        disabled={this.hasError() || !this.hasSelected()}
-          <div className="page-container__tabs">
+        onCancel={() => {
-            <div
-              className={classnames('page-container__tab', {
-                'page-container__tab--selected': displayedTab === SEARCH_TAB,
-              })}
-              onClick={() => this.setState({ displayedTab: SEARCH_TAB })}
-            >
-              { this.context.t('search') }
-            </div>
-            <div
-              className={classnames('page-container__tab', {
-                'page-container__tab--selected': displayedTab === CUSTOM_TOKEN_TAB,
-              })}
-              onClick={() => this.setState({ displayedTab: CUSTOM_TOKEN_TAB })}
-            >
-              { this.context.t('customToken') }
-            </div>
-          </div>
-        </div>
-        <div className="page-container__content">
-          {
-            displayedTab === CUSTOM_TOKEN_TAB
-              ? this.renderCustomTokenForm()
-              : this.renderSearchToken()
-          }
-        </div>
-        <div className="page-container__footer">
-          <Button
-            type="default"
-            large
-            className="page-container__footer-button"
-            onClick={() => {
           clearPendingTokens()
           history.push(DEFAULT_ROUTE)
         }}
-          >
+      />
-            { this.context.t('cancel') }
-          </Button>
-          <Button
-            type="primary"
-            large
-            className="page-container__footer-button"
-            onClick={() => this.handleNext()}
-            disabled={this.hasError() || !this.hasSelected()}
-          >
-            { this.context.t('next') }
-          </Button>
-        </div>
-      </div>
     )
   }
 }

ui/app/components/tabs/tab/tab.component.js

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 const Tab = props => {
-  const { name, onClick, isActive, tabIndex } = props
+  const { name, onClick, isActive, tabIndex, className, activeClassName } = props
 
   return (
     <li
       className={classnames(
-        'tab',
+        className,
-        isActive && 'tab--active',
+        { [activeClassName]: isActive },
       )}
       onClick={event => {
         event.preventDefault()
@@ -26,6 +26,13 @@ Tab.propTypes = {
   onClick: PropTypes.func,
   isActive: PropTypes.bool,
   tabIndex: PropTypes.number,
+  className: PropTypes.string,
+  activeClassName: PropTypes.string,
+}
+
+Tab.defaultProps = {
+  className: 'tab',
+  activeClassName: 'tab--active',
 }
 
 export default Tab