[Tabs] Refactor IntersectionObserver logic (#38133)

Co-authored-by: Olivier Tassinari <[email protected]>
mui · Jul 25, 2023 · 2e56fbd · 2e56fbd
1 parent 1140095
commit 2e56fbd
Showing 1 changed file with 22 additions and 34 deletions.
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
@@ -604,53 +604,41 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
    * Using IntersectionObserver on first and last Tabs.
    */
   React.useEffect(() => {
-    let firstObserver;
-    let lastObserver;
     const tabListChildren = Array.from(tabListRef.current.children);
     const length = tabListChildren.length;
-    const firstTab = tabListChildren[0];
-    const lastTab = tabListChildren[length - 1];
-    const threshold = 0.99;
-    const observerOptions = {
-      root: tabsRef.current,
-      threshold,
-    };
-
-    const handleScrollButtonStart = (entries) => {
-      let display = false;
-      entries.forEach(({ isIntersecting }) => {
-        display = !isIntersecting;
-      });
-      setDisplayStartScroll(display);
-    };
-
-    const handleScrollButtonEnd = (entries) => {
-      let display = false;
-      entries.forEach(({ isIntersecting }) => {
-        display = !isIntersecting;
-      });
-      setDisplayEndScroll(display);
-    };
 
     if (
       typeof IntersectionObserver !== 'undefined' &&
       length > 0 &&
       scrollable &&
       scrollButtons !== false
     ) {
-      firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
+      const firstTab = tabListChildren[0];
+      const lastTab = tabListChildren[length - 1];
+      const observerOptions = {
+        root: tabsRef.current,
+        threshold: 0.99,
+      };
+
+      const handleScrollButtonStart = (entries) => {
+        setDisplayStartScroll(!entries[0].isIntersecting);
+      };
+      const firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);
       firstObserver.observe(firstTab);
 
-      if (length > 1) {
-        lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
-        lastObserver.observe(lastTab);
-      }
+      const handleScrollButtonEnd = (entries) => {
+        setDisplayEndScroll(!entries[0].isIntersecting);
+      };
+      const lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);
+      lastObserver.observe(lastTab);
+
+      return () => {
+        firstObserver.disconnect();
+        lastObserver.disconnect();
+      };
     }
 
-    return () => {
-      firstObserver?.disconnect();
-      lastObserver?.disconnect();
-    };
+    return undefined;
   }, [scrollable, scrollButtons, updateScrollObserver, childrenProp?.length]);
 
   React.useEffect(() => {