feat: allow custom button for tooltip anchorEl

This commit is contained in:
Mauricio Navarro Miranda 2020-08-20 05:13:45 -05:00 committed by Josh Harvey
parent 41eaa99429
commit 79f10d032c

View file

@ -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>
) )
} }