Use react-masonry-css to accomplish masonry view
This commit is contained in:
parent
dde1ed98dd
commit
0eeac27d3b
|
@ -39,6 +39,7 @@
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"mailgun-js": "0.22.0",
|
"mailgun-js": "0.22.0",
|
||||||
"module-alias": "2.2.2",
|
"module-alias": "2.2.2",
|
||||||
|
"react-masonry-css": "1.0.16",
|
||||||
"stripe": "8.194.0",
|
"stripe": "8.194.0",
|
||||||
"zod": "3.17.2"
|
"zod": "3.17.2"
|
||||||
},
|
},
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { useCallback } from 'react'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
import { LoadingIndicator } from '../loading-indicator'
|
import { LoadingIndicator } from '../loading-indicator'
|
||||||
import { VisibilityObserver } from '../visibility-observer'
|
import { VisibilityObserver } from '../visibility-observer'
|
||||||
|
import Masonry from 'react-masonry-css'
|
||||||
|
|
||||||
export type ContractHighlightOptions = {
|
export type ContractHighlightOptions = {
|
||||||
contractIds?: string[]
|
contractIds?: string[]
|
||||||
|
@ -61,50 +62,14 @@ export function ContractsGrid(props: {
|
||||||
</p>
|
</p>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
// Reorganize the contracts so that the masonry layout shows them in the original order
|
|
||||||
// E.g. from [0, 1, 2, 3] => [0, 2, 1, 3]
|
|
||||||
// E.g. from [0, 1, 2, 3, 4, 5, 6] => [0, 2, 4, 1, 3, 5, 6]
|
|
||||||
const halfway = Math.floor(contracts.length / 2)
|
|
||||||
function reorder(i: number) {
|
|
||||||
return i < halfway
|
|
||||||
? i * 2
|
|
||||||
: Math.min((i - halfway) * 2 + 1, (contracts?.length ?? 1) - 1)
|
|
||||||
}
|
|
||||||
const twoColContracts = Array.from(
|
|
||||||
{ length: contracts.length },
|
|
||||||
(_, i) => contracts[reorder(i)]
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Col className="gap-8">
|
<Col className="gap-8">
|
||||||
<div
|
<Masonry
|
||||||
className={clsx(
|
// Show only 1 column on tailwind md = 768px
|
||||||
'hidden w-full gap-4 space-y-4 md:block md:columns-2',
|
breakpointCols={{ default: 2, 768: 1 }}
|
||||||
gridClassName
|
className="-ml-4 flex w-auto"
|
||||||
)}
|
columnClassName="pl-4 bg-clip-padding"
|
||||||
>
|
|
||||||
{twoColContracts.map((contract) => (
|
|
||||||
<ContractCard
|
|
||||||
contract={contract}
|
|
||||||
key={contract.id}
|
|
||||||
showTime={showTime}
|
|
||||||
onClick={
|
|
||||||
onContractClick ? () => onContractClick(contract) : undefined
|
|
||||||
}
|
|
||||||
hideQuickBet={hideQuickBet}
|
|
||||||
hideGroupLink={hideGroupLink}
|
|
||||||
className={clsx(
|
|
||||||
'break-inside-avoid-column',
|
|
||||||
contractIds?.includes(contract.id) && highlightClassName
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={clsx(
|
|
||||||
'w-full columns-1 gap-4 space-y-4 md:hidden',
|
|
||||||
gridClassName
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
{contracts.map((contract) => (
|
{contracts.map((contract) => (
|
||||||
<ContractCard
|
<ContractCard
|
||||||
|
@ -117,12 +82,12 @@ export function ContractsGrid(props: {
|
||||||
hideQuickBet={hideQuickBet}
|
hideQuickBet={hideQuickBet}
|
||||||
hideGroupLink={hideGroupLink}
|
hideGroupLink={hideGroupLink}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'break-inside-avoid-column',
|
'mb-4 break-inside-avoid-column',
|
||||||
contractIds?.includes(contract.id) && highlightClassName
|
contractIds?.includes(contract.id) && highlightClassName
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</Masonry>
|
||||||
<VisibilityObserver
|
<VisibilityObserver
|
||||||
onVisibilityUpdated={onVisibilityUpdated}
|
onVisibilityUpdated={onVisibilityUpdated}
|
||||||
className="relative -top-96 h-1"
|
className="relative -top-96 h-1"
|
||||||
|
|
|
@ -9947,6 +9947,11 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.10.3"
|
"@babel/runtime" "^7.10.3"
|
||||||
|
|
||||||
|
react-masonry-css@1.0.16:
|
||||||
|
version "1.0.16"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-masonry-css/-/react-masonry-css-1.0.16.tgz#72b28b4ae3484e250534700860597553a10f1a2c"
|
||||||
|
integrity sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==
|
||||||
|
|
||||||
react-motion@^0.5.2:
|
react-motion@^0.5.2:
|
||||||
version "0.5.2"
|
version "0.5.2"
|
||||||
resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
|
resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user