stacker.news/components/hoverable-popover.js

42 lines
1.0 KiB
JavaScript

import { Popover } from 'react-bootstrap'
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import { useRef, useState } from 'react'
export default function HoverablePopover ({ trigger, body, onShow }) {
const [show, setShow] = useState(false)
const popRef = useRef(null)
const timeoutId = useRef(null)
const onToggle = show => {
clearTimeout(timeoutId.current)
if (show) {
onShow?.()
timeoutId.current = setTimeout(() => setShow(true), 500)
} else {
timeoutId.current = setTimeout(() => setShow(!!popRef.current?.matches(':hover')), 300)
}
}
return (
<OverlayTrigger
placement='bottom'
trigger={['hover', 'focus']}
show={show}
onToggle={onToggle}
transition
rootClose
overlay={
<Popover style={{ position: 'fixed' }} onPointerLeave={() => onToggle(false)}>
<Popover.Body ref={popRef}>
{body}
</Popover.Body>
</Popover>
}
>
<span>
{trigger}
</span>
</OverlayTrigger>
)
}