Properly use ResizeObserver and remove other event listeners

mui · Jul 28, 2021 · 7a4ddbd · 7a4ddbd
1 parent cec63ac
commit 7a4ddbd
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 43 deletions.
diff --git a/docs/src/pages/components/masonry/ImageMasonry.js b/docs/src/pages/components/masonry/ImageMasonry.js
@@ -6,15 +6,15 @@ import MasonryItem from '@material-ui/lab/MasonryItem';
 export default function ImageMasonry() {
   return (
     <Masonry
-      columns={{ xs: 3, sm: 5 }}
+      columns={{ xs: 3, sm: 4 }}
       spacing={{ xs: 1, sm: 1.5 }}
       sx={{ height: 300 }}
     >
       {itemData.map((item) => (
         <MasonryItem key={item.img}>
           <img
-            srcSet={`${item.img}?w=164&h=164&auto=format 1x,
-            ${item.img}?w=164&h=164&auto=format&dpr=2 2x`}
+            srcSet={`${item.img}?w=220&auto=format 1x,
+            ${item.img}?w=220&auto=format&dpr=2 2x`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/docs/src/pages/components/masonry/ImageMasonry.tsx b/docs/src/pages/components/masonry/ImageMasonry.tsx
@@ -6,15 +6,15 @@ import MasonryItem from '@material-ui/lab/MasonryItem';
 export default function ImageMasonry() {
   return (
     <Masonry
-      columns={{ xs: 3, sm: 5 }}
+      columns={{ xs: 3, sm: 4 }}
       spacing={{ xs: 1, sm: 1.5 }}
       sx={{ height: 300 }}
     >
       {itemData.map((item) => (
         <MasonryItem key={item.img}>
           <img
-            srcSet={`${item.img}?w=164&h=164&auto=format 1x,
-            ${item.img}?w=164&h=164&auto=format&dpr=2 2x`}
+            srcSet={`${item.img}?w=220&auto=format 1x,
+            ${item.img}?w=220&auto=format&dpr=2 2x`}
             alt={item.title}
             loading="lazy"
           />

diff --git a/packages/material-ui-lab/src/Masonry/Masonry.js b/packages/material-ui-lab/src/Masonry/Masonry.js
@@ -82,19 +82,8 @@ const Masonry = React.forwardRef(function Masonry(inProps, ref) {
   const { children, className, component = 'div', columns = 4, spacing = 1, ...other } = props;
   const styleProps = { ...props, spacing, columns };
   const classes = useUtilityClasses(styleProps);
-  const [documentReady, setDocumentReady] = React.useState(false);
-  const handleStateChange = () => {
-    if (document.readyState === 'complete') {
-      setDocumentReady(true);
-    }
-  };
-  React.useEffect(() => {
-    document.addEventListener('readystatechange', handleStateChange);
-    return () => {
-      document.removeEventListener('readystatechange', handleStateChange);
-    };
-  });
-  const masonry = React.useMemo(() => ({ spacing, documentReady }), [spacing, documentReady]);
+
+  const masonry = React.useMemo(() => ({ spacing }), [spacing]);
 
   return (
     <MasonryContext.Provider value={masonry}>

diff --git a/packages/material-ui-lab/src/Masonry/index.js b/packages/material-ui-lab/src/Masonry/index.js
@@ -1,3 +1,4 @@
 export { default } from './Masonry';
+
 export * from './masonryClasses';
 export { default as masonryClasses } from './masonryClasses';
diff --git a/packages/material-ui-lab/src/MasonryItem/MasonryItem.js b/packages/material-ui-lab/src/MasonryItem/MasonryItem.js
@@ -27,7 +27,7 @@ const useUtilityClasses = (styleProps) => {
 export const style = ({ styleProps, theme }) => {
   let styles = {
     width: '100%',
-    [`& > *`]: {
+    '& > *': {
       // all contents should have a width of 100%
       width: '100%',
     },
@@ -72,7 +72,7 @@ const MasonryItem = React.forwardRef(function MasonryItem(inProps, ref) {
 
   const masonryItemRef = React.useRef(null);
 
-  const { spacing = 1, documentReady = false } = React.useContext(MasonryContext);
+  const { spacing = 1 } = React.useContext(MasonryContext);
   const {
     children,
     className,
@@ -90,41 +90,29 @@ const MasonryItem = React.forwardRef(function MasonryItem(inProps, ref) {
 
   const classes = useUtilityClasses(styleProps);
 
-  const computeHeight = () => {
-    if (masonryItemRef?.current) {
-      const child = masonryItemRef.current.firstChild;
-      setStyleProps({
-        ...styleProps,
-        height:
-          styleProps.height === undefined
-            ? child?.getBoundingClientRect().height
-            : styleProps.height,
-      });
-    }
-  };
-
   // If height is passed by user, ResizeObserver is not used.
   const resizeObserver = React.useRef(
-    height === undefined ? new ResizeObserver(computeHeight) : null,
+    height === undefined
+      ? new ResizeObserver(([item]) => {
+          setStyleProps({
+            ...styleProps,
+            height: item.contentRect.height,
+          });
+        })
+      : null,
   );
 
-  React.useEffect(() => {
-    if (documentReady) {
-      computeHeight();
-    }
-  }, [documentReady]); // eslint-disable-line
-
   React.useEffect(() => {
     if (resizeObserver?.current && masonryItemRef?.current) {
       const observer = resizeObserver.current;
-      const item = masonryItemRef.current;
+      const item = masonryItemRef.current.firstChild;
       observer.observe(item);
       return () => {
         observer.unobserve(item);
       };
     }
     return true;
-  }, [masonryItemRef]);
+  }, []);
 
   const handleRef = useForkRef(ref, masonryItemRef);
 

diff --git a/packages/material-ui-lab/src/MasonryItem/index.js b/packages/material-ui-lab/src/MasonryItem/index.js
@@ -1,3 +1,4 @@
 export { default } from './MasonryItem';
+
 export * from './masonryItemClasses';
 export { default as masonryItemClasses } from './masonryItemClasses';