From ea9d51e427b8e607e612a01629bebf153e516ad9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 22 Jun 2018 23:52:45 -0700
Subject: Refactor and redesign confirm transaction views

---
 ui/app/components/tabs/tabs.component.js | 63 ++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 ui/app/components/tabs/tabs.component.js

(limited to 'ui/app/components/tabs/tabs.component.js')

diff --git a/ui/app/components/tabs/tabs.component.js b/ui/app/components/tabs/tabs.component.js
new file mode 100644
index 000000000..d28f3695e
--- /dev/null
+++ b/ui/app/components/tabs/tabs.component.js
@@ -0,0 +1,63 @@
+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 { children } = this.props
+    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>
+    )
+  }
+}
-- 
cgit 


From a2d9c43fba49680d7553409a4f5013d3febd80e9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 6 Jul 2018 11:58:41 -0700
Subject: Various fixes from PR comments

---
 ui/app/components/tabs/tabs.component.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'ui/app/components/tabs/tabs.component.js')

diff --git a/ui/app/components/tabs/tabs.component.js b/ui/app/components/tabs/tabs.component.js
index d28f3695e..d26dcff2f 100644
--- a/ui/app/components/tabs/tabs.component.js
+++ b/ui/app/components/tabs/tabs.component.js
@@ -26,7 +26,6 @@ export default class Tabs extends Component {
   }
 
   renderTabs () {
-    // const { children } = this.props
     const numberOfTabs = React.Children.count(this.props.children)
 
     return React.Children.map(this.props.children, (child, index) => {
-- 
cgit