Support separate delays

Author: cvle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-css-transition",
-  "version": "0.3.0-beta.2",
+  "version": "0.4.0-beta",
   "description": "CSS Transition Component for React",
   "homepage": "https://github.com/wikiwi/react-css-transition",
   "repository": {

src/csstransition.tsx

@@ -16,16 +16,18 @@ import {
 
 import { resolveTransit } from "./transit";
 import { TransitionObserver } from "./transitionobserver";
+import { TransitionDelay, getEnterDelay, getLeaveDelay } from "./utils";
 
 const TICK = 17;
 
+export type CSSTransitionDelay = TransitionDelay;
 export type CSSTransitionEventHandler = () => void;
 
 export interface CSSTransitionProps
   extends HTMLAttributes<any> {
   active?: boolean;
   transitionAppear?: boolean;
-  transitionDelay?: number;
+  transitionDelay?: CSSTransitionDelay;
   onTransitionComplete?: CSSTransitionEventHandler;
   component?: string | ComponentClass<any> | StatelessComponent<any>;
   children?: ReactNode;
@@ -84,22 +86,22 @@ const transitToActiveAppearingState = (props: CSSTransitionProps) => ({
 
 const transitToActiveRunningState = (props: CSSTransitionProps) => ({
   id: StateID.TransitToActiveRunning,
-  style: { ...props.style, ...resolveTransit(props.enterStyle, props.transitionDelay) },
+  style: { ...props.style, ...resolveTransit(props.enterStyle, getEnterDelay(props.transitionDelay)) },
 });
 
 const transitToActiveStartedState = (props: CSSTransitionProps) => ({
   id: StateID.TransitToActiveStarted,
-  style: { ...props.style, ...resolveTransit(props.enterStyle, props.transitionDelay) },
+  style: { ...props.style, ...resolveTransit(props.enterStyle, getEnterDelay(props.transitionDelay)) },
 });
 
 const transitToDefaultRunningState = (props: CSSTransitionProps) => ({
   id: StateID.TransitToDefaultRunning,
-  style: { ...props.style, ...resolveTransit(props.leaveStyle, props.transitionDelay) },
+  style: { ...props.style, ...resolveTransit(props.leaveStyle, getLeaveDelay(props.transitionDelay)) },
 });
 
 const transitToDefaultStartedState = (props: CSSTransitionProps) => ({
   id: StateID.TransitToDefaultStarted,
-  style: { ...props.style, ...resolveTransit(props.leaveStyle, props.transitionDelay) },
+  style: { ...props.style, ...resolveTransit(props.leaveStyle, getLeaveDelay(props.transitionDelay)) },
 });
 
 export class CSSTransition extends Component<CSSTransitionProps, CSSTransitionState> {

src/index.ts

@@ -6,6 +6,6 @@
  * of the MIT license. See the LICENSE file for details.
  */
 
-export { CSSTransition, CSSTransitionProps, CSSTransitionEventHandler } from "./csstransition";
+export { CSSTransition, CSSTransitionProps, CSSTransitionEventHandler, CSSTransitionDelay } from "./csstransition";
 export { CSSTransitionGroup, CSSTransitionGroupProps } from "./csstransitiongroup";
 export { transit } from "./transit";

src/utils.spec.ts

@@ -12,6 +12,7 @@ import {
   convertToCSSPrefix, removeVendorPrefix,
   matchTransitionProperty, parseDuration,
   parseTransition,
+  getEnterDelay, getLeaveDelay,
 } from "./utils";
 
 describe("utils.ts", () => {
@@ -139,4 +140,24 @@ describe("utils.ts", () => {
       cases.forEach((c) => assert.deepEqual(parseTransition(c[0] as string), c[1]));
     });
   });
+
+  describe("getEnterDelay", () => {
+    it("should process number", () => {
+      assert.strictEqual(getEnterDelay(200), 200);
+    });
+
+    it("should process object", () => {
+      assert.strictEqual(getEnterDelay({ enter: 100 }), 100);
+    });
+  });
+
+  describe("getLeaveDelay", () => {
+    it("should process number", () => {
+      assert.strictEqual(getLeaveDelay(200), 200);
+    });
+
+    it("should process object", () => {
+      assert.strictEqual(getLeaveDelay({ leave: 100 }), 100);
+    });
+  });
 });

src/utils.ts

@@ -67,3 +67,21 @@ export function parseTransition(transition: string): [TransitionEntry, Transitio
   );
   return [firstProperty, lastProperty];
 }
+
+export type TransitionDelay = number | { enter?: number; leave?: number };
+
+export function getEnterDelay(delay: TransitionDelay): number {
+  if (!delay) { return 0; }
+  if (typeof delay === "number") {
+    return delay as number;
+  }
+  return delay.enter;
+}
+
+export function getLeaveDelay(delay: TransitionDelay): number {
+  if (!delay) { return 0; }
+  if (typeof delay === "number") {
+    return delay as number;
+  }
+  return delay.leave;
+}

test/integration/delay.test.tsx

@@ -18,14 +18,14 @@ const TICK = 17;
 
 describe("delay integration test", () => {
   describe("<CSSTransition>", () => {
-    const transitionDelay = 30;
+    const transitionDelay = { enter: 30, leave: 20 };
 
     const activeStyle: CSSProperties = { width: "100px" };
     const defaultStyle: CSSProperties = { width: "50px" };
     const enterStyle: CSSProperties = { width: transit("100px", 150, "ease", 25) };
     const leaveStyle: CSSProperties = { width: transit("50px", 150, "ease", 25) };
     const enterStyleProcessed: CSSProperties = { width: "100px", transition: "width 150ms ease 55ms" };
-    const leaveStyleProcessed: CSSProperties = { width: "50px", transition: "width 150ms ease 55ms" };
+    const leaveStyleProcessed: CSSProperties = { width: "50px", transition: "width 150ms ease 45ms" };
     let getWrapper: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;
     let wrapper: ReactWrapper<any, {}>;
     let target: ReactWrapper<any, {}>;