From 899fe425d416b2fd23164efb7e0da0c6ca1b504d Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Mon, 7 Sep 2020 11:20:04 -0500
Subject: [PATCH] Added Tooltip component to Button with tooltip prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Added:
- Tooltip component to Button with tooltip prop
---
 app/javascript/gabsocial/components/button.js | 28 ++++++++++++--
 .../gabsocial/components/tooltip.js           | 38 +++++++++++++++++++
 2 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 app/javascript/gabsocial/components/tooltip.js

diff --git a/app/javascript/gabsocial/components/button.js b/app/javascript/gabsocial/components/button.js
index 9adaf727..5a0a2360 100644
--- a/app/javascript/gabsocial/components/button.js
+++ b/app/javascript/gabsocial/components/button.js
@@ -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) {
diff --git a/app/javascript/gabsocial/components/tooltip.js b/app/javascript/gabsocial/components/tooltip.js
new file mode 100644
index 00000000..3d02b53d
--- /dev/null
+++ b/app/javascript/gabsocial/components/tooltip.js
@@ -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
\ No newline at end of file