Origin component now accepts 'delay' prop

Author: kuy

README.md

@@ -150,13 +150,16 @@ npm run test:feature
 
 ### TODO
 
-+ Options for 'delay' feature
 + Options to change offsets
 + Supports auto placement
 + Supports custom themes
 + Introduce ESLint
 + API documentation using ESDoc
 
+### Memo
+
++ When using delay feature, `onHover` and `onLeave` handlers should be called on triggered.
+
 ## Changelog
 
 See the [Releases](https://github.com/kuy/redux-tooltip/releases) page on GitHub.

examples/delay/app.js

@@ -23,7 +23,7 @@ class App extends Component {
         <h2>Advanced usage</h2>
         <p>
           You can specify a duration to delay hiding of a tooltip.<br />
-          For example: <Origin delay={500} className="target">0.5 second</Origin>, <Origin delay="1000" className="target">1 second</Origin>, <Origin delay={5000.0} className="target">5 seconds</Origin>
+          For example: <Origin delay={500} className="target">0.5 second</Origin>, <Origin delay="1000" className="target">1 second</Origin>, <Origin delay={2000.0} className="target">2 seconds</Origin>, <Origin delay="3000.0" className="target">3 seconds</Origin>
         </p>
 
         <Tooltip>

lib/actions.js

@@ -26,13 +26,17 @@ var keep = exports.keep = (0, _reduxActions.createAction)(KEEP);
 var content = exports.content = (0, _reduxActions.createAction)(CONTENT);
 var place = exports.place = (0, _reduxActions.createAction)(PLACE);
 
+var DEFAULT_DURATION = 1500;
 function delay(action) {
-  var duration = arguments.length <= 1 || arguments[1] === undefined ? 1500 : arguments[1];
+  var duration = arguments.length <= 1 || arguments[1] === undefined ? DEFAULT_DURATION : arguments[1];
 
   if (!action.meta) {
     action.meta = {};
   }
-  action.meta.delay = duration;
+  if (duration === true) {
+    duration = DEFAULT_DURATION;
+  }
+  action.meta.delay = parseInt(duration);
   return action;
 }
 

lib/origin.js

@@ -34,6 +34,18 @@ var Origin = function (_Component) {
   }
 
   _createClass(Origin, [{
+    key: 'createWithDelay',
+    value: function createWithDelay(creator) {
+      var extras = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+      var delayVal = this.props.delay;
+
+      var action = creator(_extends({}, this.props, extras));
+      if (delayVal) {
+        action = (0, _actions.delay)(action, delayVal || undefined);
+      }
+      return action;
+    }
+  }, {
     key: 'render',
     value: function render() {
       var _this2 = this;
@@ -52,7 +64,7 @@ var Origin = function (_Component) {
       if (!props.onMouseLeave) {
         // Set default leave handler
         props.onMouseLeave = function (e) {
-          _this2.props.dispatch((0, _actions.hide)(_extends({}, _this2.props)));
+          _this2.props.dispatch(_this2.createWithDelay(_actions.hide));
           _this2.props.onLeave && _this2.props.onLeave(e);
         };
       }

src/actions.js

@@ -16,11 +16,15 @@ export const keep = createAction(KEEP);
 export const content = createAction(CONTENT);
 export const place = createAction(PLACE);
 
-export function delay(action, duration=1500) {
+const DEFAULT_DURATION = 1500;
+export function delay(action, duration = DEFAULT_DURATION) {
   if (!action.meta) {
     action.meta = {};
   }
-  action.meta.delay = duration;
+  if (duration === true) {
+    duration = DEFAULT_DURATION;
+  }
+  action.meta.delay = parseInt(duration);
   return action;
 }
 

src/origin.js

@@ -1,12 +1,21 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
-import { show, hide } from './actions';
+import { show, hide, delay } from './actions';
 
 class Origin extends Component {
   static get displayName() {
     return 'Origin';
   }
 
+  createWithDelay(creator, extras = {}) {
+    const { delay: delayVal } = this.props;
+    let action = creator({ ...this.props, ...extras });
+    if (delayVal) {
+      action = delay(action, delayVal || undefined);
+    }
+    return action;
+  }
+
   render () {
     const props = { ...this.props };
     delete props['dispatch'];
@@ -22,7 +31,7 @@ class Origin extends Component {
     if (!props.onMouseLeave) {
       // Set default leave handler
       props.onMouseLeave = e => {
-        this.props.dispatch(hide({ ...this.props }));
+        this.props.dispatch(this.createWithDelay(hide));
         this.props.onLeave && this.props.onLeave(e);
       };
     }

tests/feature/delay.js

@@ -51,18 +51,18 @@ describe('Delay Example', () => {
       assert(getStyleValue(tooltip, 'visibility') === 'visible');
 
       // Wait more
-      clock.tick(1200);
+      clock.tick(1000);
       assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden');
     });
   });
 
   describe('advanced usage', () => {
-    it('should be worked for 0.5 second', () => {
+    it('should be worked for 0.5 second as an integer', () => {
       // Mouseover
-      const origin = firstComponent(tree, Origin.WrappedComponent, { delay: true }).refs.wrapper;
+      const origin = firstComponent(tree, Origin.WrappedComponent, { delay: 500 }).refs.wrapper;
       TestUtils.Simulate.mouseEnter(origin);
 
-      const tooltip = firstComponent(tree, Tooltip.WrappedComponent, { delay: 500 }).refs.tooltip;
+      const tooltip = firstComponent(tree, Tooltip.WrappedComponent).refs.tooltip;
       assert(getStyleValue(tooltip, 'visibility') === 'visible');
 
       // Mouseout
@@ -74,12 +74,12 @@ describe('Delay Example', () => {
       assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden after 0.5 second');
     });
 
-    it('should be worked for 1 second', () => {
+    it('should be worked for 1 second as a string', () => {
       // Mouseover
-      const origin = firstComponent(tree, Origin.WrappedComponent, { delay: true }).refs.wrapper;
+      const origin = firstComponent(tree, Origin.WrappedComponent, { delay: '1000' }).refs.wrapper;
       TestUtils.Simulate.mouseEnter(origin);
 
-      const tooltip = firstComponent(tree, Tooltip.WrappedComponent, { delay: '1000' }).refs.tooltip;
+      const tooltip = firstComponent(tree, Tooltip.WrappedComponent).refs.tooltip;
       assert(getStyleValue(tooltip, 'visibility') === 'visible');
 
       // Mouseout
@@ -91,21 +91,38 @@ describe('Delay Example', () => {
       assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden after 1 second');
     });
 
-    it('should be worked for 5 seconds', () => {
+    it('should be worked for 2 seconds as a float', () => {
       // Mouseover
-      const origin = firstComponent(tree, Origin.WrappedComponent, { delay: true }).refs.wrapper;
+      const origin = firstComponent(tree, Origin.WrappedComponent, { delay: 2000.0 }).refs.wrapper;
       TestUtils.Simulate.mouseEnter(origin);
 
-      const tooltip = firstComponent(tree, Tooltip.WrappedComponent, { delay: 5000.0 }).refs.tooltip;
+      const tooltip = firstComponent(tree, Tooltip.WrappedComponent).refs.tooltip;
+      assert(getStyleValue(tooltip, 'visibility') === 'visible');
+
+      // Mouseout
+      TestUtils.Simulate.mouseLeave(origin);
+      assert(getStyleValue(tooltip, 'visibility') === 'visible', 'tooltip should be kept');
+
+      // 2 seconds later
+      clock.tick(2000);
+      assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden after 2 seconds');
+    });
+
+    it('should be worked for 3 seconds as a string of float', () => {
+      // Mouseover
+      const origin = firstComponent(tree, Origin.WrappedComponent, { delay: '3000.0' }).refs.wrapper;
+      TestUtils.Simulate.mouseEnter(origin);
+
+      const tooltip = firstComponent(tree, Tooltip.WrappedComponent).refs.tooltip;
       assert(getStyleValue(tooltip, 'visibility') === 'visible');
 
       // Mouseout
       TestUtils.Simulate.mouseLeave(origin);
       assert(getStyleValue(tooltip, 'visibility') === 'visible', 'tooltip should be kept');
 
-      // 5 seconds later
-      clock.tick(5000);
-      assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden after 5 seconds');
+      // 3 seconds later
+      clock.tick(3000);
+      assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden after 3 seconds');
     });
   });
 });