feat(factory): Simplify API for v2 Alpha (#14)

Simplify the factory function signature, and ability to delay transitions

Author: Setsun

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-transition-factory",
-  "version": "1.1.0",
+  "version": "2.0.0-alpha.1",
   "description": "Simple transition / animation component creation for React",
   "license": "MIT",
   "repository": {

src/factory/index.js

@@ -34,91 +34,87 @@ const getStyleString = (
     ? `${currentStyle} ${style}`
     : style;
 
-const transitionFactory = (
-  transitionConfigs: Array<TransitionConfig>,
-  staticStyles?: Object,
-  defaultProps?: TransitionProps
-) => {
+const transitionFactory = (...args: Array<any>) => {
+  const transitions: Array<TransitionConfig> = [...args];
+
   return class extends React.Component<TransitionProps> {
+    static transitions = transitions;
+
     static defaultProps = {
       timeout: 300,
+      delay: 0,
       easing: 'ease-in-out',
-      ...defaultProps,
     };
 
-    constructor(props: TransitionProps) {
-      super(props);
-      const { timeout, easing, start, end } = props;
-
-      // warm up cache
-      this.getFinalStyle('entering', timeout, easing, start, end);
-      this.getFinalStyle('entered', timeout, easing, start, end);
-      this.getFinalStyle('exiting', timeout, easing, start, end);
-      this.getFinalStyle('exited', timeout, easing, start, end);
-    }
-
-    getGlobalTimeout = naiveMemoize((timeout: number): number => {
-      return Array.isArray(timeout) ? Math.max(...timeout) : timeout;
-    });
+    getGlobalTimeout = naiveMemoize(
+      (timeout: number, delay: number): number =>
+        (Array.isArray(timeout) ? Math.max(...timeout) : timeout) +
+        (Array.isArray(delay) ? Math.max(...delay) : delay)
+    );
 
-    getTransitionProperty = (timeout: number, easing: string): string => {
-      return transitionConfigs
-        .map((config, index) => {
+    getTransitionProperty = (
+      timeout: number,
+      delay: number,
+      easing: string
+    ): string => {
+      return transitions
+        .map((transition, index) => {
           const timeoutVal = getPrimitiveValue(timeout, index);
+          const delayVal = getPrimitiveValue(delay, index);
           const easingVal = getPrimitiveValue(easing, index);
-          return `${config.transition} ${timeoutVal}ms ${easingVal}`;
+          return `${
+            transition.transition
+          } ${timeoutVal}ms ${easingVal} ${delayVal}ms`;
         })
         .join(',');
     };
 
     getDefaultStyle = (
       timeout: number,
+      delay: number,
       easing: string,
       start: ArrayOrValue
     ): Object => {
       return {
-        transition: this.getTransitionProperty(timeout, easing),
-        ...(this.props.staticStyles || staticStyles),
-        ...transitionConfigs.reduce((style, config, index) => {
+        transition: this.getTransitionProperty(timeout, delay, easing),
+        ...transitions.reduce((style, transition, index) => {
           const startVal = getPrimitiveValue(start, index);
-          const transitionName = camelCase(config.transition);
+          const transitionName = camelCase(transition.transition);
 
           style[transitionName] = getStyleString(
             transitionName,
             style[transitionName],
-            config.getStartStyle(startVal)
+            transition.getStartStyle(startVal)
           );
           return style;
         }, {}),
       };
     };
 
     getTransitionStates = (
-      timeout: number,
-      easing: string,
       start: ArrayOrValue,
       end: ArrayOrValue
     ): TransitionStates => {
-      return transitionConfigs.reduce(
-        (styles, config, index) => {
+      return transitions.reduce(
+        (styles, transition, index) => {
           const startVal = getPrimitiveValue(start, index);
           const endVal = getPrimitiveValue(end, index);
-          const transitionName = camelCase(config.transition);
+          const transitionName = camelCase(transition.transition);
 
           styles.entering[transitionName] = getStyleString(
             transitionName,
             styles.entering[transitionName],
-            config.getStartStyle(startVal)
+            transition.getStartStyle(startVal)
           );
           styles.entered[transitionName] = getStyleString(
             transitionName,
             styles.entered[transitionName],
-            config.getEndStyle(endVal)
+            transition.getEndStyle(endVal)
           );
           styles.exiting[transitionName] = getStyleString(
             transitionName,
             styles.exiting[transitionName],
-            config.getStartStyle(startVal)
+            transition.getStartStyle(startVal)
           );
           styles.exited[transitionName] = styles.entering[transitionName];
           return styles;
@@ -136,33 +132,43 @@ const transitionFactory = (
       (
         state: string,
         timeout: number,
+        delay: number,
         easing: string,
         start: ArrayOrValue,
         end: ArrayOrValue
       ): Object => {
         return {
-          ...this.getDefaultStyle(timeout, easing, start),
-          ...this.getTransitionStates(timeout, easing, start, end)[state],
+          ...this.getDefaultStyle(timeout, delay, easing, start),
+          ...this.getTransitionStates(start, end)[state],
         };
       }
     );
 
     render() {
-      const { children, timeout, easing, start, end, ...rest } = this.props;
+      const {
+        children,
+        timeout,
+        delay,
+        easing,
+        start,
+        end,
+        ...rest
+      } = this.props;
 
       return (
         <Transition
           in
           appear
           mountOnEnter
           unmountOnExit
-          timeout={this.getGlobalTimeout(timeout)}
+          timeout={this.getGlobalTimeout(timeout, delay)}
           {...rest}
         >
           {(state, childProps) => {
             const style = this.getFinalStyle(
               state,
               timeout,
+              delay,
               easing,
               start,
               end

src/factory/spec/transitionFactory.spec.js

@@ -20,9 +20,9 @@ export type TransitionConfig = {
 
 export type TransitionProps = {
   children: Function | Node,
-  staticStyles?: Object,
+  timeout: Array<number | { enter?: number, exit?: number }> | number,
+  delay: Array<number | { enter?: number, exit?: number }> | number,
+  easing: ArrayOrString,
   start?: ArrayOrValue,
   end?: ArrayOrValue,
-  timeout: ArrayOrNumber,
-  easing: ArrayOrString,
 };

src/types/index.js

@@ -5,43 +5,39 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import FadeTransition from '../src/components/FadeTransition';
-import FlipTransition from '../src/components/FlipTransition';
-import ExpandTransition from '../src/components/ExpandTransition';
-import ScaleTransition from '../src/components/ScaleTransition';
-import SlideTransition from '../src/components/SlideTransition';
-import RotateTransition from '../src/components/RotateTransition';
-
 import TransitionGroupDecorator from './decorators/TransitionGroupDecorator';
 import KatPersona from './components/KatPersona';
 import WarningMessage from './components/WarningMessage';
 
 import './index.css';
 import transitionFactory from '../src/factory';
-import { opacity, translate, rotate, scale } from '../src/presets/index';
+import {
+  opacity,
+  translate,
+  rotate,
+  rotate3d,
+  scale,
+} from '../src/presets/index';
+
+const FadeTransition = transitionFactory(opacity);
+const SlideTransition = transitionFactory(translate.top);
+const ExpandTransition = transitionFactory(scale.vertical);
+const FlipTransition = transitionFactory(rotate3d.top);
+const RotateTransition = transitionFactory(rotate);
+const ScaleTransition = transitionFactory(scale.all);
 
-const BatmanWipeTransition = transitionFactory([opacity, rotate, scale.all]);
+const BatmanWipeTransition = transitionFactory(opacity, rotate, scale.all);
 
-const SwipeInTransition = transitionFactory(
-  [
-    {
-      transition: 'max-width',
-      getStartStyle: () => 0,
-      getEndStyle: () => 400,
-    },
-  ],
-  {
-    overflow: 'hidden',
-  }
-);
+const SwipeInTransition = transitionFactory({
+  transition: 'max-width',
+  getStartStyle: () => 0,
+  getEndStyle: () => 400,
+});
 
 storiesOf('Standard Transitions', module)
   .addDecorator(TransitionGroupDecorator)
   .add('Fade', () => (
-    <FadeTransition
-      onEnter={(...args) => console.log(args)}
-      transitionId="fade-transition"
-    >
+    <FadeTransition onEnter={(...args) => console.log(args)} delay={1000}>
       <KatPersona />
     </FadeTransition>
   ))