Support class based transitions

Author: cvle

src/composables/mergeWithBaseStyle.spec.tsx

@@ -0,0 +1,63 @@
+/**
+ * @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 { assert } from "chai";
+import { shallow } from "enzyme";
+import { assemble } from "react-assemble";
+
+import { mergeWithBaseStyle } from "./mergeWithBaseStyle";
+import { Component } from "../../test/component";
+
+describe("mergeWithBaseStyle", () => {
+  const composable = mergeWithBaseStyle;
+  const Assembly = assemble<any, any>(composable)(Component);
+
+  it("should merge base style with transition style", () => {
+    const input = {
+      style: { top: 0, left: 2 },
+      transitionState: { style: { left: 10 } },
+    };
+    const output = {
+      ...input,
+      style: { top: 0, left: 10 },
+      className: "",
+    };
+    const wrapper = shallow(<Assembly {...input} />);
+    assert.deepEqual(wrapper.props(), output);
+  });
+
+  it("should merge base className with transition className", () => {
+    const input = {
+      className: "baseClass",
+      transitionState: { className: "transitionClass" },
+    };
+    const output = {
+      ...input,
+      style: {},
+      className: "baseClass transitionClass",
+    };
+    const wrapper = shallow(<Assembly {...input} />);
+    assert.deepEqual(wrapper.props(), output);
+  });
+
+  it("should merge both", () => {
+    const input = {
+      style: { top: 0, left: 2 },
+      className: "baseClass",
+      transitionState: { style: { left: 10 }, className: "transitionClass" },
+    };
+    const output = {
+      ...input,
+      style: { top: 0, left: 10 },
+      className: "baseClass transitionClass",
+    };
+    const wrapper = shallow(<Assembly {...input} />);
+    assert.deepEqual(wrapper.props(), output);
+  });
+});

src/composables/mergeWithBaseStyle.tsx

@@ -0,0 +1,18 @@
+/**
+ * @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 { combine, withProps } from "react-assemble";
+
+const mergeClasses = (...classes: string[]) => classes.filter((s) => s).join(" ");
+
+export const mergeWithBaseStyle = combine(
+  withProps<any, any>(({ transitionState, style, className }: any) => ({
+    style: { ...style, ...transitionState.style },
+    className: mergeClasses(className, transitionState.className),
+  })),
+);

src/composables/mergeWithStyle.spec.tsx

@@ -0,0 +1,30 @@
+/**
+ * @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 { assert } from "chai";
+import { mount } from "enzyme";
+import { assemble } from "react-assemble";
+
+import { withDOMNodeCallback } from "./withDOMNodeCallback";
+
+class Component extends React.Component<any, any> {
+  public render(): any {
+    return <span ref={this.props.onDOMNodeRef} />;
+  }
+}
+
+describe("withDOMNodeCallback", () => {
+  const composable = withDOMNodeCallback;
+  const Assembly = assemble<any, any>(composable)(Component);
+
+  it("should provide callback", () => {
+    const wrapper = mount(<Assembly />);
+    assert.strictEqual(wrapper.find(Component).props().getDOMNode().nodeName, "SPAN");
+  });
+});

src/composables/mergeWithStyle.tsx

@@ -0,0 +1,20 @@
+/**
+ * @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 { withHandlers } from "react-assemble";
+
+export const withDOMNodeCallback =
+  withHandlers<any, any>(() => {
+    let ref: Element;
+    return {
+      onDOMNodeRef: () => (e: Element) => {
+        ref = e;
+      },
+      getDOMNode: () => () => ref,
+    };
+  });

src/composables/withDOMNodeCallback.spec.tsx

@@ -8,46 +8,105 @@
 
 import * as React from "react";
 import { assert } from "chai";
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 import { assemble } from "react-assemble";
 
 import { withTransitionInfo } from "./withTransitionInfo";
 import { Component } from "../../test/component";
 
+function addCSS(css: string): HTMLElement {
+  const head = document.getElementsByTagName("head")[0];
+  const s = document.createElement("style");
+  s.setAttribute("type", "text/css");
+  s.appendChild(document.createTextNode(css));
+  head.appendChild(s);
+  return s;
+}
+
+const css =
+  `
+.transition {
+  transition-property: height, width;
+  transition-duration: 2ms, 10s;
+  transition-delay: 2s, 10ms;
+  transition-timing-function: linear, ease;
+}
+`;
+
 describe("withTransitionInfo", () => {
-  it("should pass transitionInfo for ongoing transition", () => {
-    const input = {
-      style: {
-        transition: "height 2ms 2s linear, width ease 10s 10ms",
-      },
-    };
-    const output = {
-      ...input,
-      transitionInfo: {
-        firstProperty: "width",
-        firstPropertyDelay: 10,
-        lastProperty: "width",
-        inTransition: true,
-      },
-    };
-    const composable = withTransitionInfo;
-    const Assembly = assemble<any, any>(composable)(Component);
-    const wrapper = shallow(<Assembly {...input} />);
-    assert.deepEqual(wrapper.props(), output);
+  const composable = withTransitionInfo;
+  const Assembly = assemble<any, any>(composable)(Component);
+
+  describe("style based", () => {
+    it("should pass transitionInfo for ongoing transition", () => {
+      const input = {
+        style: {
+          transition: "height 2ms 2s linear, width ease 10s 10ms",
+        },
+        transitionState: {
+          inTransition: true,
+        },
+      };
+      const output = {
+        ...input,
+        transitionInfo: {
+          firstProperty: "width",
+          firstPropertyDelay: 10,
+          lastProperty: "width",
+        },
+      };
+      const wrapper = shallow(<Assembly {...input} />);
+      assert.deepEqual(wrapper.props(), output);
+    });
+  });
+
+  describe("class based", () => {
+    let div: HTMLElement;
+    let style: HTMLElement;
+
+    before(() => {
+      style = addCSS(css);
+      div = document.createElement("div");
+      document.body.appendChild(div);
+    });
+
+    after(() => {
+      div.parentNode.removeChild(div);
+      style.parentNode.removeChild(style);
+    });
+
+    it("should pass transitionInfo for ongoing transition", () => {
+      const input = {
+        className: "transition",
+        getDOMNode: () => div,
+        transitionState: {
+          inTransition: true,
+        },
+      };
+      const output = {
+        ...input,
+        transitionInfo: {
+          firstProperty: "width",
+          firstPropertyDelay: 10,
+          lastProperty: "width",
+        },
+      };
+      const wrapper = mount(<Assembly {...input} />);
+      assert.deepEqual(wrapper.find(Component).props(), output);
+    });
   });
 
-  it("should pass transitionInfo for absent transition", () => {
+  it("should pass empty transitionInfo for absent transition", () => {
     const input = {
       style: {},
+      transitionState: {
+        inTransition: false,
+      },
     };
     const output = {
       ...input,
-      transitionInfo: {
-        inTransition: false,
-      },
+      transitionInfo: {},
     };
-    const composable = withTransitionInfo;
-    const Assembly = assemble<any, any>(composable)(Component);
     const wrapper = shallow(<Assembly {...input} />);
     assert.deepEqual(wrapper.props(), output);
   });

src/composables/withDOMNodeCallback.tsx

@@ -6,23 +6,43 @@
  * of the MIT license. See the LICENSE file for details.
  */
 
