From 285e1e98accb700b94ba411cce6a83c889d785a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 22 Sep 2018 14:29:15 +0100
Subject: [PATCH] feat(ui): add a dropdown animation

---
 .../Animations/DropdownSlide/index.css        | 33 +++++++++++++++++++
 .../Animations/DropdownSlide/index.js         | 24 ++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 ui/src/Components/Animations/DropdownSlide/index.css
 create mode 100644 ui/src/Components/Animations/DropdownSlide/index.js

diff --git a/ui/src/Components/Animations/DropdownSlide/index.css b/ui/src/Components/Animations/DropdownSlide/index.css
new file mode 100644
index 000000000..14180e18f
--- /dev/null
+++ b/ui/src/Components/Animations/DropdownSlide/index.css
@@ -0,0 +1,33 @@
+.components-animation-slide-enter,
+.components-animation-slide-appear {
+  opacity: 0.01;
+  overflow: hidden;
+  max-height: 0px;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+.components-animation-slide-enter-active,
+.components-animation-slide-appear-active {
+  max-height: 500px; /* can't use auto here */
+  opacity: 1;
+  transition-property: max-height, opacity;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-out;
+}
+
+.components-animation-slide-exit {
+  max-height: 500px; /* can't use auto here */
+  opacity: 1;
+}
+.components-animation-slide-exit-active {
+  opacity: 0.01;
+  overflow: hidden;
+  max-height: 0px;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  transition-property: max-height, opacity;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-out;
+}
diff --git a/ui/src/Components/Animations/DropdownSlide/index.js b/ui/src/Components/Animations/DropdownSlide/index.js
new file mode 100644
index 000000000..549b849af
--- /dev/null
+++ b/ui/src/Components/Animations/DropdownSlide/index.js
@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { CSSTransition } from "react-transition-group";
+
+import "./index.css";
+
+const DropdownSlide = ({ children, duration, ...props }) => (
+  <CSSTransition
+    in={true}
+    classNames="components-animation-slide"
+    timeout={150}
+    appear={true}
+    exit={true}
+    {...props}
+  >
+    {children}
+  </CSSTransition>
+);
+DropdownSlide.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export { DropdownSlide };