From 01c0c98501c02623b0cd650483d14c99566ce0af Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 18 Jul 2018 17:47:01 -0700
Subject: Add tabs support for PageContainer

---
 ui/app/components/tabs/tab/tab.component.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

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

diff --git a/ui/app/components/tabs/tab/tab.component.js b/ui/app/components/tabs/tab/tab.component.js
index a59da8904..481513233 100644
--- a/ui/app/components/tabs/tab/tab.component.js
+++ b/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',
-        isActive && 'tab--active',
+        className || 'tab',
+        isActive && (activeClassName || 'tab--active'),
       )}
       onClick={event => {
         event.preventDefault()
@@ -26,6 +26,8 @@ Tab.propTypes = {
   onClick: PropTypes.func,
   isActive: PropTypes.bool,
   tabIndex: PropTypes.number,
+  className: PropTypes.string,
+  activeClassName: PropTypes.string,
 }
 
 export default Tab
-- 
cgit 


From d7d141cea54ba7bbeb2e7db9fb7ed54ce0733d4b Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 20 Jul 2018 15:42:28 -0700
Subject: Fix code readability, use PureComponent over Component

---
 ui/app/components/tabs/tab/tab.component.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

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

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