feat(tab bar component): added a hidden-panel prop

added hidden-panel prop so the user can specify when the tab content should appear
EvoluxBR · Aug 30, 2019 · fb5f46d · fb5f46d
1 parent 3ba3385
commit fb5f46d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git 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
@@ -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>