Use timeout as a last resort

Author: cvle

src/composables/withTimeout.spec.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { assert } from "chai";
+import { mount } from "enzyme";
+import { spy } from "sinon";
+import { assemble } from "reassemble";
+
+import { Component } from "../../test/component";
+import { withTimeout, timeoutMultiplier } from "./withTimeout";
+
+describe("withTimeout", () => {
+  const composable = withTimeout;
+  const Assembly = assemble<any, any>(composable)(Component);
+
+  it("shouldn't timeout without a transition", (done) => {
+    const props = {
+      transitionState: {
+        inTransition: false,
+      },
+      transitionInfo: {
+        totalDuration: 20,
+      },
+      timeout: spy(),
+    };
+    const timeoutIn = props.transitionInfo.totalDuration * timeoutMultiplier;
+    mount(<Assembly {...props} />);
+    setTimeout(() => {
+      assert.isFalse(props.timeout.called);
+      done();
+    }, timeoutIn);
+  });
+
+  it("shouldn't timeout when transition ends before", (done) => {
+    const props = {
+      transitionState: {
+        inTransition: false,
+      },
+      transitionInfo: {
+        totalDuration: 20,
+      },
+      timeout: spy(),
+    };
+    const timeoutIn = props.transitionInfo.totalDuration * timeoutMultiplier;
+    const wrapper = mount(<Assembly {...props} />);
+    wrapper.setProps({ transitionState: { inTransition: true } });
+    setTimeout(() => {
+      assert.isFalse(props.timeout.called);
+      wrapper.setProps({ transitionState: { inTransition: false } });
+      setTimeout(() => {
+        assert.isFalse(props.timeout.called);
+        done();
+      }, timeoutIn - props.transitionInfo.totalDuration);
+    }, props.transitionInfo.totalDuration);
+  });
+
+  it("should timeout if transition passes time", (done) => {
+    const props = {
+      transitionState: {
+        inTransition: false,
+      },
+      transitionInfo: {
+        totalDuration: 20,
+      },
+      timeout: spy(),
+    };
+    const timeoutIn = props.transitionInfo.totalDuration * timeoutMultiplier;
+    const wrapper = mount(<Assembly {...props} />);
+    wrapper.setProps({ transitionState: { inTransition: true } });
+    setTimeout(() => {
+      assert.isTrue(props.timeout.called);
+      done();
+    }, timeoutIn);
+  });
+
+  it("should reset timer if transition was interrupted", (done) => {
+    const props = {
+      transitionState: {
+        inTransition: false,
+      },
+      transitionInfo: {
+        totalDuration: 20,
+      },
+      timeout: spy(),
+    };
+    const halfPeriod = props.transitionInfo.totalDuration * timeoutMultiplier / 2;
+    const wrapper = mount(<Assembly {...props} />);
+    wrapper.setProps({ transitionState: { inTransition: true } });
+    setTimeout(() => {
+      assert.isFalse(props.timeout.called);
+      wrapper.setProps({ active: true });
+
+      setTimeout(() => {
+        assert.isFalse(props.timeout.called);
+        setTimeout(() => {
+          assert.isTrue(props.timeout.called);
+          done();
+        }, halfPeriod);
+      }, halfPeriod);
+    }, halfPeriod);
+  });
+});

src/composables/withTimeout.ts

@@ -0,0 +1,48 @@
+import { withHandlers, isolate, onWillReceiveProps, debug } from "reassemble";
+
+import { CSSTransitionProps } from "../csstransition";
+import { WithTransitionStateProps } from "./withTransitionState";
+import { WithTransitionInfoProps } from "./withTransitionInfo";
+
+export const timeoutMultiplier = 3;
+
+type PropsOut = {
+  cancel: () => void,
+  timeoutIn: (ms: number) => void,
+};
+
+type PropsUnion =
+  CSSTransitionProps
+  & WithTransitionStateProps
+  & WithTransitionInfoProps
+  & PropsOut;
+
+export const withTimeout =
+  isolate(
+    withHandlers<PropsUnion, PropsOut>(
+      () => {
+        let timeoutID: any;
+        return {
+          timeoutIn: ({timeout}) => (ms: number) => timeoutID = setTimeout(timeout, ms),
+          cancel: () => () => clearTimeout(timeoutID),
+        };
+      }),
+    onWillReceiveProps<PropsUnion>(
+      (
+        {transitionState: {inTransition}, active},
+        {
+          transitionState: {inTransition: nextInTransition},
+          transitionInfo: {totalDuration},
+          cancel, timeoutIn, active: nextActive,
+        },
+      ) => {
+        const newTransition = inTransition !== nextInTransition;
+        const interrupted = nextInTransition && active !== nextActive;
+        if (newTransition || interrupted) {
+          cancel();
+          if (nextInTransition) {
+            timeoutIn(totalDuration * timeoutMultiplier);
+          }
+        }
+      }),
+  );

