Update variable names and docs for the resize handle behaviours.

y-scope · Sep 24, 2024 · 6e27725 · 6e27725
1 parent 80b203a
commit 6e27725
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx
@@ -9,7 +9,14 @@ import "./ResizeHandle.css";
 
 interface ResizeHandleProps {
     onHandleRelease: () => void,
-    onResize: (offset: number) => void,
+
+    /**
+     * Gets triggered when a resize event occurs.
+     *
+     * @param resizeHandlePosition The horizontal distance, in pixels, between the mouse pointer
+     * and the left edge of the viewport.
+     */
+    onResize: (resizeHandlePosition: number) => void,
 }
 
 /**

diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx
@@ -50,7 +50,7 @@ const SidebarContainer = ({children}: SidebarContainerProps) => {
 
     const tabListRef = useRef<HTMLDivElement>(null);
 
-    const hidePanelAndResizeHandle = () => {
+    const deactivateTabAndHideResizeHandle = () => {
         setActiveTabName(TAB_NAME.NONE);
         document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px");
     };
@@ -63,7 +63,7 @@ const SidebarContainer = ({children}: SidebarContainerProps) => {
         }
 
         if (activeTabName === tabName) {
-            hidePanelAndResizeHandle();
+            deactivateTabAndHideResizeHandle();
             setPanelWidth(tabListRef.current.clientWidth);
 
             return;
@@ -75,20 +75,27 @@ const SidebarContainer = ({children}: SidebarContainerProps) => {
 
     const handleResizeHandleRelease = useCallback(() => {
         if (getPanelWidth() === tabListRef.current?.clientWidth) {
-            hidePanelAndResizeHandle();
+            deactivateTabAndHideResizeHandle();
         }
     }, []);
 
-    const handleResize = useCallback((offset: number) => {
+    const handleResize = useCallback((resizeHandlePosition: number) => {
         if (null === tabListRef.current) {
             console.error("Unexpected null tabListRef.current");
 
             return;
         }
-        if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > offset) {
+        if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > resizeHandlePosition) {
+            // If the resize handle is positioned to the right of the <TabList/>'s right edge
+            // with a clipping threshold accounted, close the panel.
             setPanelWidth(tabListRef.current.clientWidth);
-        } else if (offset < window.innerWidth * PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO) {
-            setPanelWidth(offset);
+        } else if (
+            resizeHandlePosition < window.innerWidth * PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO
+        ) {
+            // If the resize handle is positioned to the left of 80% of the window's width,
+            // update the panel width with the distance between the mouse pointer and the
+            // window's left edge.
+            setPanelWidth(resizeHandlePosition);
         }
     }, []);