-
Notifications
You must be signed in to change notification settings - Fork 337
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
Masonry: add experimental support for two-column items #2955
Changes from 29 commits
ad44bd5
147afce
8376d62
dcf0865
d2ad8e2
6cc22dd
ab4e5c4
aea4bcf
1ef3af9
9d35ad6
50d1f69
b9c4369
28f525e
8036604
be130d7
29c47f4
325b399
ce46866
90e4189
2f20988
9b9cd7b
edeadf7
a101d4e
cb05c60
cc3929f
72718d0
7f5ce86
98a8d81
2e1ea79
456853d
8d08231
03e802d
512087b
cf3ce21
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,30 +4,42 @@ import getRandomNumberGenerator from './getRandomNumberGenerator.js'; | |
|
||
type Args = {| | ||
baseHeight?: number, | ||
previousItemCount?: number, | ||
name?: string, | ||
randomNumberSeed?: number, | ||
numberOfItems?: number, | ||
previousItemCount?: number, | ||
randomNumberSeed?: number, | ||
twoColItems?: boolean, | ||
|}; | ||
|
||
type ExampleItem = {| | ||
name: string, | ||
height: number, | ||
color: string, | ||
columnSpan?: number, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is new, the rest is alphabetizing |
||
height: number, | ||
name: string, | ||
|}; | ||
|
||
export default function generateExampleItems({ | ||
baseHeight = 200, | ||
previousItemCount = 0, | ||
name = 'Pin', | ||
randomNumberSeed = 0, | ||
numberOfItems = 20, | ||
previousItemCount = 0, | ||
randomNumberSeed = 0, | ||
twoColItems, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is new, the rest is alphabetizing |
||
}: Args): $ReadOnlyArray<ExampleItem> { | ||
const getRandomNumber = getRandomNumberGenerator(randomNumberSeed); | ||
const twoColItemIndex = twoColItems ? Math.floor(Math.random() * numberOfItems) : undefined; | ||
|
||
return Array.from({ length: numberOfItems }).map((_, i) => ({ | ||
name: `${name} ${i + previousItemCount}`, | ||
height: baseHeight + previousItemCount + i, | ||
color: getRandomColor(getRandomNumber), | ||
})); | ||
return Array.from({ length: numberOfItems }).map((_, i) => { | ||
const pin = { | ||
name: `${name} ${i + previousItemCount}`, | ||
height: baseHeight + previousItemCount + i, | ||
color: getRandomColor(getRandomNumber), | ||
}; | ||
return Boolean(twoColItemIndex) && i === twoColItemIndex | ||
? { | ||
...pin, | ||
columnSpan: 2, | ||
} | ||
: pin; | ||
}); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,15 +3,17 @@ import getRandomColor from './getRandomColor.js'; | |
import getRandomNumberGenerator from './getRandomNumberGenerator.js'; | ||
|
||
type Args = {| | ||
previousItemCount?: number, | ||
name?: string, | ||
randomNumberSeed?: number, | ||
numberOfItems?: number, | ||
pinHeightsSample: $ReadOnlyArray<number>, | ||
previousItemCount?: number, | ||
randomNumberSeed?: number, | ||
twoColItems?: boolean, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is new, the rest is alphabetizing |
||
|}; | ||
|
||
type ExampleItem = {| | ||
color: string, | ||
columnSpan?: number, | ||
height: number, | ||
name: string, | ||
|}; | ||
|
@@ -21,20 +23,28 @@ type ExampleItem = {| | |
* This approach generates a finite set of pins with realistic heights — a fundamental shift from generating random pins on the fly. We have to take care to ensure that the same pins are generated on the server and the client. This is done by generating an array of random number seeds in `getServerSideProps` in docs/pages/integration-test/masonry.js, which are used to generate the pin heights. We then need to make sure we're pulling from these pin heights in a consistent way on the server and the client. This is where `randomNumberSeed` comes in: we pull the first `numberOfItems` heights from the array for SSR. For subsequent calls on the client, we use a random `randomNumberSeed` to pull random heights from the array. So SSR will always use the first `numberOfItems` heights, and we don't attempt to keep track of "where we are" in the heights array after that. | ||
*/ | ||
export default function generateRealisticExampleItems({ | ||
previousItemCount = 0, | ||
name = 'Pin', | ||
randomNumberSeed = 0, | ||
numberOfItems = 20, | ||
pinHeightsSample, | ||
previousItemCount = 0, | ||
randomNumberSeed = 0, | ||
twoColItems, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is new, the rest is alphabetizing |
||
}: Args): $ReadOnlyArray<ExampleItem> { | ||
const getRandomNumber = getRandomNumberGenerator(randomNumberSeed); | ||
const baseIndex = Math.ceil(randomNumberSeed * 10); | ||
const twoColItemIndex = twoColItems ? Math.floor(Math.random() * numberOfItems) : undefined; | ||
|
||
const pins = Array.from({ length: numberOfItems }).map((_, i) => ({ | ||
name: `${name} ${i + previousItemCount}`, | ||
height: pinHeightsSample[baseIndex + i], | ||
color: getRandomColor(getRandomNumber), | ||
})); | ||
|
||
return pins; | ||
return Array.from({ length: numberOfItems }).map((_, i) => { | ||
const pin = { | ||
name: `${name} ${i + previousItemCount}`, | ||
height: pinHeightsSample[baseIndex + i], | ||
color: getRandomColor(getRandomNumber), | ||
}; | ||
return Boolean(twoColItemIndex) && i === twoColItemIndex | ||
? { | ||
...pin, | ||
columnSpan: 2, | ||
} | ||
: pin; | ||
}); | ||
} |
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.
This is new, the rest is alphabetizing