Prevent Phantom Events

Author: cvle

mocha.opts

@@ -1,4 +1,5 @@
 --compilers tsx:ts-node/register,ts:ts-node/register
 --reporter dot
+test/jsdom.ts
 src/**/*.spec.tsx
 src/**/*.spec.ts

package.json

@@ -51,6 +51,7 @@
   "devDependencies": {
     "@types/chai": "^3.4.34",
     "@types/enzyme": "^2.5.37",
+    "@types/jsdom": "^2.0.29",
     "@types/mocha": "^2.2.32",
     "@types/react": "^0.14.43",
     "@types/react-addons-transition-group": "^0.14.17",
@@ -73,6 +74,7 @@
     "gulp-yaml-validate": "^1.0.2",
     "istanbul": "^1.1.0-alpha.1",
     "istanbul-instrumenter-loader": "^1.1.0",
+    "jsdom": "^9.9.1",
     "json-loader": "^0.5.4",
     "karma": "^1.3.0",
     "karma-chrome-launcher": "^2.0.0",

src/composables/preventPhantomEvents.spec.tsx

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright (C) 2016-present Chi Vinh Le and contributors.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { StatelessComponent } from "react";
+import { assert } from "chai";
+import { mount, ReactWrapper } from "enzyme";
+import { spy, SinonSpy } from "sinon";
+import { assemble } from "react-assemble";
+
+import { preventPhantomEvents } from "./preventPhantomEvents";
+const Component: StatelessComponent<any> = ({onTransitionEnd}) => <span {...{ onTransitionEnd }} />;
+
+describe("preventPhantomEvents", () => {
+  const composable = preventPhantomEvents;
+  const Assembly = assemble<any, any>(composable)(Component);
+  let onTransitionEnd: SinonSpy;
+  let wrapper: ReactWrapper<any, any>;
+
+  beforeEach(() => {
+    onTransitionEnd = spy();
+    wrapper = mount(<Assembly onTransitionEnd={onTransitionEnd} />);
+  });
+
+  it("should block onTransitionEnd", () => {
+    wrapper.setProps({ active: true });
+    const event = { timeStamp: Date.now() };
+    wrapper.simulate("transitionEnd", event);
+    assert.isTrue(onTransitionEnd.notCalled);
+  });
+
+  it("should call onTransitionEnd", () => {
+    wrapper.setProps({ active: true });
+    const event = { timeStamp: Date.now() + 20 };
+    wrapper.simulate("transitionEnd", event);
+    assert.isTrue(onTransitionEnd.called);
+  });
+
+  it("should block onTransitionEnd comparing precision time", () => {
+    wrapper.setProps({ active: true });
+    const event = { timeStamp: performance.now() };
+    wrapper.simulate("transitionEnd", event);
+    assert.isTrue(onTransitionEnd.notCalled);
+  });
+
+  it("should call onTransitionEnd comparing precision time", () => {
+    wrapper.setProps({ active: true });
+    const event = { timeStamp: performance.now() + 20 };
+    wrapper.simulate("transitionEnd", event);
+    assert.isTrue(onTransitionEnd.called);
+  });
+});

src/composables/preventPhantomEvents.tsx

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (C) 2016-present Chi Vinh Le and contributors.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import { TransitionEvent } from "react";
+import { combine, withHandlers, onWillReceiveProps, onDidUpdate, isolate, integrate } from "react-assemble";
+
+export const preventPhantomEvents = combine(
+  isolate(
+    withHandlers<any, any>(() => {
+      let lastTriggerTime: any;
+      let lastTriggerTimePerformance: any;
+      let timeUpdateRequested = false;
+      return {
+        requestTimeUpdate: () => () => {
+          timeUpdateRequested = true;
+        },
+        handleTimeUpdateRequest: () => () => {
+          if (timeUpdateRequested) {
+            lastTriggerTime = Date.now();
+            if (typeof performance !== "undefined") {
+              lastTriggerTimePerformance = performance.now();
+            }
+            timeUpdateRequested = false;
+          }
+        },
+        onTransitionEnd: ({onTransitionEnd}: any) => (e: TransitionEvent) => {
+          if (!onTransitionEnd) { return; }
+
+          // Skip transitionEnd that comes <= 15ms after (reversing) a transition.
+          // In most cases this came from the previous transition.
+          let compareWith = lastTriggerTime;
+          if ((e.timeStamp as any) < 1000000000000 && lastTriggerTimePerformance) {
+            compareWith = lastTriggerTimePerformance;
+          }
+          if ((e.timeStamp as any) - compareWith <= 15) {
+            return;
+          }
+
+          onTransitionEnd(e);
+        },
+      };
+    }),
+    onWillReceiveProps<any>(({active}, {active: nextActive, requestTimeUpdate}) => {
+      if (active !== nextActive) {
+        requestTimeUpdate();
+      }
+    }),
+    onDidUpdate<any>(({handleTimeUpdateRequest}) => handleTimeUpdateRequest()),
+    integrate<any>("onTransitionEnd"),
+  ),
+);

src/csstransition.tsx

@@ -16,6 +16,7 @@ import { mergeWithStyle } from "./composables/mergeWithStyle";
 import { withTransitionInfo } from "./composables/withTransitionInfo";
 import { withTransitionObserver } from "./composables/withTransitionObserver";
 import { withWorkaround } from "./composables/withWorkaround";
+import { preventPhantomEvents } from "./composables/preventPhantomEvents";
 
 export type CSSTransitionDelay = number | { appear?: number; enter?: number; leave?: number };
 export type CSSTransitionEventHandler = () => void;
@@ -76,6 +77,7 @@ const enhance = assemble<CSSTransitionInnerProps, CSSTransitionProps>(
   withTransitionInfo,
   withTransitionObserver,
   withWorkaround,
+  preventPhantomEvents,
   mapPropsToInner,
 );
 

test/jsdom.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (C) 2016-2017 Chi Vinh Le and contributors.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import { jsdom } from "jsdom";
+
+declare var global: any;
+
+function clock(start?: any): any {
+  if (!start) { return process.hrtime(); }
+  const end = process.hrtime(start);
+  return Math.round((end[0] * 1000) + (end[1] / 1000000));
+}
+
+const start = clock();
+global.document = jsdom("");
+global.window = document.defaultView;
+global.navigator = { userAgent: "node.js" };
+// Setup a fake version of performance.now.
+global.performance = { now: () => clock(start) };
+
+const exposedProperties = ["document", "window", "navigator"];
+Object.keys(window).forEach((property) => {
+  if (typeof global[property] === "undefined") {
+    exposedProperties.push(property);
+    global[property] = (window as any)[property];
+  }
+});

tests.webpack.js

@@ -3,5 +3,5 @@
 const srcContext = require.context("./src", true, /^(?!.*\.(spec|d)\.).*\.tsx?$/);
 srcContext.keys().forEach(srcContext);
 
-const testContext = require.context("./test", true, /\.tsx?$/);
+const testContext = require.context("./test", true, /\.test\.tsx?$/);
 testContext.keys().forEach(testContext);