feat: allow custom button for tooltip anchorEl
This commit is contained in:
parent
41eaa99429
commit
79f10d032c
1 changed files with 14 additions and 9 deletions
|
|
@ -1,8 +1,8 @@
|
||||||
import { makeStyles, ClickAwayListener } from '@material-ui/core'
|
import { makeStyles, ClickAwayListener } from '@material-ui/core'
|
||||||
import classnames from 'classnames'
|
|
||||||
import React, { useState, memo } from 'react'
|
import React, { useState, memo } from 'react'
|
||||||
|
|
||||||
import Popper from 'src/components/Popper'
|
import Popper from 'src/components/Popper'
|
||||||
|
import { FeatureButton } from 'src/components/buttons'
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles({
|
||||||
transparentButton: {
|
transparentButton: {
|
||||||
|
|
@ -25,6 +25,7 @@ const Tooltip = memo(
|
||||||
enableOver = false,
|
enableOver = false,
|
||||||
enableClick = false,
|
enableClick = false,
|
||||||
className,
|
className,
|
||||||
|
Button,
|
||||||
Icon,
|
Icon,
|
||||||
children,
|
children,
|
||||||
width,
|
width,
|
||||||
|
|
@ -45,13 +46,17 @@ const Tooltip = memo(
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ClickAwayListener onClickAway={handleCloseHelpPopper}>
|
<ClickAwayListener onClickAway={handleCloseHelpPopper}>
|
||||||
<button
|
<>
|
||||||
type={'button'}
|
<Button
|
||||||
className={classnames(className, classes.transparentButton)}
|
Icon={Button === FeatureButton && Icon}
|
||||||
|
className={className}
|
||||||
onPointerOver={event => enableOver && handleOpenHelpPopper(event)}
|
onPointerOver={event => enableOver && handleOpenHelpPopper(event)}
|
||||||
onClick={event => enableClick && handleOpenHelpPopper(event)}
|
onClick={event => enableClick && handleOpenHelpPopper(event)}
|
||||||
{...props}>
|
{...props}>
|
||||||
|
{Button !== FeatureButton && (
|
||||||
<Icon className={classes.preventDefaultTooltip}></Icon>
|
<Icon className={classes.preventDefaultTooltip}></Icon>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
<Popper
|
<Popper
|
||||||
open={helpPopperOpen}
|
open={helpPopperOpen}
|
||||||
anchorEl={helpPopperAnchorEl}
|
anchorEl={helpPopperAnchorEl}
|
||||||
|
|
@ -59,7 +64,7 @@ const Tooltip = memo(
|
||||||
onClose={handleCloseHelpPopper}>
|
onClose={handleCloseHelpPopper}>
|
||||||
<div className={classes.popoverContent}>{children}</div>
|
<div className={classes.popoverContent}>{children}</div>
|
||||||
</Popper>
|
</Popper>
|
||||||
</button>
|
</>
|
||||||
</ClickAwayListener>
|
</ClickAwayListener>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue