From fb5f46d8203776b4f466badd0e57e7d90da1ee4c Mon Sep 17 00:00:00 2001
From: Gustavo Freire Santos <gustavo.freire.s@outlook.com>
Date: Fri, 30 Aug 2019 13:32:03 -0300
Subject: [PATCH] feat(tab bar component): added a hidden-panel prop

added hidden-panel prop so the user can specify when the tab content should appear
---
 src/components/tabs/tab-bar.tsx  | 24 +++++++++++++-----------
 src/components/testInterface.tsx |  8 +++++++-
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/tabs/tab-bar.tsx b/src/components/tabs/tab-bar.tsx
index f302656..9ce5245 100644
--- a/src/components/tabs/tab-bar.tsx
+++ b/src/components/tabs/tab-bar.tsx
@@ -29,6 +29,7 @@ export interface ITabBarProps {
   onTabsChange?: (modifiedList: ITab[], tabList?: ReactChildren) => void;
   closeIcon?: ReactElement;
   className?: string;
+  hiddenPanel?: boolean;
 }
 
 const TabBar = (props: ITabBarProps) => {
@@ -245,17 +246,18 @@ const TabBar = (props: ITabBarProps) => {
           </span>
         )}
       </div>
-      {tabList.map((child: any) => {
-        return (
-          <div
-            id={`${child.id}-panel`}
-            key={`${child.id}-panel`}
-            className={`tab-panel ${checkActive(child) ? 'active' : ''}`}
-          >
-            {child.tabComponent}
-          </div>
-        );
-      })}
+      {!props.hiddenPanel &&
+        tabList.map((child: any) => {
+          return (
+            <div
+              id={`${child.id}-panel`}
+              key={`${child.id}-panel`}
+              className={`tab-panel ${checkActive(child) ? 'active' : ''}`}
+            >
+              {child.tabComponent}
+            </div>
+          );
+        })}
     </Fragment>
   );
 };
diff --git a/src/components/testInterface.tsx b/src/components/testInterface.tsx
index 313e016..600c8d4 100644
--- a/src/components/testInterface.tsx
+++ b/src/components/testInterface.tsx
@@ -13,7 +13,13 @@ const TabInterface = () => {
     );
   };
   return (
-    <TabBar closeable={true} reorderable={true} newTab={createNew} className="small-tab">
+    <TabBar
+      closeable={true}
+      reorderable={true}
+      newTab={createNew}
+      className="small-tab"
+      hiddenPanel
+    >
       <Tab text="first tab" classNameActive="red-header" className="the-rest">
         <form className="frm">
           <h1>Form 1</h1>