Rewrite with react-assemble

Author: cvle

karma.conf.js

@@ -47,6 +47,9 @@ module.exports = (config) => {
               sourceMap: true,
               module: "commonjs",
             },
+            exclude: [
+              /node_modules/,
+            ],
           },
           {
             enforce: "post",

package.json

@@ -55,7 +55,7 @@
     "@types/react": "^0.14.43",
     "@types/react-addons-transition-group": "^0.14.17",
     "@types/sinon": "^1.16.31",
-    "awesome-typescript-loader": "^3.0.0-beta.17",
+    "awesome-typescript-loader": "^3.0.0-beta.18",
     "cash-rm": "^0.2.0",
     "chai": "^3.5.0",
     "coveralls": "^2.11.14",

src/composables/mergeWithStyle.spec.tsx

@@ -0,0 +1,31 @@
+/**
+ * @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 { mergeWithStyle } from "./mergeWithStyle";
+import { Component } from "../../test/component";
+
+describe("mergeWithStyle", () => {
+  it("should merge style with transitionStyle", () => {
+    const input = {
+      style: { top: 0, left: 2 },
+      transitionStyle: { left: 10 },
+    };
+    const output = {
+      style: { top: 0, left: 10 },
+    };
+    const composable = mergeWithStyle;
+    const Assembly = assemble<any, any>(composable)(Component);
+    const wrapper = shallow(<Assembly {...input} />);
+    assert.deepEqual(wrapper.props(), output);
+  });
+});

src/composables/mergeWithStyle.tsx

@@ -0,0 +1,14 @@
+/**
+ * @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, omitProps } from "react-assemble";
+
+export const mergeWithStyle = combine(
+  withProps<any, any>(({ transitionStyle, style }: any) => ({ style: { ...style, ...transitionStyle } })),
+  omitProps<any>("transitionStyle"),
+);

src/composables/withTransitionInfo.spec.tsx

@@ -0,0 +1,54 @@
+/**
+ * @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 { withTransitionInfo } from "./withTransitionInfo";
+import { Component } from "../../test/component";
+
+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);
+  });
+
+  it("should pass transitionInfo for absent transition", () => {
+    const input = {
+      style: {},
+    };
+    const output = {
+      ...input,
+      transitionInfo: {
+        inTransition: false,
+      },
+    };
+    const composable = withTransitionInfo;
+    const Assembly = assemble<any, any>(composable)(Component);
+    const wrapper = shallow(<Assembly {...input} />);
+    assert.deepEqual(wrapper.props(), output);
+  });
+});

src/composables/withTransitionInfo.ts

@@ -0,0 +1,28 @@
+/**
+ * @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 { withProps } from "react-assemble";
+
+import parseTransition from "../utils/parseTransition";
+
+export const withTransitionInfo =
+  withProps<any, any>(({style}: any) => {
+    if (style.transition) {
+      const [{delay: firstPropertyDelay, property: firstProperty}, {property: lastProperty}] =
+        parseTransition(style.transition);
+      return {
+        transitionInfo: {
+          firstPropertyDelay,
+          firstProperty,
+          lastProperty,
+          inTransition: true,
+        },
+      };
+    }
+    return { transitionInfo: { inTransition: false } };
+  });

src/composables/withTransitionObserver.spec.tsx

@@ -0,0 +1,136 @@
+/**
+ * @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, ShallowWrapper } from "enzyme";
+import { spy } from "sinon";
+import { assemble } from "react-assemble";
+
+import { withTransitionObserver } from "./withTransitionObserver";
+import { Component } from "../../test/component";
+
+describe("withTransitionObserver", () => {
+  const composable = withTransitionObserver;
+  const Assembly = assemble<any, any>(composable)(Component);
+  const transitionInfo = {
+    firstProperty: "width",
+    lastProperty: "height",
+    inTransition: true,
+  };
+  let wrapper: ShallowWrapper<any, any>;
+  let handlers = {
+    onTransitionStart: spy(),
+    onTransitionEnd: spy(),
+    onTransitionBegin: spy(),
+    onTransitionComplete: spy(),
+  };
+
+  beforeEach(() => {
+    const props = {
+      transitionInfo,
+      ...handlers,
+    };
+    wrapper = shallow(<Assembly {...props} />);
+    Object.keys(handlers).forEach((s) => (handlers as any)[s].reset());
+  });
+
+  describe("onTransitionBegin", () => {
+    it("should not call onTransitionBegin yet", () => {
+      assert.isTrue(handlers.onTransitionBegin.notCalled);
+    });
+
+    it("should cal onTransitionStart", () => {
+      const event = {
+        target: "descendant",
+      };
+      wrapper.simulate("transitionStart", event);
+      assert.isTrue(handlers.onTransitionStart.calledWith(event));
+    });
+
+    it("should not call onTransitionBegin when origin from descendants", () => {
+      const event = {
+        target: "descendant",
+      };
+      wrapper.simulate("transitionStart", event);
+      assert.isTrue(handlers.onTransitionBegin.notCalled);
+    });
+
+    it("should not call onTransitionBegin when propertyName mismatches", () => {
+      const event = {
+        propertyName: "foo",
+      };
+      wrapper.simulate("transitionStart", event);
+      assert.isTrue(handlers.onTransitionBegin.notCalled);
+    });
+
+    it("should call onTransitionBegin", () => {
+      const event = {
+        propertyName: "width",
+      };
+      wrapper.simulate("transitionStart", event);
+      assert.isTrue(handlers.onTransitionBegin.called);
+    });
+
+    it("should not call onTransitionBegin when inTransition=false", () => {
+      const event = {
+        propertyName: "width",
+      };
+      wrapper.setProps({ transitionInfo: { inTransition: false } });
+      wrapper.simulate("transitionStart", event);
+      assert.isTrue(handlers.onTransitionBegin.notCalled);
+    });
+  });
+
+  describe("onTransitionComplete", () => {
+    it("should not call onTransitionComplete yet", () => {
+      assert.isTrue(handlers.onTransitionComplete.notCalled);
+    });
+
+    it("should cal onTransitionEnd", () => {
+      const event = {
+        target: "descendant",
+      };
+      wrapper.simulate("transitionEnd", event);
+      assert.isTrue(handlers.onTransitionEnd.calledWith(event));
+    });
+
+    it("should not call onTransitionComplete when origin from descendants", () => {
+      const event = {
+        target: "descendant",
+      };
+      wrapper.simulate("transitionEnd", event);
+      assert.isTrue(handlers.onTransitionComplete.notCalled);
+    });
+
+    it("should not call onTransitionComplete when propertyName mismatches", () => {
+      const event = {
+        propertyName: "foo",
+      };
+      wrapper.simulate("transitionEnd", event);
+      assert.isTrue(handlers.onTransitionComplete.notCalled);
+    });
+
+    it("should call onTransitionComplete", () => {
+      const event = {
+        propertyName: "height",
+      };
+      wrapper.simulate("transitionEnd", event);
+      assert.isTrue(handlers.onTransitionComplete.called);
+    });
+
+    it("should not call onTransitionComplete when inTransition=false", () => {
+      const event = {
+        propertyName: "height",
+      };
+      wrapper.setProps({ transitionInfo: { inTransition: false } });
+      wrapper.simulate("transitionEnd", event);
+      assert.isTrue(handlers.onTransitionComplete.notCalled);
+    });
+  });
+});

src/composables/withTransitionObserver.tsx

@@ -0,0 +1,36 @@
+/**
+ * @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 { withHandlers } from "react-assemble";
+
+import matchTransitionProperty from "../utils/matchTransitionProperty";
+
+export const withTransitionObserver =
+  withHandlers<any, any>({
+    onTransitionStart: (
+      {transitionInfo: { firstProperty, inTransition }, onTransitionStart, onTransitionBegin}: any,
+    ) => (e: TransitionEvent) => {
+      if (onTransitionStart) { onTransitionStart(e); }
+      if (!inTransition || e.target !== e.currentTarget ||
+        !matchTransitionProperty(e.propertyName, firstProperty)) {
+        return;
+      }
+      onTransitionBegin();
+    },
+    onTransitionEnd: (
+      {transitionInfo: {lastProperty, inTransition}, onTransitionEnd, onTransitionComplete}: any,
+    ) => (e: TransitionEvent) => {
+      if (onTransitionEnd) { onTransitionEnd(e); }
+      if (!inTransition || e.target !== e.currentTarget ||
+        !matchTransitionProperty(e.propertyName, lastProperty)) {
+        return;
+      }
+      onTransitionComplete();
+    },
+  });