Create a property to let the user select the ActiveTab

Lemoncode · Sep 3, 2024 · d047eaa · d047eaa
1 parent fad4615
commit d047eaa
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 1 deletion.
diff --git a/src/common/components/front-components/tabsbar/tabsbar-shape.tsx b/src/common/components/front-components/tabsbar/tabsbar-shape.tsx
@@ -48,6 +48,8 @@ export const TabsBarShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { handleSelection } = useShapeComponentSelection(props, shapeType);
 
+  const activeTab = otherProps?.activeTab ?? 0;
+
   return (
     <Group
       x={x}
@@ -74,7 +76,7 @@ export const TabsBarShape = forwardRef<any, ShapeProps>((props, ref) => {
           <Rect
             width={tabWidth}
             height={tabHeight}
-            fill={index === 0 ? 'white' : '#E0E0E0'} // First tab is selected
+            fill={index === activeTab ? 'white' : '#E0E0E0'} // First tab is selected
             stroke="black"
             strokeWidth={1}
           />

diff --git a/src/core/model/index.ts b/src/core/model/index.ts
@@ -160,6 +160,7 @@ export interface OtherProps {
   imageBlackAndWhite?: boolean;
   progress?: string;
   borderRadius?: string;
+  activeTab?: number;
 }
 
 export const BASE_ICONS_URL = '/icons/';

diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts
@@ -511,6 +511,10 @@ export const generateDefaultOtherProps = (
         progress: '50',
         backgroundColor: '#A9A9A9',
       };
+    case 'tabsbar':
+      return {
+        activeTab: 0,
+      };
     default:
       return undefined;
   }

diff --git a/src/pods/properties/properties.pod.tsx b/src/pods/properties/properties.pod.tsx
@@ -29,6 +29,21 @@ export const PropertiesPod = () => {
 
   const selectedShapeData = getSelectedShapeData();
 
+  // Function to parse the tabsbar text and get the names of the tabs
+  const parseTabsBarText = (text: string): string[] => {
+    return text
+      .trim()
+      .split(',')
+      .map(row => row.trim());
+  };
+
+  // Checking whether the type is tabsbar and parsing the text
+  const isTabsBar = selectedShapeData?.type === 'tabsbar';
+  const tabs =
+    isTabsBar && selectedShapeData?.text
+      ? parseTabsBarText(selectedShapeData.text)
+      : [];
+
   return (
     <div>
       <div className={classes.title}>
@@ -126,6 +141,23 @@ export const PropertiesPod = () => {
           }
         />
       )}
+      {isTabsBar && (
+        <div>
+          <label>Active Tab</label>
+          <select
+            value={selectedShapeData?.otherProps?.activeTab}
+            onChange={e =>
+              updateOtherPropsOnSelected('activeTab', Number(e.target.value))
+            }
+          >
+            {tabs.map((tab, index) => (
+              <option key={index} value={index}>
+                {tab}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
     </div>
   );
 };