Implement Masonry using flexbox

mui · Aug 30, 2021 · ab6c06e · ab6c06e
1 parent 7e7f40f
commit ab6c06e
Show file tree

Hide file tree

Showing 48 changed files with 261 additions and 1,081 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/src/pages/components/masonry/BasicMasonry.js b/docs/src/pages/components/masonry/BasicMasonry.js
@@ -1,27 +1,27 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import { styled } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
 import Masonry from '@material-ui/lab/Masonry';
-import MasonryItem from '@material-ui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
 export default function BasicMasonry() {
   return (
     <Box sx={{ width: 500, minHeight: 393 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
-          <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
-          </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,27 +1,27 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import { styled } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
 import Masonry from '@material-ui/lab/Masonry';
-import MasonryItem from '@material-ui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
 export default function BasicMasonry() {
   return (
     <Box sx={{ width: 500, minHeight: 393 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
-          <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
-          </MasonryItem>
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
         ))}
       </Masonry>
     </Box>

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/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/FixedColumns.js b/docs/src/pages/components/masonry/FixedColumns.js
@@ -1,27 +1,27 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import { styled } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
 import Masonry from '@material-ui/lab/Masonry';
-import MasonryItem from '@material-ui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
 export default function FixedColumns() {
   return (
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
-          <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
-          </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,27 +1,27 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import { styled } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
 import Masonry from '@material-ui/lab/Masonry';
-import MasonryItem from '@material-ui/lab/MasonryItem';
 
 const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
 
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
 export default function FixedColumns() {
   return (
     <Box sx={{ width: 500, minHeight: 253 }}>
       <Masonry columns={4} spacing={1}>
         {heights.map((height, index) => (
-          <MasonryItem key={index}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                height,
-                border: 1,
-                bgcolor: 'background.paper',
-              }}
-            >
-              {index + 1}
-            </Box>
-          </MasonryItem>
+          <Item key={index} sx={{ height }}>
+            {index + 1}
+          </Item>
         ))}
       </Masonry>
     </Box>