97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
import ClickAwayListener from '@mui/material/ClickAwayListener'
|
|
import * as R from 'ramda'
|
|
import React, { useState, memo } from 'react'
|
|
import Popper from './Popper'
|
|
import HelpIcon from '../styling/icons/action/help/zodiac.svg?react'
|
|
|
|
const usePopperHandler = () => {
|
|
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
|
|
|
|
const handleOpenHelpPopper = event => {
|
|
setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)
|
|
}
|
|
|
|
const openHelpPopper = event => {
|
|
setHelpPopperAnchorEl(event.currentTarget)
|
|
}
|
|
|
|
const handleCloseHelpPopper = () => {
|
|
setHelpPopperAnchorEl(null)
|
|
}
|
|
|
|
const helpPopperOpen = Boolean(helpPopperAnchorEl)
|
|
|
|
return {
|
|
helpPopperAnchorEl,
|
|
helpPopperOpen,
|
|
handleOpenHelpPopper,
|
|
openHelpPopper,
|
|
handleCloseHelpPopper,
|
|
}
|
|
}
|
|
|
|
const HelpTooltip = memo(({ children, width }) => {
|
|
const handler = usePopperHandler(width)
|
|
|
|
return (
|
|
<ClickAwayListener onClickAway={handler.handleCloseHelpPopper}>
|
|
<div className="relative" onMouseLeave={handler.handleCloseHelpPopper}>
|
|
{handler.helpPopperOpen && (
|
|
<div className="absolute bg-transparent h-10 -left-1/2 w-[200%]"></div>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className="flex justify-center align-center border-0 bg-transparent outline-0 cursor-pointer px-1"
|
|
onMouseEnter={handler.openHelpPopper}>
|
|
<HelpIcon />
|
|
</button>
|
|
<Popper
|
|
open={handler.helpPopperOpen}
|
|
anchorEl={handler.helpPopperAnchorEl}
|
|
arrowEnabled={true}
|
|
placement="bottom">
|
|
<div className="py-2 px-4" style={{ width }}>
|
|
{children}
|
|
</div>
|
|
</Popper>
|
|
</div>
|
|
</ClickAwayListener>
|
|
)
|
|
})
|
|
|
|
const HoverableTooltip = memo(({ parentElements, children, width }) => {
|
|
const handler = usePopperHandler(width)
|
|
|
|
return (
|
|
<ClickAwayListener onClickAway={handler.handleCloseHelpPopper}>
|
|
<div>
|
|
{!R.isNil(parentElements) && (
|
|
<div
|
|
onMouseLeave={handler.handleCloseHelpPopper}
|
|
onMouseEnter={handler.handleOpenHelpPopper}>
|
|
{parentElements}
|
|
</div>
|
|
)}
|
|
{R.isNil(parentElements) && (
|
|
<button
|
|
type="button"
|
|
onMouseEnter={handler.handleOpenHelpPopper}
|
|
onMouseLeave={handler.handleCloseHelpPopper}
|
|
className="border-0 bg-transparent outline-0 cursor-pointer mt-1">
|
|
<HelpIcon />
|
|
</button>
|
|
)}
|
|
<Popper
|
|
open={handler.helpPopperOpen}
|
|
anchorEl={handler.helpPopperAnchorEl}
|
|
placement="bottom">
|
|
<div className="py-2 px-4" style={{ width }}>
|
|
{children}
|
|
</div>
|
|
</Popper>
|
|
</div>
|
|
</ClickAwayListener>
|
|
)
|
|
})
|
|
|
|
export { HoverableTooltip, HelpTooltip }
|