Support clicking on an active tab button to close the tab.

y-scope · Sep 18, 2024 · 74328ca · 74328ca
1 parent 4e046fe
commit 74328ca
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx
@@ -13,7 +13,8 @@ import {
 
 interface TooltipTabProps {
     tabName: TAB_NAME,
-    Icon: SvgIconComponent
+    Icon: SvgIconComponent,
+    onTabButtonClick: (tabName: TAB_NAME) => void
 }
 
 /**
@@ -22,9 +23,14 @@ interface TooltipTabProps {
  * @param props
  * @param props.tabName
  * @param props.Icon
+ * @param props.onTabButtonClick
  * @return
  */
-const TooltipTab = ({tabName, Icon}: TooltipTabProps) => {
+const TooltipTab = ({tabName, Icon, onTabButtonClick}: TooltipTabProps) => {
+    const handleClick = () => {
+        onTabButtonClick(tabName);
+    };
+
     return (
         <Tooltip
             arrow={true}
@@ -36,6 +42,7 @@ const TooltipTab = ({tabName, Icon}: TooltipTabProps) => {
                 className={"sidebar-tab-button"}
                 color={"neutral"}
                 indicatorPlacement={"left"}
+                slotProps={{root: {onClick: handleClick}}}
                 value={tabName}
             >
                 <Icon className={"sidebar-tab-button-icon"}/>

diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx
@@ -1,4 +1,4 @@
-import React, {
+import {
     forwardRef,
     useState,
 } from "react";
@@ -20,7 +20,6 @@ import TooltipTab from "./TooltipTab";
 interface PanelTabsProps {
     activeTabName: TAB_NAME,
     onActiveTabNameChange: (newValue: TAB_NAME) => void,
-    onPanelTabOpen: () => void,
 }
 
 /**
@@ -33,7 +32,6 @@ const PanelTabs = forwardRef<HTMLDivElement, PanelTabsProps>((
     {
         activeTabName,
         onActiveTabNameChange,
-        onPanelTabOpen,
     },
     tabListRef
 ) => {
@@ -43,14 +41,13 @@ const PanelTabs = forwardRef<HTMLDivElement, PanelTabsProps>((
         setIsSettingsModalOpen(false);
     };
 
-    const handleTabChange = (__: React.SyntheticEvent | null, value: number | string | null) => {
-        switch (value) {
+    const handleTabButtonClick = (tabName: TAB_NAME) => {
+        switch (tabName) {
             case TAB_NAME.SETTINGS:
                 setIsSettingsModalOpen(true);
                 break;
             default:
-                onActiveTabNameChange(value as TAB_NAME);
-                onPanelTabOpen();
+                onActiveTabNameChange(tabName as TAB_NAME);
         }
     };
 
@@ -61,7 +58,6 @@ const PanelTabs = forwardRef<HTMLDivElement, PanelTabsProps>((
                 orientation={"vertical"}
                 value={activeTabName}
                 variant={"plain"}
-                onChange={handleTabChange}
             >
                 <TabList
                     ref={tabListRef}
@@ -73,12 +69,14 @@ const PanelTabs = forwardRef<HTMLDivElement, PanelTabsProps>((
                         <TooltipTab
                             Icon={Icon}
                             key={tabName}
-                            tabName={tabName}/>
+                            tabName={tabName}
+                            onTabButtonClick={handleTabButtonClick}/>
                     ))}
                     <div className={"sidebar-tab-list-spacing"}/>
                     <TooltipTab
                         Icon={SettingsOutlinedIcon}
-                        tabName={TAB_NAME.SETTINGS}/>
+                        tabName={TAB_NAME.SETTINGS}
+                        onTabButtonClick={handleTabButtonClick}/>
                 </TabList>
                 <FileInfoTab/>
             </Tabs>

diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx
@@ -33,15 +33,32 @@ const SidebarContainer = ({children}: SidebarContainerProps) => {
 
     const tabListRef = useRef<HTMLDivElement>(null);
 
-    const handlePanelTabOpen = useCallback(() => {
+    const hidePanelAndResizeHandle = () => {
+        setActiveTabName(TAB_NAME.NONE);
+        document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px");
+    };
+
+    const handleActiveTabNameChange = useCallback((tabName: TAB_NAME) => {
+        if (null === tabListRef.current) {
+            console.error("Unexpected null tabListRef.current");
+
+            return;
+        }
+
+        if (activeTabName === tabName) {
+            hidePanelAndResizeHandle();
+            setPanelWidth(tabListRef.current.clientWidth);
+
+            return;
+        }
+        setActiveTabName(tabName);
         setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXEL);
         document.body.style.setProperty("--ylv-panel-resize-handle-width", "3px");
-    }, []);
+    }, [activeTabName]);
 
     const handleResizeHandleRelease = useCallback(() => {
         if (panelWidth === tabListRef.current?.clientWidth) {
-            setActiveTabName(TAB_NAME.NONE);
-            document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px");
+            hidePanelAndResizeHandle();
         }
     }, [panelWidth]);
 
@@ -69,8 +86,7 @@ const SidebarContainer = ({children}: SidebarContainerProps) => {
                 <PanelTabs
                     activeTabName={activeTabName}
                     ref={tabListRef}
-                    onActiveTabNameChange={setActiveTabName}
-                    onPanelTabOpen={handlePanelTabOpen}/>
+                    onActiveTabNameChange={handleActiveTabNameChange}/>
                 <ResizeHandle
                     onHandleRelease={handleResizeHandleRelease}
                     onResize={handleResize}/>