Merge branch 'features/delay-func'

Author: kuy

examples/delay/app.js

@@ -2,9 +2,13 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { Tooltip, Origin, actions } from '../../src/index';
 
-const { hide, delay } = actions;
+const { show, hide, delay } = actions;
 
 class App extends Component {
+  handleTimeout(type, duration) {
+    this.props.dispatch(show({ origin: this.refs.bold }));
+  }
+
   render() {
     return (
       <div>
@@ -28,6 +32,11 @@ class App extends Component {
           You need to stay a while on it. Delay on <Origin delay delayOn="both" className="target">both</Origin>.
         </p>
 
+        <h2>Timeout callback</h2>
+        <p>
+          The callback function is <b ref="bold">called</b> when <Origin delay className="target" onTimeout={this.handleTimeout.bind(this)}>timeout</Origin>.
+        </p>
+
         <Tooltip>
           This is a <b>delay</b> tooltip.
         </Tooltip>

src/actions.js

@@ -17,15 +17,15 @@ export const content = createAction(CONTENT);
 export const place = createAction(PLACE);
 
 export const DELAY = prefix('delay');
-const DEFAULT_DURATION = 1500;
-export function delay(action, duration = DEFAULT_DURATION) {
+const DURATION = 1500;
+export function delay(action, { duration, callback } = { duration: DURATION }) {
   if (!action.meta) {
     action.meta = {};
   }
-  if (duration === true) {
-    duration = DEFAULT_DURATION;
+  if (typeof duration === 'undefined' || duration === true) {
+    duration = DURATION;
   }
-  action.meta[DELAY] = parseInt(duration);
+  action.meta[DELAY] = { duration: parseInt(duration), callback };
   return action;
 }
 

src/middleware.js

@@ -27,6 +27,7 @@ export default function middleware(store) {
     }
 
     // Setup timeout
+    const { duration, callback } = action.meta[DELAY];
     names.forEach(name => {
       const newToken = setTimeout(() => {
         // Ignore if token is cleared
@@ -38,8 +39,11 @@ export default function middleware(store) {
           // Dispatch original action
           delete action.meta[DELAY];
           next(action);
+
+          // Notify via callback
+          callback && callback(action.type, duration, action);
         }
-      }, action.meta[DELAY]);
+      }, duration);
 
       // Store timeout token
       next(startTimeout({ name, token: newToken }));

src/origin.js

@@ -18,13 +18,14 @@ class Origin extends Component {
         PropTypes.string,
         PropTypes.arrayOf(PropTypes.string)
       ]),
+      tagName: PropTypes.string,
       delay: PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.number,
         PropTypes.string
       ]),
       delayOn: PropTypes.oneOf(['show', 'hide', 'both']),
-      tagName: PropTypes.string,
+      onTimeout: PropTypes.func,
       onMouseEnter: PropTypes.func,
       onMouseLeave: PropTypes.func,
     };
@@ -55,10 +56,10 @@ class Origin extends Component {
   }
 
   createWithDelay(creator, extras = {}) {
-    const { delay: duration } = this.props;
+    const { delay: duration, onTimeout: callback } = this.props;
     let action = creator({ ...this.props, ...extras });
-    if (duration) {
-      action = delay(action, duration || undefined);
+    if (duration || callback) {
+      action = delay(action, { duration, callback });
     }
     return action;
   }

tests/feature/delay.js

@@ -3,11 +3,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import { Provider } from 'react-redux';
-import { Tooltip, Origin } from '../../src/index';
+import { Tooltip, Origin, utils } from '../../src/index';
 import App from '../../examples/delay/app';
 import store from '../../examples/common/store';
 import { firstComponent, getStyleValue } from '../helpers';
 
+const { position } = utils;
+
 describe('Delay Example', () => {
   before(() => {
     document.body.innerHTML += '<div id="container" style="position:absolute;top:0;left:0;"></div>';
@@ -208,4 +210,30 @@ describe('Delay Example', () => {
       assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden');
     });
   });
+
+  describe('timeout callback', () => {
+    it('should be worked', () => {
+      // Mouseover and mouseout
+      const origin = firstComponent(tree, Origin.WrappedComponent, { onTimeout: undefined }).refs.wrapper;
+      TestUtils.Simulate.mouseEnter(origin);
+      TestUtils.Simulate.mouseLeave(origin);
+
+      const tooltip = firstComponent(tree, Tooltip.WrappedComponent).refs.tooltip;
+      assert(getStyleValue(tooltip, 'visibility') === 'visible');
+
+      const pos1 = position(tooltip);
+
+      // 2 seconds later
+      clock.tick(2000);
+      assert(getStyleValue(tooltip, 'visibility') === 'visible');
+
+      const pos2 = position(tooltip);
+      assert(pos2.left < pos1.left);
+      assert(pos2.top === pos1.top);
+
+      // 10 seconds later
+      clock.tick(10000);
+      assert(getStyleValue(tooltip, 'visibility') === 'visible');
+    });
+  });
 });

tests/helpers.js

@@ -6,7 +6,11 @@ export function scryComponents(tree, cls, props = {}) {
   const components = TestUtils.scryRenderedComponentsWithType(tree, cls);
   return components.filter(comp => {
     return Object.keys(props).map(key => {
-      return equal(comp.props[key], props[key]);
+      if (typeof props[key] === 'undefined') {
+        return !!comp.props[key];
+      } else {
+        return equal(comp.props[key], props[key]);
+      }
     }).reduce((prev, val) => prev && val, true);
   });
 }

tests/unit/test_actions.js

@@ -18,7 +18,41 @@ describe('actions', () => {
             value: 123
           },
           meta: {
-            'redux-tooltip/delay': 1500,
+            'redux-tooltip/delay': {
+              duration: 1500,
+              callback: undefined,
+            },
+          }
+        });
+      });
+
+      it('overwrites default duration', () => {
+        assert.deepStrictEqual(actions.delay(action, { duration: 500 }), {
+          type: 'WOO',
+          payload: {
+            value: 123
+          },
+          meta: {
+            'redux-tooltip/delay': {
+              duration: 500,
+              callback: undefined,
+            },
+          }
+        });
+      });
+
+      it('overwrites default duration', () => {
+        const fn = () => {};
+        assert.deepStrictEqual(actions.delay(action, { callback: fn }), {
+          type: 'WOO',
+          payload: {
+            value: 123
+          },
+          meta: {
+            'redux-tooltip/delay': {
+              duration: 1500,
+              callback: fn,
+            },
           }
         });
       });
@@ -47,7 +81,10 @@ describe('actions', () => {
           },
           meta: {
             gem: 'bundler',
-            'redux-tooltip/delay': 1500,
+            'redux-tooltip/delay': {
+              duration: 1500,
+              callback: undefined,
+            },
           }
         });
       });