From cdcc0eea055bfa2810a38102801e54b88c5f99b4 Mon Sep 17 00:00:00 2001
From: Shan He <heshan0131@gmail.com>
Date: Sun, 21 Mar 2021 01:35:52 -0700
Subject: [PATCH] [Enhancement] make panel tab a factory (#172) (#1412)

Signed-off-by: Shan He <heshan0131@gmail.com>
---
 src/components/index.js                   |  2 +-
 src/components/side-panel/panel-toggle.js | 46 +++++++++++++----------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/index.js b/src/components/index.js
index f0a03d58a1..a721fc5cc3 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -54,7 +54,7 @@ export {
 } from './side-panel/panel-header';
 export {default as PanelHeaderActionFactory} from './side-panel/panel-header-action';
 export {CollapseButtonFactory, default as SidebarFactory} from './side-panel/side-bar';
-export {default as PanelToggleFactory} from './side-panel/panel-toggle';
+export {default as PanelToggleFactory, PanelTabFactory} from './side-panel/panel-toggle';
 
 export {AddDataButtonFactory, default as LayerManagerFactory} from './side-panel/layer-manager';
 export {default as LayerPanelFactory} from './side-panel/layer-panel/layer-panel';
diff --git a/src/components/side-panel/panel-toggle.js b/src/components/side-panel/panel-toggle.js
index 8572ebaa74..99a4149949 100644
--- a/src/components/side-panel/panel-toggle.js
+++ b/src/components/side-panel/panel-toggle.js
@@ -40,28 +40,34 @@ const PanelHeaderBottom = styled.div.attrs({
   min-height: 30px;
 `;
 
-const PanelTab = styled.div.attrs({
-  className: 'side-panel__tab'
-})`
-  align-items: flex-end;
-  border-bottom-style: solid;
-  border-bottom-width: 2px;
-  border-bottom-color: ${props =>
-    props.active ? props.theme.panelToggleBorderColor : 'transparent'};
-  color: ${props => (props.active ? props.theme.subtextColorActive : props.theme.panelTabColor)};
-  display: flex;
-  justify-content: center;
-  margin-right: ${props => props.theme.panelToggleMarginRight}px;
-  padding-bottom: ${props => props.theme.panelToggleBottomPadding}px;
-  width: ${props => props.theme.panelTabWidth};
+export function PanelTabFactory() {
+  const PanelTab = styled.div.attrs({
+    className: 'side-panel__tab'
+  })`
+    align-items: flex-end;
+    border-bottom-style: solid;
+    border-bottom-width: 2px;
+    border-bottom-color: ${props =>
+      props.active ? props.theme.panelToggleBorderColor : 'transparent'};
+    color: ${props => (props.active ? props.theme.subtextColorActive : props.theme.panelTabColor)};
+    display: flex;
+    justify-content: center;
+    margin-right: ${props => props.theme.panelToggleMarginRight}px;
+    padding-bottom: ${props => props.theme.panelToggleBottomPadding}px;
+    width: ${props => props.theme.panelTabWidth};
+  
+    :hover {
+      cursor: pointer;
+      color: ${props => props.theme.textColorHl};
+    }
 
-  :hover {
-    cursor: pointer;
-    color: ${props => props.theme.textColorHl};
-  }
-`;
+  `;
+
+  return PanelTab;
+}
 
-const PanelToggleFactory = () => {
+PanelToggleFactory.deps = [PanelTabFactory];
+function PanelToggleFactory(PanelTab) {
   const PanelToggle = ({panels, activePanel, togglePanel}) => (
     <PanelHeaderBottom>
       {panels.map(panel => (