chore: added onClick logic

deriv-com · Feb 7, 2024 · ed778b2 · ed778b2
1 parent d2c37c3
commit ed778b2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 21 deletions.
diff --git a/lib/components/VerticalTab/VerticalTab.scss b/lib/components/VerticalTab/VerticalTab.scss
@@ -64,14 +64,8 @@
             background-color: #e6e9e9;
         }
 
-        &--open {
-            background-color: #fff;
-            border-left: 4px solid #ff444f;
-            padding-left: 12px;
+        &--open > :nth-child(2) {
             font-weight: bold;
-            &:hover{
-                background-color: #fff;
-            }
         }
     }
 

diff --git a/lib/components/VerticalTab/VerticalTabItems.tsx b/lib/components/VerticalTab/VerticalTabItems.tsx
@@ -27,23 +27,24 @@ export const VerticalTabItems = ({ items, className, iconClassName, labelClassNa
     const [selectedTab, setSelectedTab] = useState<string>(activeTab);
 
     const findActiveTab = (title: string) => {
-        let clicked_item = undefined;
         for (const item of items) {
             if (item?.subItems) {
-                clicked_item =  item?.subItems.find((subItem) => subItem?.title === title);
-            }else{
+                const foundItem = item?.subItems.find((subItem) => subItem?.title === title);
+                if (foundItem) {
+                    return foundItem;
+                }
+            } else {
                 if (item?.title === title) {
-                    return item?.title;
+                    return item;
                 }
             }
         }
-
-        return clicked_item?.title;
     }
 
     const onSelectItemHandler = (title: string) => {
-        console.log("item clicked", title)
-        setSelectedTab(() => findActiveTab(title) ?? activeTab);
+        const new_active_tab = findActiveTab(title)?.title;
+        // console.log('new_active_tab:', new_active_tab);
+        setSelectedTab(() => new_active_tab ?? activeTab);
         onSelectItem?.(title);
     }
 
@@ -107,12 +108,7 @@ export const VerticalTabItems = ({ items, className, iconClassName, labelClassNa
                 })}
             </div>
             <div className='vertical-tab__pane'>
-                {items.find((item) => {
-                    if (item?.subItems) {
-                        return item?.subItems.find((subItem) => subItem?.title === selectedTab)
-                    }
-                    return item?.title === selectedTab
-                })?.component}
+                {findActiveTab(selectedTab)?.component}
             </div>
         </div>
     );