Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Masonry] Implement Masonry using Flexbox #28059

Merged
merged 33 commits into from
Oct 20, 2021
Merged

[Masonry] Implement Masonry using Flexbox #28059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
7d091bf
Implement Masonry using flexbox
hbjORbj Aug 30, 2021
c8b5cd9
Do not use hard-code classname and compute # of line breaks better
hbjORbj Aug 31, 2021
2ed96e4
Use childNodes rather than children to iterate
hbjORbj Aug 31, 2021
df8d388
Use data-attribute for line breaking elements
hbjORbj Aug 31, 2021
b6b9061
Remove MockResizeObserver
hbjORbj Sep 1, 2021
dec0326
Put the next masonry item to the shortest column
hbjORbj Sep 1, 2021
00fa2f2
Guard against non-element child
hbjORbj Sep 1, 2021
fd32fd5
Resolve some merge conflicts
hbjORbj Sep 1, 2021
ae550ab
Add negative margin to masonry based on spacing to offset unwanted gap
hbjORbj Sep 1, 2021
a297037
Add test
hbjORbj Sep 2, 2021
cfc99f2
Resolve remaining conflicts afte rebasing on master
hbjORbj Sep 27, 2021
7cf4574
Remove open/close tags for Masonry in docs
hbjORbj Sep 27, 2021
5d37a1e
Configure the exact width for each column
hbjORbj Sep 27, 2021
6db4b4f
Improve test
hbjORbj Sep 27, 2021
2317ceb
Handle array responsive prop values and string prop values
hbjORbj Sep 28, 2021
cb34546
Compute current number of columns more precisely
hbjORbj Sep 29, 2021
b9ae5b2
Do not use abbreviations for variables
hbjORbj Sep 30, 2021
ddf000e
Do not affect nested elements in css
hbjORbj Sep 30, 2021
760bd1b
Compute parent width only once
hbjORbj Sep 30, 2021
23f1377
Improve docs
hbjORbj Sep 30, 2021
3ea1440
[Masonry] Refactor/Improve code
hbjORbj Oct 13, 2021
6937124
[Masonry] Round up masonry container's height to prevent breakdown
Oct 13, 2021
a360f1b
[Masonry] Refactor and allow item with nested children render well
hbjORbj Oct 16, 2021
bf2c521
[Masonry] Improve image masonry demo
hbjORbj Oct 16, 2021
05c406c
[Masonry] Support server side rendering
hbjORbj Oct 17, 2021
976db5a
[Masonry] Add comments
hbjORbj Oct 18, 2021
b3242e6
[Masonry] Address code review comments
hbjORbj Oct 20, 2021
58332af
[Masonry] Add more comments
hbjORbj Oct 20, 2021
83ef6cd
[Masonry] Add more test
hbjORbj Oct 20, 2021
cd67243
[Masonry] Fix test
hbjORbj Oct 20, 2021
55affcb
[Masonry] Set width to 100%
hbjORbj Oct 20, 2021
8463cd2
[Masonry] Observe the first child of masonry rather than window
hbjORbj Oct 20, 2021
016703c
[Masonry] Fix build
hbjORbj Oct 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 0 additions & 23 deletions docs/pages/api-docs/masonry-item.js
View file
Open in desktop

This file was deleted.

18 changes: 0 additions & 18 deletions docs/pages/api-docs/masonry-item.json
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions docs/pages/api-docs/masonry.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 4 additions & 5 deletions docs/src/pages/components/masonry/BasicMasonry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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];

Expand All @@ -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>
Expand Down
9 changes: 4 additions & 5 deletions docs/src/pages/components/masonry/BasicMasonry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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];

Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/masonry/BasicMasonry.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
46 changes: 0 additions & 46 deletions docs/src/pages/components/masonry/DiffColSizeMasonry.js
View file
Open in desktop

This file was deleted.

46 changes: 0 additions & 46 deletions docs/src/pages/components/masonry/DiffColSizeMasonry.tsx
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions docs/src/pages/components/masonry/DiffColSizeMasonry.tsx.preview
View file
Open in desktop

This file was deleted.

46 changes: 0 additions & 46 deletions docs/src/pages/components/masonry/DiffColSizeMasonryBroken.js
View file
Open in desktop

This file was deleted.

46 changes: 0 additions & 46 deletions docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx.preview
View file
Open in desktop

This file was deleted.

9 changes: 4 additions & 5 deletions docs/src/pages/components/masonry/FixedColumns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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];

Expand All @@ -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>
Expand Down
9 changes: 4 additions & 5 deletions docs/src/pages/components/masonry/FixedColumns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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];

Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/masonry/FixedColumns.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading