import PropTypes from "prop-types";
import React from "react";
import TransitionGroup from "react-transition-group/TransitionGroup";
import CSSAnimationGroupChild from "./CSSAnimationGroupChild";
import normalizeTime from "./utils/normalizeTime";
import { directionType, fillModeType, timeType } from "./utils/propTypes";

const CSSAnimationGroup = ({
  enterAnimation,
  enterDelay,
  enterDirection,
  enterDuration,
  enterFillMode,
  enterIterationCount,
  enterTimingFunction,
  leaveAnimation,
  leaveDelay,
  leaveDirection,
  leaveDuration,
  leaveFillMode,
  leaveIterationCount,
  leaveTimingFunction,
  runOnMount,
  ...restProps
}) =>
  React.createElement(TransitionGroup, {
    ...restProps,
    childFactory: child =>
      React.createElement(
        CSSAnimationGroupChild,
        {
          enterAnimation: {
            delay: normalizeTime(enterDelay),
            direction: enterDirection,
            duration: normalizeTime(enterDuration),
            fillMode: enterFillMode,
            iterationCount: enterIterationCount,
            name: enterAnimation,
            timingFunction: enterTimingFunction
          },
          leaveAnimation: {
            delay: normalizeTime(leaveDelay),
            direction: leaveDirection,
            duration: normalizeTime(leaveDuration),
            fillMode: leaveFillMode,
            iterationCount: leaveIterationCount,
            name: leaveAnimation,
            timingFunction: leaveTimingFunction
          },
          runOnMount
        },
        child
      )
  });

CSSAnimationGroup.propTypes = {
  enterAnimation: PropTypes.string,
  enterDelay: timeType,
  enterDirection: directionType,
  enterDuration: timeType,
  enterFillMode: fillModeType,
  enterIterationCount: PropTypes.number,
  enterTimingFunction: PropTypes.string,
  leaveAnimation: PropTypes.string,
  leaveDelay: timeType,
  leaveDirection: directionType,
  leaveDuration: timeType,
  leaveFillMode: fillModeType,
  leaveIterationCount: PropTypes.number,
  leaveTimingFunction: PropTypes.string,
  runOnMount: PropTypes.bool
};

CSSAnimationGroup.defaultProps = {
  enterDelay: 0,
  enterDirection: "normal",
  enterDuration: 0,
  enterFillMode: "none",
  enterIterationCount: 1,
  enterTimingFunction: "ease",
  leaveDelay: 0,
  leaveDirection: "normal",
  leaveDuration: 0,
  leaveFillMode: "none",
  leaveIterationCount: 1,
  leaveTimingFunction: "ease",
  runOnMount: false
};

export default CSSAnimationGroup;

@@ -1119,32 +1119,33 @@
 erTimingFunction
+,
 %0A          %7D,%0A  
@@ -1474,16 +1474,17 @@
 Function
+,
 %0A       
@@ -1509,16 +1509,17 @@
 nOnMount
+,
 %0A       
@@ -1543,16 +1543,17 @@
 %0A      )
+,
 %0A  %7D);%0A%0A
@@ -2078,16 +2078,17 @@
 pes.bool
+,
 %0A%7D;%0A%0ACSS
@@ -2115,24 +2115,46 @@
 ltProps = %7B%0A
+  enterAnimation: %22%22,%0A
   enterDelay
@@ -2284,24 +2284,46 @@
 on: %22ease%22,%0A
+  leaveAnimation: %22%22,%0A
   leaveDelay
@@ -2476,16 +2476,17 @@
 t: false
+,
 %0A%7D;%0A%0Aexp

Add defaults for enterAnimation and leaveAnimation props.