feat(Tooltip): add delay prop (#143)

alisd23 · eddywashere · commit b18fb7464066 · 2016-09-18T10:28:16.000-07:00
* feat: add delay prop to Tooltip Previous delay was harcoded value of 250ms for the 'hide', and 0 for the 'show'. New prop 'delay' allows for either an object of form: { show: 100, hide: 200 } or simply a number to set these delays. Default is { show: 0, hide: 250 } Closes #115 * test: add tests for delay prop object/number * feat: allow partial delay object and add tests
diff --git a/docs/lib/Components/TooltipsPage.js b/docs/lib/Components/TooltipsPage.js
@@ -34,6 +34,11 @@ export default class TooltipsPage extends React.Component {
   // target div ID, popover is attached to this element
   tether: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   // optionally overide tether config http://tether.io/#options
+  delay: PropTypes.oneOfType([
+    PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
+    PropTypes.number
+  ]),
+  // optionally override show/hide delays - default { show: 0, hide: 250 }
   placement: PropTypes.oneOf([
     'top',
     'bottom',
diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -9,12 +9,22 @@ const propTypes = {
   disabled: PropTypes.bool,
   tether: PropTypes.object,
   toggle: PropTypes.func,
-  children: PropTypes.node
+  children: PropTypes.node,
+  delay: PropTypes.oneOfType([
+    PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
+    PropTypes.number
+  ])
+};
+
+const DEFAULT_DELAYS = {
+  show: 0,
+  hide: 250
 };
 
 const defaultProps = {
   isOpen: false,
-  placement: 'bottom'
+  placement: 'bottom',
+  delay: DEFAULT_DELAYS
 };
 
 const defaultTetherConfig = {
@@ -37,7 +47,8 @@ class Tooltip extends React.Component {
     this.toggle = this.toggle.bind(this);
     this.onMouseOverTooltip = this.onMouseOverTooltip.bind(this);
     this.onMouseLeaveTooltip = this.onMouseLeaveTooltip.bind(this);
-    this.onTimeout = this.onTimeout.bind(this);
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
   }
 
   componentDidMount() {
@@ -50,23 +61,25 @@ class Tooltip extends React.Component {
   }
 
   onMouseOverTooltip() {
-    if (this._hoverTimeout) {
-      clearTimeout(this._hoverTimeout);
-    }
-
-    if (!this.props.isOpen) {
-      this.toggle();
+    if (this._hideTimeout) {
+      this.clearHideTimeout();
     }
+    this._showTimeout = setTimeout(this.show, this.getDelay('show'));
   }
 
   onMouseLeaveTooltip() {
-    this._hoverTimeout = setTimeout(this.onTimeout, 250);
+    if (this._showTimeout) {
+      this.clearShowTimeout();
+    }
+    this._hideTimeout = setTimeout(this.hide, this.getDelay('hide'));
   }
 
-  onTimeout() {
-    if (this.props.isOpen) {
-      this.toggle();
+  getDelay(key) {
+    const { delay } = this.props;
+    if (typeof delay === 'object') {
+      return isNaN(delay[key]) ? DEFAULT_DELAYS[key] : delay[key];
     }
+    return delay;
   }
 
   getTetherConfig() {
@@ -79,10 +92,31 @@ class Tooltip extends React.Component {
     };
   }
 
+  show() {
+    if (!this.props.isOpen) {
+      this.toggle();
+    }
+  }
+  hide() {
+    if (this.props.isOpen) {
+      this.toggle();
+    }
+  }
+
+  clearShowTimeout() {
+    clearTimeout(this._showTimeout);
+    this._showTimeout = undefined;
+  }
+
+  clearHideTimeout() {
+    clearTimeout(this._hideTimeout);
+    this._hideTimeout = undefined;
+  }
+
   handleDocumentClick(e) {
     if (e.target === this._target || this._target.contains(e.target)) {
-      if (this._hoverTimeout) {
-        clearTimeout(this._hoverTimeout);
+      if (this._hideTimeout) {
+        this.clearHideTimeout();
       }
 
       if (!this.props.isOpen) {
diff --git a/test/Tooltip.spec.js b/test/Tooltip.spec.js
@@ -135,9 +135,9 @@ describe('Tooltip', () => {
     wrapper.detach();
   });
 
-  it('should clear timeout if it exists on target click', () => {
+  it('should clear hide timeout if it exists on target click', () => {
     const wrapper = mount(
-      <Tooltip target="target" isOpen={isOpen} toggle={toggle}>
+      <Tooltip target="target" isOpen={isOpen} toggle={toggle} delay={200}>
         Tooltip Content
       </Tooltip>,
       { attachTo: container }
@@ -147,7 +147,7 @@ describe('Tooltip', () => {
     instance.onMouseLeaveTooltip();
     expect(isOpen).toBe(false);
     instance.handleDocumentClick({ target: target });
-    jasmine.clock().tick(250);
+    jasmine.clock().tick(200);
     expect(isOpen).toBe(true);
     wrapper.setProps({ isOpen: isOpen });
     instance.handleDocumentClick({ target: target });
@@ -176,7 +176,57 @@ describe('Tooltip', () => {
     wrapper.detach();
   });
 
-  describe('onTimeout', () => {
+  describe('delay', () => {
+    it('should accept a number', () => {
+      isOpen = true;
+      const wrapper = mount(
+        <Tooltip target="target" isOpen={isOpen} toggle={toggle} delay={200}>
+          Tooltip Content
+        </Tooltip>,
+        { attachTo: container }
+      );
+      const instance = wrapper.instance();
+
+      instance.onMouseLeaveTooltip();
+      expect(isOpen).toBe(true);
+      jasmine.clock().tick(200);
+      expect(isOpen).toBe(false);
+    });
+
+    it('should accept an object', () => {
+      isOpen = true;
+      const wrapper = mount(
+        <Tooltip target="target" isOpen={isOpen} toggle={toggle} delay={{ show: 200, hide: 200 }}>
+          Tooltip Content
+        </Tooltip>,
+        { attachTo: container }
+      );
+      const instance = wrapper.instance();
+
+      instance.onMouseLeaveTooltip();
+      expect(isOpen).toBe(true);
+      jasmine.clock().tick(200);
+      expect(isOpen).toBe(false);
+    });
+
+    it('should use default value if value is missing from object', () => {
+      isOpen = true;
+      const wrapper = mount(
+        <Tooltip target="target" isOpen={isOpen} toggle={toggle} delay={{ show: 0 }}>
+          Tooltip Content
+        </Tooltip>,
+        { attachTo: container }
+      );
+      const instance = wrapper.instance();
+
+      instance.onMouseLeaveTooltip();
+      expect(isOpen).toBe(true);
+      jasmine.clock().tick(250);  // Default hide value: 250
+      expect(isOpen).toBe(false);
+    });
+  });
+
+  describe('hide', () => {
     it('should call toggle when isOpen', () => {
       spyOn(Tooltip.prototype, 'toggle').and.callThrough();
       isOpen = true;
@@ -190,7 +240,7 @@ describe('Tooltip', () => {
 
       expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
 
-      instance.onTimeout();
+      instance.hide();
 
       expect(Tooltip.prototype.toggle).toHaveBeenCalled();
 
@@ -209,7 +259,48 @@ describe('Tooltip', () => {
 
       expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
 
-      instance.onTimeout();
+      instance.hide();
+
+      expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
+
+      wrapper.detach();
+    });
+  });
+
+  describe('show', () => {
+    it('should call toggle when isOpen is false', () => {
+      spyOn(Tooltip.prototype, 'toggle').and.callThrough();
+      const wrapper = mount(
+        <Tooltip target="target" isOpen={isOpen} toggle={toggle}>
+          Tooltip Content
+        </Tooltip>,
+        { attachTo: container }
+      );
+      const instance = wrapper.instance();
+
+      expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
+
+      instance.show();
+
+      expect(Tooltip.prototype.toggle).toHaveBeenCalled();
+
+      wrapper.detach();
+    });
+
+    it('should not call toggle when isOpen', () => {
+      spyOn(Tooltip.prototype, 'toggle').and.callThrough();
+      isOpen = true;
+      const wrapper = mount(
+        <Tooltip target="target" isOpen={isOpen} toggle={toggle}>
+          Tooltip Content
+        </Tooltip>,
+        { attachTo: container }
+      );
+      const instance = wrapper.instance();
+
+      expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
+
+      instance.show();
 
       expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
 
@@ -221,7 +312,7 @@ describe('Tooltip', () => {
     it('should clear timeout if it exists on target click', () => {
       spyOn(Tooltip.prototype, 'toggle').and.callThrough();
       const wrapper = mount(
-        <Tooltip target="target" isOpen={isOpen} toggle={toggle}>
+        <Tooltip target="target" isOpen={isOpen} toggle={toggle} delay={200}>
           Tooltip Content
         </Tooltip>,
         { attachTo: container }
@@ -234,6 +325,7 @@ describe('Tooltip', () => {
       expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
 
       instance.onMouseOverTooltip();
+      jasmine.clock().tick(200);
 
       expect(Tooltip.prototype.toggle).toHaveBeenCalled();
 
@@ -244,19 +336,66 @@ describe('Tooltip', () => {
       spyOn(Tooltip.prototype, 'toggle').and.callThrough();
       isOpen = true;
       const wrapper = mount(
-        <Tooltip target="target" isOpen={isOpen} toggle={toggle}>
+        <Tooltip target="target" isOpen={isOpen} toggle={toggle} delay={0}>
           Tooltip Content
         </Tooltip>,
         { attachTo: container }
       );
       const instance = wrapper.instance();
 
       instance.onMouseOverTooltip();
+      jasmine.clock().tick(0);  // delay: 0 toggle is still async
 
       expect(isOpen).toBe(true);
       expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
 
       wrapper.detach();
     });
   });
+
+  describe('onMouseLeaveTooltip', () => {
+    it('should clear timeout if it exists on target click', () => {
+      spyOn(Tooltip.prototype, 'toggle').and.callThrough();
+      isOpen = true;
+      const wrapper = mount(
+        <Tooltip target="target" isOpen={isOpen} toggle={toggle} delay={200}>
+          Tooltip Content
+        </Tooltip>,
+        { attachTo: container }
+      );
+      const instance = wrapper.instance();
+
+      instance.onMouseOverTooltip();
+
+      expect(isOpen).toBe(true);
+      expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
+
+      instance.onMouseLeaveTooltip();
+      jasmine.clock().tick(200);
+
+      expect(Tooltip.prototype.toggle).toHaveBeenCalled();
+
+      wrapper.detach();
+    });
+
+    it('should not call .toggle if isOpen is false', () => {
+      spyOn(Tooltip.prototype, 'toggle').and.callThrough();
+      isOpen = false;
+      const wrapper = mount(
+        <Tooltip target="target" isOpen={isOpen} toggle={toggle} delay={0}>
+          Tooltip Content
+        </Tooltip>,
+        { attachTo: container }
+      );
+      const instance = wrapper.instance();
+
+      instance.onMouseLeaveTooltip();
+      jasmine.clock().tick(0);  // delay: 0 toggle is still async
+
+      expect(isOpen).toBe(false);
+      expect(Tooltip.prototype.toggle).not.toHaveBeenCalled();
+
+      wrapper.detach();
+    });
+  });
 });
