121 lines
3.2 KiB
JavaScript
121 lines
3.2 KiB
JavaScript
import { makeStyles, ClickAwayListener } from '@mui/material'
|
|
import * as R from 'ramda'
|
|
import React, { useState, memo } from 'react'
|
|
import Popper from 'src/components/Popper'
|
|
import HelpIcon from 'src/styling/icons/action/help/zodiac.svg?react'
|
|
|
|
const useStyles = makeStyles({
|
|
transparentButton: {
|
|
border: 'none',
|
|
backgroundColor: 'transparent',
|
|
outline: 'none',
|
|
cursor: 'pointer',
|
|
marginTop: 4
|
|
},
|
|
relativelyPositioned: {
|
|
position: 'relative'
|
|
},
|
|
safeSpace: {
|
|
position: 'absolute',
|
|
backgroundColor: '#0000',
|
|
height: 40,
|
|
left: '-50%',
|
|
width: '200%'
|
|
},
|
|
popoverContent: ({ width }) => ({
|
|
width,
|
|
padding: [[10, 15]]
|
|
})
|
|
})
|
|
|
|
const usePopperHandler = width => {
|
|
const classes = useStyles({ width })
|
|
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 {
|
|
classes,
|
|
helpPopperAnchorEl,
|
|
helpPopperOpen,
|
|
handleOpenHelpPopper,
|
|
openHelpPopper,
|
|
handleCloseHelpPopper
|
|
}
|
|
}
|
|
|
|
const HelpTooltip = memo(({ children, width }) => {
|
|
const handler = usePopperHandler(width)
|
|
|
|
return (
|
|
<ClickAwayListener onClickAway={handler.handleCloseHelpPopper}>
|
|
<div
|
|
className={handler.classes.relativelyPositioned}
|
|
onMouseLeave={handler.handleCloseHelpPopper}>
|
|
{handler.helpPopperOpen && (
|
|
<div className={handler.classes.safeSpace}></div>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className={handler.classes.transparentButton}
|
|
onMouseEnter={handler.openHelpPopper}>
|
|
<HelpIcon />
|
|
</button>
|
|
<Popper
|
|
open={handler.helpPopperOpen}
|
|
anchorEl={handler.helpPopperAnchorEl}
|
|
arrowEnabled={true}
|
|
placement="bottom">
|
|
<div className={handler.classes.popoverContent}>{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={handler.classes.transparentButton}>
|
|
<HelpIcon />
|
|
</button>
|
|
)}
|
|
<Popper
|
|
open={handler.helpPopperOpen}
|
|
anchorEl={handler.helpPopperAnchorEl}
|
|
placement="bottom">
|
|
<div className={handler.classes.popoverContent}>{children}</div>
|
|
</Popper>
|
|
</div>
|
|
</ClickAwayListener>
|
|
)
|
|
})
|
|
|
|
export { HoverableTooltip, HelpTooltip }
|