-import { withProps } from "react-assemble";
+import { withProps, withHandlers, isolate, integrate } from "react-assemble";
 
-import parseTransition from "../utils/parseTransition";
+import { parseTransition, TransitionEntry } from "../utils/parseTransition";
+import { parseComputedTransition } from "../utils/parseComputedTransition";
+import { memoize } from "../utils/memoize";
 
 export const withTransitionInfo =
-  withProps<any, any>(({style}: any) => {
-    if (style.transition) {
-      const [{delay: firstPropertyDelay, property: firstProperty}, {property: lastProperty}] =
-        parseTransition(style.transition);
+  isolate(
+    withHandlers<any, any>(() => {
+      const memoized = memoize(
+        (node: Element) => parseComputedTransition(getComputedStyle(node)),
+        (node: Element) => node.className,
+      );
       return {
-        transitionInfo: {
-          firstPropertyDelay,
-          firstProperty,
-          lastProperty,
-          inTransition: true,
-        },
+        parseComputedTransitionMemoized: () => memoized,
       };
-    }
-    return { transitionInfo: { inTransition: false } };
-  });
+    }),
+    withProps<any, any>(({style, className, transitionState, getDOMNode, parseComputedTransitionMemoized}: any) => {
+      if (transitionState.inTransition) {
+        let parsed: [TransitionEntry, TransitionEntry];
+        if (style && style.transition) {
+          parsed = parseTransition(style.transition);
+        } else {
+          const node = getDOMNode();
+          node.className = className;
+          parsed = parseComputedTransitionMemoized(node);
+        }
+        const [{delay: firstPropertyDelay, property: firstProperty}, {property: lastProperty}] = parsed;
+        return {
+          transitionInfo: {
+            firstPropertyDelay,
+            firstProperty,
+            lastProperty,
+          },
+        };
+      }
+      return { transitionInfo: {} };
+    }),
+    integrate<any>("transitionInfo"),
+  );