[Masonry] Implement Masonry using Flexbox (#28059)

mui · Oct 20, 2021 · 0ff9cb5 · 0ff9cb5
1 parent 6de6838
commit 0ff9cb5
Show file tree

Hide file tree

Showing 48 changed files with 573 additions and 885 deletions.
diff --git a/docs/pages/api-docs/masonry-item.js b/docs/pages/api-docs/masonry-item.js
diff --git a/docs/pages/api-docs/masonry-item.json b/docs/pages/api-docs/masonry-item.json
diff --git a/docs/pages/api-docs/masonry.json b/docs/pages/api-docs/masonry.json
@@ -10,6 +10,9 @@
       "default": "4"
     },
     "component": { "type": { "name": "elementType" } },
+    "defaultColumns": { "type": { "name": "number" } },
+    "defaultHeight": { "type": { "name": "number" } },
+    "defaultSpacing": { "type": { "name": "number" } },
     "spacing": {
       "type": {
         "name": "union",

diff --git a/docs/src/pages/components/masonry/BasicMasonry.js b/docs/src/pages/components/masonry/BasicMasonry.js
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
-import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
 
@@ -20,9 +19,9 @@ export default function BasicMasonry() {
     <Box sx={{ width: 500, minHeight: 393 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
-          <MasonryItem key={index}>
-            <Item sx={{ height }}>{index + 1}</Item>
-          </MasonryItem>
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
         ))}
       </Masonry>
     </Box>

diff --git a/docs/src/pages/components/masonry/BasicMasonry.tsx b/docs/src/pages/components/masonry/BasicMasonry.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
-import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
 
@@ -20,9 +19,9 @@ export default function BasicMasonry() {
     <Box sx={{ width: 500, minHeight: 393 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
-          <MasonryItem key={index}>
-            <Item sx={{ height }}>{index + 1}</Item>
-          </MasonryItem>
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
         ))}
       </Masonry>
     </Box>

diff --git a/docs/src/pages/components/masonry/BasicMasonry.tsx.preview b/docs/src/pages/components/masonry/BasicMasonry.tsx.preview
@@ -1,7 +1,7 @@
 <Masonry columns={4} spacing={1}>
   {heights.map((height, index) => (
-    <MasonryItem key={index}>
-      <Item sx={{ height }}>{index + 1}</Item>
-    </MasonryItem>
+    <Item key={index} sx={{ height }}>
+      {index + 1}
+    </Item>
   ))}
 </Masonry>
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonry.js b/docs/src/pages/components/masonry/DiffColSizeMasonry.js
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx b/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx.preview b/docs/src/pages/components/masonry/DiffColSizeMasonry.tsx.preview
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.js b/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.js
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx b/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx
diff --git a/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx.preview b/docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx.preview
diff --git a/docs/src/pages/components/masonry/FixedColumns.js b/docs/src/pages/components/masonry/FixedColumns.js
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
-import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
@@ -20,9 +19,9 @@ export default function FixedColumns() {
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
-          <MasonryItem key={index}>
-            <Item sx={{ height }}>{index + 1}</Item>
-          </MasonryItem>
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
         ))}
       </Masonry>
     </Box>

diff --git a/docs/src/pages/components/masonry/FixedColumns.tsx b/docs/src/pages/components/masonry/FixedColumns.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
 import Masonry from '@mui/lab/Masonry';
-import MasonryItem from '@mui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
@@ -20,9 +19,9 @@ export default function FixedColumns() {
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
-          <MasonryItem key={index}>
-            <Item sx={{ height }}>{index + 1}</Item>
-          </MasonryItem>
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
         ))}
       </Masonry>
     </Box>

diff --git a/docs/src/pages/components/masonry/FixedColumns.tsx.preview b/docs/src/pages/components/masonry/FixedColumns.tsx.preview
@@ -1,7 +1,7 @@
 <Masonry columns={4} spacing={1}>
   {heights.map((height, index) => (
-    <MasonryItem key={index}>
-      <Item sx={{ height }}>{index + 1}</Item>
-    </MasonryItem>
+    <Item key={index} sx={{ height }}>
+      {index + 1}
+    </Item>
   ))}
 </Masonry>