Extract SizedContainer helper component
This commit is contained in:
parent
794fffec6a
commit
173d2304ea
|
@ -1,5 +1,3 @@
|
|||
import React, { useEffect, useRef, useState } from 'react'
|
||||
|
||||
import { tradingAllowed } from 'web/lib/firebase/contracts'
|
||||
import { Col } from '../layout/col'
|
||||
import { ContractChart } from 'web/components/charts/contract'
|
||||
|
@ -24,6 +22,7 @@ import {
|
|||
BinaryContract,
|
||||
} from 'common/contract'
|
||||
import { ContractDetails } from './contract-details'
|
||||
import { SizedContainer } from 'web/components/sized-container'
|
||||
|
||||
const OverviewQuestion = (props: { text: string }) => (
|
||||
<Linkify className="text-lg text-indigo-700 sm:text-2xl" text={props.text} />
|
||||
|
@ -49,32 +48,18 @@ const SizedContractChart = (props: {
|
|||
fullHeight: number
|
||||
mobileHeight: number
|
||||
}) => {
|
||||
const { contract, bets, fullHeight, mobileHeight } = props
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const [chartWidth, setChartWidth] = useState<number>()
|
||||
const [chartHeight, setChartHeight] = useState<number>()
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setChartHeight(window.innerWidth < 800 ? mobileHeight : fullHeight)
|
||||
setChartWidth(containerRef.current?.clientWidth)
|
||||
}
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
}
|
||||
}, [fullHeight, mobileHeight])
|
||||
const { fullHeight, mobileHeight, contract, bets } = props
|
||||
return (
|
||||
<div ref={containerRef}>
|
||||
{chartWidth != null && chartHeight != null && (
|
||||
<SizedContainer fullHeight={fullHeight} mobileHeight={mobileHeight}>
|
||||
{(width, height) => (
|
||||
<ContractChart
|
||||
width={width}
|
||||
height={height}
|
||||
contract={contract}
|
||||
bets={bets}
|
||||
width={chartWidth}
|
||||
height={chartHeight}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</SizedContainer>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -114,7 +99,11 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
|
|||
<ContractDetails contract={contract} />
|
||||
<Row className="justify-between gap-4">
|
||||
<OverviewQuestion text={contract.question} />
|
||||
<BinaryResolutionOrChance contract={contract} large />
|
||||
<BinaryResolutionOrChance
|
||||
className="flex items-end"
|
||||
contract={contract}
|
||||
large
|
||||
/>
|
||||
</Row>
|
||||
</Col>
|
||||
<SizedContractChart
|
||||
|
|
35
web/components/sized-container.tsx
Normal file
35
web/components/sized-container.tsx
Normal file
|
@ -0,0 +1,35 @@
|
|||
import { ReactNode, useEffect, useRef, useState } from 'react'
|
||||
|
||||
export const SizedContainer = (props: {
|
||||
fullHeight: number
|
||||
mobileHeight: number
|
||||
mobileThreshold?: number
|
||||
children: (width: number, height: number) => ReactNode
|
||||
}) => {
|
||||
const { children, fullHeight, mobileHeight } = props
|
||||
const threshold = props.mobileThreshold ?? 800
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const [width, setWidth] = useState<number>()
|
||||
const [height, setHeight] = useState<number>()
|
||||
useEffect(() => {
|
||||
if (containerRef.current) {
|
||||
const handleResize = () => {
|
||||
setHeight(window.innerWidth <= threshold ? mobileHeight : fullHeight)
|
||||
setWidth(containerRef.current?.clientWidth)
|
||||
}
|
||||
handleResize()
|
||||
const resizeObserver = new ResizeObserver(handleResize)
|
||||
resizeObserver.observe(containerRef.current)
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
resizeObserver.disconnect()
|
||||
}
|
||||
}
|
||||
}, [threshold, fullHeight, mobileHeight])
|
||||
return (
|
||||
<div ref={containerRef}>
|
||||
{width != null && height != null && children(width, height)}
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user