Fix direction of leaving item (mui#873)

Fix incorrect leaving direction of Calendar animation
mnajdova · Jan 22, 2019 · 3070516 · 3070516
1 parent 659f981
commit 3070516
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 29 deletions.
diff --git a/lib/.size-snapshot.json b/lib/.size-snapshot.json
@@ -1,26 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 105952,
-    "minified": 61625,
-    "gzipped": 14531,
+    "bundled": 106138,
+    "minified": 61706,
+    "gzipped": 14562,
     "treeshaked": {
       "rollup": {
-        "code": 48350,
-        "import_statements": 1294
+        "code": 48427,
+        "import_statements": 1312
       },
       "webpack": {
-        "code": 55301
+        "code": 55379
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 214636,
-    "minified": 93497,
-    "gzipped": 24654
+    "bundled": 214832,
+    "minified": 93567,
+    "gzipped": 24671
   },
   "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 194864,
-    "minified": 87812,
-    "gzipped": 23434
+    "bundled": 195060,
+    "minified": 87882,
+    "gzipped": 23459
   }
 }
diff --git a/lib/src/DatePicker/components/SlideTransition.tsx b/lib/src/DatePicker/components/SlideTransition.tsx
@@ -22,23 +22,33 @@ const SlideTransition: React.SFC<SlideTransitionProps> = ({
   children,
   transKey,
   slideDirection,
-}) => (
-  <TransitionGroup className={clsx(classes.transitionContainer, className)}>
-    <CSSTransition
-      key={transKey}
-      mountOnEnter
-      unmountOnExit
-      timeout={animationDuration}
-      children={children}
-      classNames={{
-        enter: classes[`slideEnter-${slideDirection}`],
-        enterActive: classes.slideEnterActive,
-        exit: classes.slideExit,
-        exitActive: classes[`slideExitActiveLeft-${slideDirection}`],
-      }}
-    />
-  </TransitionGroup>
-);
+}) => {
+  const transitionClasses = {
+    enter: classes['slideEnter-' + slideDirection],
+    enterActive: classes.slideEnterActive,
+    exit: classes.slideExit,
+    exitActive: classes['slideExitActiveLeft-' + slideDirection],
+  };
+  return (
+    <TransitionGroup
+      className={clsx(classes.transitionContainer, className)}
+      childFactory={element =>
+        React.cloneElement(element, {
+          classNames: transitionClasses,
+        })
+      }
+    >
+      <CSSTransition
+        key={transKey}
+        mountOnEnter
+        unmountOnExit
+        timeout={animationDuration}
+        children={children}
+        classNames={transitionClasses}
+      />
+    </TransitionGroup>
+  );
+};
 
 (SlideTransition as any).propTypes = {
   children: PropTypes.node.isRequired,