-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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.
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
[lab][Masonry] Ability to sort elements from left to right #39904
Conversation
Netlify deploy previewBundle size reportDetails of bundle changes (Toolpad) |
3bac794
to
7d06304
Compare
007c5cc
to
4b70da5
Compare
I'm stuck on the tests for this, if anyone has advice I'd appreciate it. For some reason, the computed style always has order as |
6ae3330
to
e03cb44
Compare
Hey @Rishi556! Thanks for working on this
I assume you mean |
Sorry about the delayed response, holidays and such(Happy New Years)! I do mean the order(guess I force pushed away my initial tests using order), but you can see it being set here:
and here
It basically seems to control which column the masonry element is in. The only test case that seems to use is it the server side rendering one: material-ui/packages/mui-lab/src/Masonry/Masonry.test.js Lines 267 to 270 in e03cb44
I'll look into seeing how to tell when elements are placed to grab the order and see if that helps the test case(do you have any examples of it from other tests), thanks! |
Happy New Year to you as well, @Rishi556! I wonder if this is a JSDOM limitation 🤔 have you tried running the tests with karma? To target the Masonry component specifically, you can modify your local karma.tests.js to: import '@mui-internal/test-utils/init';
import '@mui-internal/test-utils/setupKarma';
const labUnitContext = require.context(
'../packages/mui-lab/src/Masonry',
true,
/\.test\.(js|ts|tsx)$/,
);
labUnitContext.keys().forEach(labUnitContext); Otherwise |
Hey @DiegoAndai. I am running the tests via Karma. Here's an example of what i mean by the order: it('should place children in sequential order', function test() {
if (/jsdom/.test(window.navigator.userAgent)) {
// only run on browser
this.skip();
}
const { getByTestId } = render(
<Masonry columns={2} spacing={1} sequential>
<div style={{ height: `20px` }} data-testid="child1" />
<div style={{ height: `10px` }} data-testid="child2" />
<div style={{ height: `10px` }} data-testid="child3" />
</Masonry>,
);
const child1 = getByTestId('child1');
const child2 = getByTestId('child2');
const child3 = getByTestId('child3');
console.log(
'c1',
window.getComputedStyle(child1).order,
'c2',
window.getComputedStyle(child2).order,
'c3',
window.getComputedStyle(child3).order,
);
expect(window.getComputedStyle(child1).order).to.equal(`1`);
expect(window.getComputedStyle(child2).order).to.equal(`2`);
expect(window.getComputedStyle(child3).order).to.equal(`1`);
}); We'd expect the children's order to be 1,2, and 1 again(and can be verified in this code sandbox: https://codesandbox.io/p/sandbox/optimistic-voice-s2ghtq?file=%2Fsrc%2FDemo.tsx) But that's not what our test case outputs, instead it's all 0's. |
The Masonry doesn't place its elements on the initial render (see this issue). The way it works is that it renders the elements initially (with |
I attempted to use |
@Rishi556 I haven't used it, but maybe you could try the Testing Library's For both, you'll need to turn the test into an Let me know if that works out! 😊 |
It did, thanks! |
return; | ||
} | ||
useEnhancedEffect(() => { | ||
const handleResize = (masonryChildren) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it necessary to move handleResize
inside the effect? I would rather keep it out, if possible.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had to move it inside because of a eslint rule. I'll see if I can get it working without moving it in and not having to wrap handleResize
in a useCallback
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should be good now, let me know what you think.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @Rishi556. First of all, I'm sorry for the delay, it has been a busy week.
It looks good overall. My only question would be, is the useCallback
necessary? If it's necessary so the components reorders when the sequential
prop value changes, I think we could achieve the same by adding sequential
as a dependency to the useEnhancedEffect
that calls handleResize
. Or is it necessary for another reason?
I'm asking because I would like to add this functionality with as minimum change to the component as possible.
Thanks for the response, no worries on timing! I had initially just added sequential to the Adding (A lot of this stems from some of my inexperience with React, so I'm always eager to hear of ways to improve!) |
@Rishi556 This is weird; I tested, and I don't know why Anyway, I think your implementation is correct and seems to be working. I'll review again on Monday with a fresher brain to see if I can spot any potential regressions. If it all seems fine, then I think we could merge this 🙌🏼 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🎉
Thanks for the contribution
Resolves #36859. Allows sorting masonry from left to right with the
sequential
prop.