Added Tooltip component to Button with tooltip prop

• Added:
- Tooltip component to Button with tooltip prop
This commit is contained in:
mgabdev 2020-09-07 11:20:04 -05:00
parent 3ef86098bf
commit 899fe425d4
2 changed files with 63 additions and 3 deletions

View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
import { NavLink } from 'react-router-dom'
import { CX } from '../constants'
import Icon from './icon'
import Tooltip from './tooltip'
// Define colors for enumeration for Button component `color`, `backgroundColor` props
const COLORS = {
@ -40,11 +41,16 @@ const COLORS = {
* @param {bool} [props.text] - if the button is just text (i.e. link)
* @param {bool} [props.title] - `title` attribute for button
* @param {bool} [props.to] - `to` to send to on click
* @param {bool} [props.tooltip] - add a tooltip to the button on hover/click
* @param {bool} [props.type] - `type` attribute for button
* @param {bool} [props.underlineOnHover] - if the button has underline on hover
*/
class Button extends React.PureComponent {
state = {
isHovering: false,
}
handleClick = (e) => {
if (!this.props.isDisabled && this.props.onClick) {
this.props.onClick(e)
@ -55,12 +61,18 @@ class Button extends React.PureComponent {
if (!this.props.isDisabled && this.props.onMouseEnter) {
this.props.onMouseEnter()
}
if (this.props.tooltip) {
this.setState({ isHovering: true })
}
}
handleOnMouseLeave = () => {
if (!this.props.isDisabled && this.props.onMouseLeave) {
this.props.onMouseLeave()
}
if (this.props.tooltip) {
this.setState({ isHovering: false })
}
}
setRef = (c) => {
@ -100,9 +112,11 @@ class Button extends React.PureComponent {
target,
title,
to,
tooltip,
type,
underlineOnHover,
} = this.props
const { isHovering } = this.state
// Style the component according to props
const classes = noClasses ? className : CX(className, {
@ -165,17 +179,25 @@ class Button extends React.PureComponent {
/>
) : undefined
const theChildren = !!icon ? (
const theTooltip = !!tooltip && isHovering ? (
<Tooltip
message={tooltip}
targetRef={this.node}
/>
) : undefined
const theChildren = !!icon || !!tooltip ? (
<React.Fragment>
{theIcon}
{children}
{theTooltip}
</React.Fragment>
) : children
const handlers = {
onClick: !!onClick ? this.handleClick : undefined,
onMouseEnter: !!onMouseEnter ? this.handleOnMouseEnter : undefined,
onMouseLeave: !!onMouseLeave ? this.handleOnMouseLeave : undefined,
onMouseEnter: !!onMouseEnter || !!tooltip ? this.handleOnMouseEnter : undefined,
onMouseLeave: !!onMouseLeave || !!tooltip ? this.handleOnMouseLeave : undefined,
}
if (tagName === 'NavLink' && !!to) {

View File

@ -0,0 +1,38 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Popper } from 'react-popper'
import Text from './text'
class Tooltip extends React.PureComponent {
render() {
const { message, targetRef } = this.props
return (
<Popper
placement='top'
referenceElement={targetRef}
strategy="fixed"
>
{({ ref, style, placement, arrowProps }) => (
<div ref={ref} style={style} data-placement={placement} className={[_s.z4, _s.mt5, _s.mb5, _s.px5, _s.py5].join(' ')}>
<div ref={arrowProps.ref} style={arrowProps.style} />
<div data-popover='true' className={[_s, _s.bgBlackOpaque, _s.px10, _s.py5, _s.circle].join(' ')}>
<Text color='white' size='small' className={_s.minW120PX}>
{message}
</Text>
</div>
</div>
)}
</Popper>
)
}
}
Tooltip.propTypes = {
message: PropTypes.string.isRequired,
targetRef: PropTypes.node.isRequired,
}
export default Tooltip