Use resize observer hook in Tabs component

mui · Aug 16, 2021 · 3f49153 · 3f49153
1 parent 38dafe7
commit 3f49153
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 deletions.
diff --git a/packages/material-ui-unstyled/src/utils/useResizeObserver.ts b/packages/material-ui-unstyled/src/utils/useResizeObserver.ts
@@ -5,18 +5,38 @@ interface Rect {
   height: number;
 }
 
-export default function useResizeObserver(): [Rect | null, (elem: Element) => () => void] {
-  const [rect, setRect] = React.useState<Rect | null>(null);
-  const ref = React.useCallback((elem: Element) => {
-    if (!elem) return () => {};
-    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-      const target = entries[0];
-      setRect(target.contentRect);
+export default function useResizeObserver(
+  resizeItemRef: React.RefObject<Element | null>,
+  resizeHandler?: () => void,
+  observeChildren?: boolean,
+): Rect[] | null {
+  const [items, setItems] = React.useState<Rect[] | null>(null);
+  const resizeObserverRef = React.useRef<ResizeObserver | null>(null);
+  const resizeHandlerRef = React.useRef<() => void>();
+  resizeHandlerRef.current = resizeHandler;
+
+  React.useEffect(() => {
+    resizeObserverRef.current = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      setItems(entries.map((entry) => entry.contentRect));
+      if (resizeHandlerRef.current) {
+        resizeHandlerRef.current();
+      }
     });
-    observer.observe(elem);
+    if (resizeItemRef.current) {
+      if (observeChildren) {
+        Array.from(resizeItemRef.current.children).forEach((child) => {
+          resizeObserverRef.current?.observe(child);
+        });
+      } else {
+        resizeObserverRef.current?.observe(resizeItemRef.current);
+      }
+    }
+
     return () => {
-      observer.unobserve(elem);
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+      }
     };
-  }, []);
-  return [rect, ref];
+  }, [resizeItemRef, observeChildren]);
+  return items;
 }
diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
@@ -3,12 +3,14 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { refType } from '@material-ui/utils';
-import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import {
+  unstable_composeClasses as composeClasses,
+  unstable_useResizeObserver as useResizeObserver,
+} from '@material-ui/unstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
 import debounce from '../utils/debounce';
-import ownerWindow from '../utils/ownerWindow';
 import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
 import animate from '../internal/animate';
 import ScrollbarSize from './ScrollbarSize';
@@ -554,19 +556,12 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
     }
   });
 
-  React.useEffect(() => {
-    const handleResize = debounce(() => {
-      updateIndicatorState();
-      updateScrollButtonState();
-    });
+  const handleResize = debounce(() => {
+    updateIndicatorState();
+    updateScrollButtonState();
+  });
 
-    const win = ownerWindow(tabsRef.current);
-    win.addEventListener('resize', handleResize);
-    return () => {
-      handleResize.clear();
-      win.removeEventListener('resize', handleResize);
-    };
-  }, [updateIndicatorState, updateScrollButtonState]);
+  useResizeObserver(tabListRef, handleResize, true);
 
   const handleTabsScroll = React.useMemo(
     () =>
@@ -619,6 +614,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
 
   let childIndex = 0;
   const children = React.Children.map(childrenProp, (child) => {
+
     if (!React.isValidElement(child)) {
       return null;
     }