Now available 'both' for 'delayOn' props, closes #9

Author: kuy

examples/delay/app.js

@@ -25,7 +25,7 @@ class App extends Component {
         <h2>Delay on show</h2>
         <p>
           Hovering on an <Origin delay delayOn="show" className="target">origin</Origin>, but it is'n shown immediately.<br />
-          You need to stay a while on it.
+          You need to stay a while on it. Delay on <Origin delay delayOn="both" className="target">both</Origin>.
         </p>
 
         <Tooltip>

src/middleware.js

@@ -1,4 +1,4 @@
-import { startTimeout, endTimeout, DELAY } from './actions';
+import { SHOW, HIDE, DELAY, startTimeout, endTimeout } from './actions';
 import { resolve } from './utils';
 
 function getToken(state, name) {
@@ -9,14 +9,18 @@ function getToken(state, name) {
   }
 }
 
+const CANCEL_TYPES = [SHOW, HIDE];
+
 export default function middleware(store) {
   return next => action => {
-    // Clear timeout
     const names = resolve(action);
-    names.forEach(name => {
-      const token = getToken(store.getState(), name);
-      token && clearTimeout(token);
-    });
+    if (CANCEL_TYPES.indexOf(action.type) !== -1) {
+      // Clear timeout
+      names.forEach(name => {
+        const token = getToken(store.getState(), name);
+        token && clearTimeout(token);
+      });
+    }
 
     if (!action.meta || !action.meta[DELAY]) {
       return next(action);

src/origin.js

@@ -23,7 +23,7 @@ class Origin extends Component {
         PropTypes.number,
         PropTypes.string
       ]),
-      delayOn: PropTypes.oneOf(['show', 'hide']),
+      delayOn: PropTypes.oneOf(['show', 'hide', 'both']),
       onMouseEnter: PropTypes.func,
       onMouseLeave: PropTypes.func,
     };
@@ -51,7 +51,7 @@ class Origin extends Component {
     if (!props.onMouseEnter) {
       // Set default hover handler
       props.onMouseEnter = e => {
-        const action = this.props.delayOn === 'show'
+        const action = ['show', 'both'].indexOf(this.props.delayOn) !== -1
           ? this.createWithDelay(show, { el: e.target })
           : show({ ...this.props, el: e.target });
         this.props.dispatch(action);
@@ -62,7 +62,7 @@ class Origin extends Component {
     if (!props.onMouseLeave) {
       // Set default leave handler
       props.onMouseLeave = e => {
-        const action = this.props.delayOn === 'hide'
+        const action = ['hide', 'both'].indexOf(this.props.delayOn) !== -1
           ? this.createWithDelay(hide)
           : hide({ ...this.props });
         this.props.dispatch(action);

tests/feature/delay.js

@@ -158,5 +158,54 @@ describe('Delay Example', () => {
       TestUtils.Simulate.mouseLeave(origin);
       assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden immediately');
     });
+
+    it('should be worked on both', () => {
+      // Mouseover
+      const origin = firstComponent(tree, Origin.WrappedComponent, { delayOn: 'both' }).refs.wrapper;
+      TestUtils.Simulate.mouseEnter(origin);
+
+      const tooltip = firstComponent(tree, Tooltip.WrappedComponent).refs.tooltip;
+      assert(getStyleValue(tooltip, 'visibility') === 'hidden');
+
+      // 0.5 second later
+      clock.tick(500);
+      assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden');
+
+      // Mouseout before showing
+      TestUtils.Simulate.mouseLeave(origin);
+      assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden');
+
+      // Wait 2 seconds
+      clock.tick(2000);
+      assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip is still hidden');
+
+      // Mouseover again
+      TestUtils.Simulate.mouseEnter(origin);
+
+      // 1.5 seconds later
+      clock.tick(1500);
+      assert(getStyleValue(tooltip, 'visibility') === 'visible', 'tooltip should be shown');
+
+      // Mouseout
+      TestUtils.Simulate.mouseLeave(origin);
+
+      // 0.5 second later
+      clock.tick(500);
+      assert(getStyleValue(tooltip, 'visibility') === 'visible', 'tooltip is still shown');
+
+      // Mouseover again
+      TestUtils.Simulate.mouseEnter(origin);
+
+      // Wait 2 seconds
+      clock.tick(2000);
+      assert(getStyleValue(tooltip, 'visibility') === 'visible', 'tooltip is still shown');
+
+      // Mouseout
+      TestUtils.Simulate.mouseLeave(origin);
+
+      // 1.5 seconds later
+      clock.tick(1500);
+      assert(getStyleValue(tooltip, 'visibility') === 'hidden', 'tooltip should be hidden');
+    });
   });
 });