From d2b9cb27d76377c6cdd0f211e1bfa973a15f97e9 Mon Sep 17 00:00:00 2001
From: DmitriyNoa <dmytro.zharkov@gmail.com>
Date: Tue, 25 Jan 2022 15:52:36 +0100
Subject: [PATCH] Update values on resize

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>
---
 src/renderer/components/dock/dock-tabs.tsx | 52 +++++++++++++++-------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/dock/dock-tabs.tsx b/src/renderer/components/dock/dock-tabs.tsx
index e7699229f1..70568da0f7 100644
--- a/src/renderer/components/dock/dock-tabs.tsx
+++ b/src/renderer/components/dock/dock-tabs.tsx
@@ -21,33 +21,34 @@ interface Props {
 export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) => {
   const elem = useRef(null);
   const contentElem = useRef(null);
+  const [contentWidth, setContentWidth] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
   const [scrollPosition, setScrollPosition] = useState(0);
   const scrollStep = 200;
 
   const scrollToRight = (): void => {
     if(!elem) return;
+    const scroll = scrollPosition + scrollStep;
 
-    setScrollPosition(scrollPosition + scrollStep);
+    setScrollPosition(scroll);
 
-    elem.current.scrollLeft = scrollPosition;
+    elem.current.scrollLeft = scroll;
   };
 
 
   const scrollToLeft = (): void => {
     if(!elem) return;
+    const scroll = scrollPosition - scrollStep;
 
-    setScrollPosition(scrollPosition - scrollStep);
+    setScrollPosition(scroll);
 
-    elem.current.scrollLeft = scrollPosition;
+    elem.current.scrollLeft = scroll;
   };
 
   const  isScrollableRight = (): boolean => {
     if(!elem || !contentElem) return false;
 
-    const containerWidth = elem.current?.clientWidth;
-    const contentWidth = contentElem.current?.clientWidth;
-
-    return contentWidth > containerWidth && scrollPosition < contentWidth - scrollStep;
+    return contentWidth > containerWidth && scrollPosition < contentWidth - containerWidth;
   };
 
   const  isScrollableLeft = (): boolean => {
@@ -56,6 +57,22 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
     return scrollPosition > scrollStep;
   };
 
+  const updateScrollPosition = ( evt: UIEvent<HTMLDivElement>) => {
+    const position = evt.currentTarget.scrollLeft;
+
+    if (position!== undefined) {
+      setScrollPosition(position);
+    }
+  };
+
+  const onWindowResize = () => {
+    if(!elem || !contentElem) return;
+
+    setContentWidth(contentElem.current.clientWidth);
+    setContainerWidth(elem.current.clientWidth);
+    setScrollPosition(elem.current.scrollLeft);
+  };
+
   const renderTab = (tab?: DockTabModel) => {
     if (!tab) {
       return null;
@@ -75,14 +92,19 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
     }
   };
 
-  useEffect(() => {
-    elem.current.addEventListener("scroll", ( evt: UIEvent<HTMLDivElement>) => {
-      const position = evt.currentTarget.scrollLeft;
 
-      if (position!== undefined) {
-        setScrollPosition(position);
-      }
-    });
+  useEffect(() => {
+    if(!elem || !contentElem) return;
+
+    setContentWidth(contentElem.current.clientWidth);
+    setContainerWidth(elem.current.clientWidth);
+    setScrollPosition(elem.current.scrollLeft);
+
+    // update values in store on scroll
+    elem.current.addEventListener("scroll", updateScrollPosition);
+
+    // update current values on resize to show/hide scroll
+    window.addEventListener("resize", onWindowResize);
   }, []);
 
   return (