Receive columnSpan prop for MasonryItem and use ResizeObserver

mui · Jul 27, 2021 · d32d3d5 · d32d3d5
1 parent 19fa135
commit d32d3d5
Show file tree

Hide file tree

Showing 22 changed files with 539 additions and 193 deletions.
diff --git a/docs/pages/api-docs/masonry-item.json b/docs/pages/api-docs/masonry-item.json
@@ -2,6 +2,7 @@
   "props": {
     "children": { "type": { "name": "element" }, "required": true },
     "classes": { "type": { "name": "object" } },
+    "columnSpan": { "type": { "name": "number" }, "default": "1" },
     "component": { "type": { "name": "elementType" } },
     "sx": { "type": { "name": "object" } }
   },

diff --git a/docs/pages/api-docs/masonry.json b/docs/pages/api-docs/masonry.json
@@ -2,7 +2,7 @@
   "props": {
     "children": { "type": { "name": "node" }, "required": true },
     "classes": { "type": { "name": "object" } },
-    "cols": {
+    "columns": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"

diff --git a/docs/src/pages/components/masonry/BasicMasonry.js b/docs/src/pages/components/masonry/BasicMasonry.js
@@ -6,9 +6,9 @@ import MasonryItem from '@material-ui/lab/MasonryItem';
 
 export default function BasicMasonry() {
   return (
-    <Masonry cols={4} spacing={1}>
-      {heights.map((height, idx) => (
-        <MasonryItem key={idx}>
+    <Masonry columns={4} spacing={1}>
+      {heights.map((height, index) => (
+        <MasonryItem key={index}>
           <Box
             sx={{
               textAlign: 'center',
@@ -17,7 +17,7 @@ export default function BasicMasonry() {
               bgcolor: 'background.paper',
             }}
           >
-            {idx + 1}
+            {index + 1}
           </Box>
         </MasonryItem>
       ))}

diff --git a/docs/src/pages/components/masonry/BasicMasonry.tsx b/docs/src/pages/components/masonry/BasicMasonry.tsx
@@ -4,11 +4,11 @@ import Box from '@material-ui/core/Box';
 import Masonry from '@material-ui/lab/Masonry';
 import MasonryItem from '@material-ui/lab/MasonryItem';
 
-export default function BasicMasonry(): JSX.Element {
+export default function BasicMasonry() {
   return (
-    <Masonry cols={4} spacing={1}>
-      {heights.map((height, idx) => (
-        <MasonryItem key={idx}>
+    <Masonry columns={4} spacing={1}>
+      {heights.map((height, index) => (
+        <MasonryItem key={index}>
           <Box
             sx={{
               textAlign: 'center',
@@ -17,7 +17,7 @@ export default function BasicMasonry(): JSX.Element {
               bgcolor: 'background.paper',
             }}
           >
-            {idx + 1}
+            {index + 1}
           </Box>
         </MasonryItem>
       ))}

diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonry.js b/docs/src/pages/components/masonry/DiffColSizeMasonry.js
@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Masonry from '@material-ui/lab/Masonry';
+import MasonryItem from '@material-ui/lab/MasonryItem';
+
+export default function DiffColSizeMasonry() {
+  return (
+    <Masonry columns={4} spacing={1}>
+      {itemData.map((item, index) => (
+        <MasonryItem key={index} columnSpan={item.span}>
+          <Box
+            sx={{
+              textAlign: 'center',
+              height: item.height,
+              border: 1,
+              bgcolor: 'background.paper',
+            }}
+          >
+            {index + 1}
+          </Box>
+        </MasonryItem>
+      ))}
+    </Masonry>
+  );
+}
+
+const itemData = [
+  { height: 150, span: 1 },
+  { height: 30, span: 1 },
+  { height: 90, span: 2 },
+  { height: 110, span: 1 },
+  { height: 150, span: 1 },
+  { height: 150, span: 1 },
+  { height: 130, span: 2 },
+  { height: 80, span: 2 },
+  { height: 50, span: 1 },
+  { height: 90, span: 1 },
+  { height: 100, span: 2 },
+  { height: 150, span: 1 },
+  { height: 50, span: 1 },
+  { height: 50, span: 2 },
+  { height: 50, span: 1 },
+];
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx b/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Masonry from '@material-ui/lab/Masonry';
+import MasonryItem from '@material-ui/lab/MasonryItem';
+
+export default function DiffColSizeMasonry() {
+  return (
+    <Masonry columns={4} spacing={1}>
+      {itemData.map((item, index) => (
+        <MasonryItem key={index} columnSpan={item.span}>
+          <Box
+            sx={{
+              textAlign: 'center',
+              height: item.height,
+              border: 1,
+              bgcolor: 'background.paper',
+            }}
+          >
+            {index + 1}
+          </Box>
+        </MasonryItem>
+      ))}
+    </Masonry>
+  );
+}
+
+const itemData = [
+  { height: 150, span: 1 },
+  { height: 30, span: 1 },
+  { height: 90, span: 2 },
+  { height: 110, span: 1 },
+  { height: 150, span: 1 },
+  { height: 150, span: 1 },
+  { height: 130, span: 2 },
+  { height: 80, span: 2 },
+  { height: 50, span: 1 },
+  { height: 90, span: 1 },
+  { height: 100, span: 2 },
+  { height: 150, span: 1 },
+  { height: 50, span: 1 },
+  { height: 50, span: 2 },
+  { height: 50, span: 1 },
+];
diff --git a/docs/src/pages/components/masonry/ImageMasonry.js b/docs/src/pages/components/masonry/ImageMasonry.js
@@ -6,98 +6,103 @@ import MasonryItem from '@material-ui/lab/MasonryItem';
 export default function ImageMasonry() {
   return (
     <Masonry
-      cols={{ xs: 3, sm: 5, md: 7 }}
+      columns={{ xs: 3, sm: 5, md: 7 }}
       spacing={{ xs: 1, sm: 2, md: 3 }}
       sx={{ height: 300 }}
     >
-      {imgData.map((item, idx) => (
-        <MasonryItem key={idx}>
-          <img alt={item.title} src={item.img} />
+      {itemData.map((item) => (
+        <MasonryItem key={item.img}>
+          <img
+            srcSet={`${item.img}?fit=crop&auto=format 1x,
+                ${item.img}?fit=crop&auto=format&dpr=2 2x`}
+            alt={item.title}
+            loading="lazy"
+          />
         </MasonryItem>
       ))}
     </Masonry>
   );
 }
 
-const imgData = [
+const itemData = [
   {
-    img: 'https://images.unsplash.com/photo-1529655683826-aba9b3e77383?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bG9uZG9ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80',
-    title: '1',
+    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
+    title: 'Fern',
   },
   {
-    img: 'https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-    title: '2',
+    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
+    title: 'Mushrooms',
   },
   {
-    img: 'https://www.nature.com/immersive/d41586-021-00095-y/assets/3TP4N718ac/2021-01-xx_jan-iom_tree-of-life_sh-1080x1440.jpeg',
-    title: '3',
+    img: 'https://images.unsplash.com/photo-1529655683826-aba9b3e77383?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bG9uZG9ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80',
+    title: 'Tower',
   },
   {
-    img: 'https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg',
-    title: '4',
+    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
+    title: 'Sea star',
   },
   {
-    img: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
-    title: '5',
-  },
-  {
-    img: 'https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-    title: '6',
+    img: 'https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
+    title: 'Bridge',
   },
   {
-    img: 'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__340.jpg',
-    title: '7',
+    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
+    title: 'Honey',
   },
   {
-    img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg',
-    title: '8',
+    img: 'https://www.nature.com/immersive/d41586-021-00095-y/assets/3TP4N718ac/2021-01-xx_jan-iom_tree-of-life_sh-1080x1440.jpeg',
+    title: 'Lake',
   },
   {
-    img: 'https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270',
-    title: '9',
+    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
+    title: 'Basketball',
   },
   {
     img: 'https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg',
-    title: '10',
+    title: 'Birds',
   },
   {
-    img: 'https://images.unsplash.com/photo-1529655683826-aba9b3e77383?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bG9uZG9ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80',
-    title: '11',
+    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
+    title: 'Breakfast',
   },
   {
-    img: 'https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-    title: '12',
+    img: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
+    title: 'Sunset',
   },
   {
-    img: 'https://www.nature.com/immersive/d41586-021-00095-y/assets/3TP4N718ac/2021-01-xx_jan-iom_tree-of-life_sh-1080x1440.jpeg',
-    title: '13',
+    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
+    title: 'Burger',
   },
   {
-    img: 'https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg',
-    title: '14',
+    img: 'https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
+    title: 'Picture',
   },
   {
-    img: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
-    title: '15',
+    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
+    title: 'Camera',
   },
   {
-    img: 'https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-    title: '16',
+    img: 'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__340.jpg',
+    title: 'Landscape',
   },
   {
-    img: 'https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__340.jpg',
-    title: '17',
+    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
+    title: 'Coffee',
   },
   {
     img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg',
-    title: '18',
+    title: 'Flower',
   },
   {
-    img: 'https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270',
-    title: '19',
+    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
+    title: 'Hats',
   },
   {
-    img: 'https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg',
-    title: '20',
+    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
+    title: 'Tomato basil',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
+    title: 'Bike',
   },
 ];