fix(transform components): Refactor FadeTransform and allow entering and exiting for finer control

FadeTransform needs different configurations than FadeInOut for each status. Spitting into its own
code for now, needs possible refactor

Author: Chris Johnson

src/animations/FadeTransform/index.jsx

@@ -1,29 +1,57 @@
 import React from 'react';
 import { node, string } from 'prop-types';
+import { Transition } from 'react-transition-group';
 import {
     defaultAnimationProps,
     getInlineStyles,
     getTimeoutValue,
 } from 'utilities';
 
-import FadeInOut from '../FadeInOut';
-import TweenTransform from '../TweenTransform';
+const statusStyles = {
+    entered: {
+        opacity: 1,
+    },
+    entering: {
+        opacity: 1,
+    },
+    exited: {
+        opacity: 0,
+    },
+    exiting: {
+        opacity: 0,
+    },
+};
+
+const FadeTransform = ({
+    children,
+    enter,
+    exit,
+    exiting,
+    entering,
+    ...props
+}) => {
+    const pos = {
+        entering: entering || enter,
+        entered: enter,
+        exiting: exiting || exit,
+        exited: exit,
+    };
 
-const FadeTransform = ({ children, ...props }) => {
     return (
-        <TweenTransform
-            timeout={getTimeoutValue(props)}
-            {...props}
-            style={getInlineStyles(props)}
-        >
-            <FadeInOut
-                timeout={getTimeoutValue(props)}
-                {...props}
-                style={getInlineStyles(props)}
-            >
-                {children}
-            </FadeInOut>
-        </TweenTransform>
+        <Transition timeout={getTimeoutValue(props)} {...props}>
+            {status => (
+                <div
+                    style={{
+                        ...getInlineStyles(props),
+                        ...statusStyles[status],
+                        transform: pos[status],
+                        transitionProperty: 'transform, opacity',
+                    }}
+                >
+                    {children}
+                </div>
+            )}
+        </Transition>
     );
 };
 

src/animations/TweenTransform/index.jsx

@@ -8,11 +8,18 @@ import {
     getTimeoutValue,
 } from 'utilities';
 
-const TweenTransform = ({ children, enter, exit, ...props }) => {
+const TweenTransform = ({
+    children,
+    enter,
+    exit,
+    entering,
+    exiting,
+    ...props
+}) => {
     const pos = {
-        entering: enter,
+        entering: entering || enter,
         entered: enter,
-        exiting: exit,
+        exiting: exiting || exit,
         exited: exit,
     };