51c843d765
* Revert "Revert "Tile contract cards in masonry layout (#761)""
This reverts commit 62728e52b7.
* Sort the contracts in the correct masonry order
* Fix ordering on single columns
* Use react-masonry-css to accomplish masonry view
* Improve comment
* Remove gridClassName
Everything is spaced with m-4, too bad
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { Editor } from '@tiptap/react'
|
|
import { Contract } from 'common/contract'
|
|
import { useState } from 'react'
|
|
import { Button } from '../button'
|
|
import { ContractSearch } from '../contract-search'
|
|
import { Col } from '../layout/col'
|
|
import { Modal } from '../layout/modal'
|
|
import { Row } from '../layout/row'
|
|
import { LoadingIndicator } from '../loading-indicator'
|
|
import { embedCode } from '../share-embed-button'
|
|
import { insertContent } from './utils'
|
|
|
|
export function MarketModal(props: {
|
|
editor: Editor | null
|
|
open: boolean
|
|
setOpen: (open: boolean) => void
|
|
}) {
|
|
const { editor, open, setOpen } = props
|
|
|
|
const [contracts, setContracts] = useState<Contract[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
async function addContract(contract: Contract) {
|
|
if (contracts.map((c) => c.id).includes(contract.id)) {
|
|
setContracts(contracts.filter((c) => c.id !== contract.id))
|
|
} else setContracts([...contracts, contract])
|
|
}
|
|
|
|
async function doneAddingContracts() {
|
|
setLoading(true)
|
|
insertContent(editor, ...contracts.map(embedCode))
|
|
setLoading(false)
|
|
setOpen(false)
|
|
setContracts([])
|
|
}
|
|
|
|
return (
|
|
<Modal open={open} setOpen={setOpen} className={'sm:p-0'} size={'lg'}>
|
|
<Col className="h-[85vh] w-full gap-4 rounded-md bg-white">
|
|
<Row className="p-8 pb-0">
|
|
<div className={'text-xl text-indigo-700'}>Embed a market</div>
|
|
|
|
{!loading && (
|
|
<Row className="grow justify-end gap-4">
|
|
{contracts.length > 0 && (
|
|
<Button onClick={doneAddingContracts} color={'indigo'}>
|
|
Embed {contracts.length} question
|
|
{contracts.length > 1 && 's'}
|
|
</Button>
|
|
)}
|
|
<Button onClick={() => setContracts([])} color="gray">
|
|
Cancel
|
|
</Button>
|
|
</Row>
|
|
)}
|
|
</Row>
|
|
|
|
{loading && (
|
|
<div className="w-full justify-center">
|
|
<LoadingIndicator />
|
|
</div>
|
|
)}
|
|
|
|
<div className="overflow-y-scroll sm:px-8">
|
|
<ContractSearch
|
|
hideOrderSelector
|
|
onContractClick={addContract}
|
|
cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
|
|
highlightOptions={{
|
|
contractIds: contracts.map((c) => c.id),
|
|
highlightClassName:
|
|
'!bg-indigo-100 outline outline-2 outline-indigo-300',
|
|
}}
|
|
additionalFilter={{}} /* hide pills */
|
|
headerClassName="bg-white"
|
|
/>
|
|
</div>
|
|
</Col>
|
|
</Modal>
|
|
)
|
|
}
|