Add support for closeOnClick to WithTooltip (#19)

Add support for closeOnClick to WithTooltip

Author: Dominic Nguyen

src/components/tooltip/WithTooltip.js

@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import TooltipTrigger from 'react-popper-tooltip';
-import { withState } from 'recompose';
 
 import { Tooltip } from './Tooltip';
 
@@ -16,6 +15,20 @@ const TargetSvgContainer = styled.g`
   cursor: ${props => (props.mode === 'hover' ? 'default' : 'pointer')};
 `;
 
+const isDescendantOfAction = element => {
+  const { parentElement } = element;
+
+  if (parentElement.tagName === 'BODY') {
+    return false;
+  }
+
+  if (parentElement.tagName === 'A' || parentElement.tagName === 'BUTTON') {
+    return true;
+  }
+
+  return isDescendantOfAction(parentElement);
+};
+
 function WithTooltip({
   svg,
   trigger,
@@ -25,17 +38,26 @@ function WithTooltip({
   hasChrome,
   tooltip,
   children,
-  tooltipShown,
-  onVisibilityChange,
+  startOpen,
   ...props
 }) {
   const Container = svg ? TargetSvgContainer : TargetContainer;
+  const [isTooltipShown, setTooltipShown] = useState(startOpen);
+  const toggleTooltipShown = () => setTooltipShown(!isTooltipShown);
+  const closeTooltipOnClick = event => {
+    if (!closeOnClick || !isDescendantOfAction(event.target)) {
+      return;
+    }
+
+    setTooltipShown(false);
+  };
+
   return (
     <TooltipTrigger
       placement={placement}
       trigger={trigger}
-      tooltipShown={tooltipShown}
-      onVisibilityChange={onVisibilityChange}
+      tooltipShown={isTooltipShown}
+      onVisibilityChange={toggleTooltipShown}
       modifiers={modifiers}
       tooltip={({
         getTooltipProps,
@@ -50,16 +72,17 @@ function WithTooltip({
           tooltipRef={tooltipRef}
           arrowRef={arrowRef}
           arrowProps={getArrowProps()}
+          onClick={closeTooltipOnClick}
           {...getTooltipProps()}
         >
           {typeof tooltip === 'function'
-            ? tooltip({ onHide: () => onVisibilityChange(false) })
+            ? tooltip({ onHide: () => setTooltipShown(false) })
             : tooltip}
         </Tooltip>
       )}
     >
       {({ getTriggerProps, triggerRef }) => (
-        <Container ref={triggerRef} {...getTriggerProps()} {...props}>
+        <Container ref={triggerRef} {...getTriggerProps()} {...props} onClick={toggleTooltipShown}>
           {children}
         </Container>
       )}
@@ -76,8 +99,7 @@ WithTooltip.propTypes = {
   hasChrome: PropTypes.bool,
   tooltip: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   children: PropTypes.node.isRequired,
-  tooltipShown: PropTypes.bool,
-  onVisibilityChange: PropTypes.func.isRequired,
+  startOpen: PropTypes.bool,
 };
 
 WithTooltip.defaultProps = {
@@ -87,9 +109,7 @@ WithTooltip.defaultProps = {
   placement: 'top',
   modifiers: {},
   hasChrome: true,
-  tooltipShown: false,
+  startOpen: false,
 };
 
-export default withState('tooltipShown', 'onVisibilityChange', ({ startOpen }) => startOpen)(
-  WithTooltip
-);
+export default WithTooltip;