Support for background colour for tabs widget (ToolJet#3254)

* style fix :: added bg colour option * bg colour for content * colour fix * realtime fix
wangke1993 · Jun 13, 2022 · 002ae8c · 002ae8c
1 parent 037bdb5
commit 002ae8c
Showing 1 changed file with 26 additions and 12 deletions.
diff --git a/frontend/src/Editor/Components/Tabs.jsx b/frontend/src/Editor/Components/Tabs.jsx
@@ -49,21 +49,36 @@ export const Tabs = function Tabs({
     console.log(err);
   }
 
-  const computedStyles = {
-    height,
-    display: parsedWidgetVisibility ? 'flex' : 'none',
-  };
-
   const parentRef = useRef(null);
   const [currentTab, setCurrentTab] = useState(parsedDefaultTab);
+  const [bgColor, setBgColor] = useState('#fff');
 
   useEffect(() => {
     setCurrentTab(parsedDefaultTab);
   }, [parsedDefaultTab]);
 
+  useEffect(() => {
+    setExposedVariable('currentTab', currentTab);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentTab]);
+
+  useEffect(() => {
+    const currentTabData = parsedTabs.filter((tab) => tab.id === currentTab);
+    setBgColor(currentTabData[0]?.backgroundColor ? currentTabData[0]?.backgroundColor : 'white');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentState, currentTab]);
+
   return (
-    <div data-disabled={parsedDisabledState} className="jet-tabs card" style={computedStyles}>
-      <ul className="nav nav-tabs" data-bs-toggle="tabs" style={{ display: parsedHideTabs && 'none' }}>
+    <div
+      data-disabled={parsedDisabledState}
+      className="jet-tabs card"
+      style={{ height, display: parsedWidgetVisibility ? 'flex' : 'none', backgroundColor: bgColor }}
+    >
+      <ul
+        className="nav nav-tabs"
+        data-bs-toggle="tabs"
+        style={{ display: parsedHideTabs && 'none', backgroundColor: '#fff', margin: '-1px' }}
+      >
         {parsedTabs.map((tab) => (
           <li
             className="nav-item"
@@ -75,11 +90,10 @@ export const Tabs = function Tabs({
           >
             <a
               className={`nav-link ${currentTab == tab.id ? 'active' : ''}`}
-              style={
-                currentTab == tab.id
-                  ? { color: parsedHighlightColor, borderBottom: `1px solid ${parsedHighlightColor}` }
-                  : {}
-              }
+              style={{
+                color: currentTab == tab.id && parsedHighlightColor,
+                borderBottom: currentTab == tab.id && `1px solid ${parsedHighlightColor}`,
+              }}
               ref={(el) => {
                 if (el && currentTab == tab.id) {
                   el.style.setProperty('color', parsedHighlightColor, 'important');