Masonry: Enable dynamic batches #3875
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
bryamrrr
commented
Nov 15, 2024
Comment on lines
+718
to
+720
| const gridSize = getColumnCount({ gutter, columnWidth, width, minCols, layout }); | ||
|
|
||
| const moduleSize = calculateActualColumnSpan({ |
There was a problem hiding this comment.
This was the tricky part of this implementation. These two values are easy to find in multiColumnLayout.ts, but are not ready at this scope.
- For grid size, I created a whole new util that abstract the way we calculate the column count from both
DefaultLayoutandFullWidthLayout(updating those utils to avoid code duplicity too). - For moduleSize, I exposed the
calculateActualColumnSpanfrommultiColumnLayout.tsto be able to use it here.
All of this happens also in MasonryV2.
✅ Deploy Preview for gestalt ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
bryamrrr
force-pushed
the
dynamic-batches
branch
from
dd610f7
to
d9e4c8f
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
What changed?
This PR introduces
_getModulePositioningConfig, an experimental prop to enable dynamic batch sizes (and Early bailout). This is a way to dynamically set the number of items used to position a multicolumn module._getModulePositioningConfiguses two params (gridSize and moduleSize) and uses them to return aModulePositioningConfig, which could have these values:Why?
This will allow us to reduce the whitespace from larger multicolumn modules.
Other changes:
GetColumnCountto move the logic to know how many columns a grid have in a single placeImages confirming we have the correct module and grid sizes.