feat: make hideTabs work

bettyblocks · Sep 25, 2020 · 53042c0 · 53042c0
1 parent b4a57be
commit 53042c0
Showing 1 changed file with 38 additions and 33 deletions.
diff --git a/src/components/tabs.js b/src/components/tabs.js
@@ -13,6 +13,7 @@
       centered,
       orientation,
       scrollButtons,
+      hideTabs,
     } = options;
 
     const isDev = env === 'dev';
@@ -29,41 +30,45 @@
       }
     }, [isDev, defaultValue]);
 
+    const TabsHeader = (
+      <Tabs
+        aria-label="tabs"
+        onChange={handleChange}
+        value={value}
+        variant={variant}
+        centered={centered}
+        orientation={orientation}
+        scrollButtons={scrollButtons}
+        classes={{ root: classes.root, indicator: classes.indicator }}
+      >
+        {React.Children.map(children, (child, index) => {
+          const { options } = child.props;
+          const {
+            label = tabData[`label${index}`] || [`Tab`],
+            icon = tabData[`icon${index}`] || 'None',
+            disabled = tabData[`disabled${index}`] || false,
+            disableRipple = tabData[`disableRipple${index}`] || false,
+          } = isDev ? {} : options;
+
+          return (
+            <Tab
+              label={useText(label)}
+              icon={
+                icon && icon !== 'None'
+                  ? React.createElement(Icons[icon])
+                  : undefined
+              }
+              disabled={disabled}
+              disableRipple={disableRipple}
+            />
+          );
+        })}
+      </Tabs>
+    );
+
     const TabGroup = (
       <div className={classes.tabs}>
-        <Tabs
-          aria-label="tabs"
-          onChange={handleChange}
-          value={value}
-          variant={variant}
-          centered={centered}
-          orientation={orientation}
-          scrollButtons={scrollButtons}
-          classes={{ root: classes.root, indicator: classes.indicator }}
-        >
-          {React.Children.map(children, (child, index) => {
-            const { options } = child.props;
-            const {
-              label = tabData[`label${index}`] || [`Tab`],
-              icon = tabData[`icon${index}`] || 'None',
-              disabled = tabData[`disabled${index}`] || false,
-              disableRipple = tabData[`disableRipple${index}`] || false,
-            } = isDev ? {} : options;
-
-            return (
-              <Tab
-                label={useText(label)}
-                icon={
-                  icon && icon !== 'None'
-                    ? React.createElement(Icons[icon])
-                    : undefined
-                }
-                disabled={disabled}
-                disableRipple={disableRipple}
-              />
-            );
-          })}
-        </Tabs>
+        {!hideTabs && TabsHeader}
         <Children value={value} tabData={tabData} setTabData={setTabData}>
           {children}
         </Children>