src/composables/withTransitionState.spec.tsx

@@ -128,6 +128,26 @@ describe("withTransitionState.tsx", () => {
       });
     });
 
+    describe("timeout", () => {
+      const initialState = { id: 1, style: {} };
+      const state = { id: 2, style: { top: 0 }, className: "foo" };
+      let reducer: SinonSpy;
+      before(() => {
+        reducer = spy(createReducer({ 0: { state: initialState }, 1: { state } }));
+        wrapper = getWrapper({ children: <span /> }, reducer);
+        reducer.reset();
+        wrapper.props().timeout();
+      });
+
+      it("should dispatch ActionID.Timeout", () => {
+        assert.isTrue(reducer.calledWith(initialState.id, { kind: ActionID.Timeout, props: {} }));
+      });
+
+      it("should return transitionState", () => {
+        assert.deepEqual(wrapper.props().transitionState, pick(state, "style", "className"));
+      });
+    });
+
     describe("pending action", () => {
       const initialState = { id: 1, style: {} };
       const pendingState = { id: 2, style: { top: 0 }, className: "foo" };

src/composables/withTransitionState.tsx

@@ -19,6 +19,7 @@ export type TransitionState = {
 
 export type WithTransitionStateProps = {
   transitionState?: TransitionState,
+  timeout?: () => void,
 };
 
 type PropsOut =
@@ -89,6 +90,7 @@ export const withTransitionState = (reduce: Reducer) => combine(
     withHandlers<PropsUnion, PropsOut>({
       onTransitionBegin: ({dispatch}) => () => dispatch(ActionID.TransitionStart),
       onTransitionComplete: ({dispatch}) => () => dispatch(ActionID.TransitionComplete),
+      timeout: ({dispatch}) => () => dispatch(ActionID.Timeout),
     }),
     onDidMount<PropsUnion>(
       ({dispatch}) => {
@@ -104,7 +106,7 @@ export const withTransitionState = (reduce: Reducer) => combine(
         dispatch(ActionID.TransitionTrigger);
       }),
     integrate<keyof PropsUnion>(
-      "transitionState", "onTransitionBegin", "onTransitionComplete",
+      "timeout", "transitionState", "onTransitionBegin", "onTransitionComplete",
     ),
   ),
 );

src/csstransition.tsx

@@ -6,6 +6,7 @@ import { reducer } from "./reducer";
 import { withTransitionState, WithTransitionStateProps } from "./composables/withTransitionState";
 import { mergeWithBaseStyle } from "./composables/mergeWithBaseStyle";
 import { withTransitionInfo, WithTransitionInfoProps } from "./composables/withTransitionInfo";
+import { withTimeout } from "./composables/withTimeout";
 import { withTransitionObserver, WithTransitionObserverProps } from "./composables/withTransitionObserver";
 import { withWorkaround } from "./composables/withWorkaround";
 import { withDOMNodeCallback, WithDOMNodeCallbackProps } from "./composables/withDOMNodeCallback";
@@ -86,6 +87,7 @@ const mapPropsToInner = omitProps<keyof PropsUnion>(
   "onTransitionBegin",
   "transitionInfo",
   "transitionState",
+  "timeout",
   "getDOMNode",
 );
 
@@ -96,6 +98,7 @@ const enhance = assemble<CSSTransitionInnerProps, CSSTransitionProps>(
   withTransitionState(reducer),
   mergeWithBaseStyle,
   withTransitionInfo,
+  withTimeout,
   withTransitionObserver,
   withWorkaround,
   // TODO: needs more investigation and probably a different way to do it.