fix user/item popover
This commit is contained in:
parent
53465e3f46
commit
ac87322ac8
|
@ -1,56 +1,40 @@
|
||||||
import { useRef, useState } from 'react'
|
|
||||||
import { Popover } from 'react-bootstrap'
|
import { Popover } from 'react-bootstrap'
|
||||||
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
|
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
|
||||||
import styles from './hoverable-popover.module.css'
|
import { useRef, useState } from 'react'
|
||||||
|
|
||||||
export default function HoverablePopover ({ id, trigger, body, onShow }) {
|
|
||||||
const [showOverlay, setShowOverlay] = useState(false)
|
|
||||||
|
|
||||||
|
export default function HoverablePopover ({ trigger, body, onShow }) {
|
||||||
|
const [show, setShow] = useState(false)
|
||||||
|
const popRef = useRef(null)
|
||||||
const timeoutId = useRef(null)
|
const timeoutId = useRef(null)
|
||||||
|
|
||||||
const handleMouseEnter = () => {
|
const onToggle = show => {
|
||||||
clearTimeout(timeoutId.current)
|
clearTimeout(timeoutId.current)
|
||||||
onShow && onShow()
|
if (show) {
|
||||||
timeoutId.current = setTimeout(() => {
|
onShow?.()
|
||||||
setShowOverlay(true)
|
timeoutId.current = setTimeout(() => setShow(true), 500)
|
||||||
}, 500)
|
} else {
|
||||||
|
timeoutId.current = setTimeout(() => setShow(!!popRef.current?.matches(':hover')), 500)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMouseLeave = () => {
|
|
||||||
clearTimeout(timeoutId.current)
|
|
||||||
timeoutId.current = setTimeout(() => setShowOverlay(false), 100)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<OverlayTrigger
|
<OverlayTrigger
|
||||||
show={showOverlay}
|
|
||||||
placement='bottom'
|
placement='bottom'
|
||||||
onHide={handleMouseLeave}
|
trigger={['hover', 'focus']}
|
||||||
popperConfig={{
|
show={show}
|
||||||
modifiers: {
|
onToggle={onToggle}
|
||||||
preventOverflow: {
|
delay={1}
|
||||||
enabled: false
|
transition={false}
|
||||||
}
|
rootClose
|
||||||
}
|
|
||||||
}}
|
|
||||||
overlay={
|
overlay={
|
||||||
<Popover
|
<Popover style={{ position: 'fixed' }} onPointerLeave={() => onToggle(false)}>
|
||||||
onPointerEnter={handleMouseEnter}
|
<Popover.Body ref={popRef}>
|
||||||
onPointerLeave={handleMouseLeave}
|
|
||||||
onMouseLeave={handleMouseLeave}
|
|
||||||
className={styles.HoverablePopover}
|
|
||||||
style={{ position: 'fixed' }}
|
|
||||||
>
|
|
||||||
<Popover.Body className={styles.HoverablePopover}>
|
|
||||||
{body}
|
{body}
|
||||||
</Popover.Body>
|
</Popover.Body>
|
||||||
</Popover>
|
</Popover>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<span
|
<span>
|
||||||
onPointerEnter={handleMouseEnter}
|
|
||||||
onPointerLeave={handleMouseLeave}
|
|
||||||
>
|
|
||||||
{trigger}
|
{trigger}
|
||||||
</span>
|
</span>
|
||||||
</OverlayTrigger>
|
</OverlayTrigger>
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
.hoverablePopover {
|
|
||||||
border: 1px solid var(--theme-toolbarActive)
|
|
||||||
}
|
|
||||||
|
|
||||||
.hoverablePopBody {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
Loading…
Reference in New Issue