feat(Tooltip): pass event to toggle callback (#1096)

This PR is related to the issue #1094 It also allows the developer to extend the capabilities of Tooltip to solve this another issue: #1072
reactstrap · Jun 26, 2018 · 9dad68b · 9dad68b
1 parent d0bbd7a
commit 9dad68b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/docs/lib/Components/TooltipsPage.js b/docs/lib/Components/TooltipsPage.js
@@ -33,7 +33,7 @@ export default class TooltipsPage extends React.Component {
   // boolean to control the state of the tooltip
   isOpen: PropTypes.bool,
   hideArrow: PropTypes.bool,
-  // callback for toggling isOpen in the controlling component
+  // callback for toggling isOpen in the controlling component. It will receive an object with info about the event that triggered it
   toggle: PropTypes.func,
   // target element or element ID, popover is attached to this element
   target:  PropTypes.oneOfType([

diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -82,18 +82,18 @@ class Tooltip extends React.Component {
     this.removeTargetEvents();
   }
 
-  onMouseOverTooltip() {
+  onMouseOverTooltip(e) {
     if (this._hideTimeout) {
       this.clearHideTimeout();
     }
-    this._showTimeout = setTimeout(this.show, this.getDelay('show'));
+    this._showTimeout = setTimeout(this.show.bind(this, e), this.getDelay('show'));
   }
 
-  onMouseLeaveTooltip() {
+  onMouseLeaveTooltip(e) {
     if (this._showTimeout) {
       this.clearShowTimeout();
     }
-    this._hideTimeout = setTimeout(this.hide, this.getDelay('hide'));
+    this._hideTimeout = setTimeout(this.hide.bind(this, e), this.getDelay('hide'));
   }
 
   onMouseOverTooltipContent() {
@@ -105,19 +105,20 @@ class Tooltip extends React.Component {
     }
   }
 
-  onMouseLeaveTooltipContent() {
+  onMouseLeaveTooltipContent(e) {
     if (this.props.autohide) {
       return;
     }
     if (this._showTimeout) {
       this.clearShowTimeout();
     }
-    this._hideTimeout = setTimeout(this.hide, this.getDelay('hide'));
+    e.persist();
+    this._hideTimeout = setTimeout(this.hide.bind(this, e), this.getDelay('hide'));
   }
 
   onEscKeyDown(e) {
     if (e.key === 'Escape') {
-      this.hide();
+      this.hide(e);
     }
   }
 
@@ -129,17 +130,17 @@ class Tooltip extends React.Component {
     return delay;
   }
 
-  show() {
+  show(e) {
     if (!this.props.isOpen) {
       this.clearShowTimeout();
-      this.toggle();
+      this.toggle(e);
     }
   }
 
-  hide() {
+  hide(e) {
     if (this.props.isOpen) {
       this.clearHideTimeout();
-      this.toggle();
+      this.toggle(e);
     }
   }
 
@@ -160,14 +161,13 @@ class Tooltip extends React.Component {
       }
 
       if (!this.props.isOpen) {
-        this.toggle();
+        this.toggle(e);
       }
     } else if (this.props.isOpen && e.target.getAttribute('role') !== 'tooltip') {
       if (this._showTimeout) {
         this.clearShowTimeout();
       }
-
-      this._hideTimeout = setTimeout(this.hide, this.getDelay('hide'));
+      this._hideTimeout = setTimeout(this.hide.bind(this, e), this.getDelay('hide'));
     }
   }
 
@@ -201,7 +201,7 @@ class Tooltip extends React.Component {
       return e && e.preventDefault();
     }
 
-    return this.props.toggle();
+    return this.props.toggle(e);
   }
 
   render() {

diff --git a/src/__tests__/Tooltip.spec.js b/src/__tests__/Tooltip.spec.js
@@ -9,6 +9,7 @@ describe('Tooltip', () => {
   let container;
   let target;
   let innerTarget;
+  let synthEvent;
 
   beforeEach(() => {
     isOpen = false;
@@ -22,6 +23,7 @@ describe('Tooltip', () => {
     document.body.appendChild(element);
     target = document.getElementById('target');
     innerTarget = document.getElementById('innerTarget');
+    synthEvent = { persist: () => {} };
 
     jest.useFakeTimers();
   });
@@ -536,7 +538,7 @@ describe('Tooltip', () => {
       expect(isOpen).toBe(true);
       expect(spy).not.toHaveBeenCalled();
 
-      instance.onMouseLeaveTooltipContent();
+      instance.onMouseLeaveTooltipContent(synthEvent);
       jest.runTimersToTime(100);
       expect(spy).not.toHaveBeenCalled();
       jest.runTimersToTime(200);
@@ -558,7 +560,7 @@ describe('Tooltip', () => {
 
       instance.onMouseOverTooltip();
       expect(instance._showTimeout).toBeTruthy();
-      instance.onMouseLeaveTooltipContent();
+      instance.onMouseLeaveTooltipContent(synthEvent);
       jest.runTimersToTime(300);
       expect(instance._showTimeout).toBeFalsy();
       wrapper.detach();
@@ -577,7 +579,7 @@ describe('Tooltip', () => {
 
       expect(isOpen).toBe(true);
       expect(spy).not.toHaveBeenCalled();
-      instance.onMouseLeaveTooltipContent();
+      instance.onMouseLeaveTooltipContent(synthEvent);
       jest.runTimersToTime(100);
       expect(instance._hideTimeout).toBeTruthy();
       instance.onMouseOverTooltipContent();
@@ -603,7 +605,7 @@ describe('Tooltip', () => {
       instance.onMouseOverTooltipContent();
       jest.runTimersToTime(200);
       expect(spy).toHaveBeenCalled();
-      instance.onMouseLeaveTooltipContent();
+      instance.onMouseLeaveTooltipContent(synthEvent);
       expect(instance._hideTimeout).toBeFalsy();
       wrapper.detach();
     });