Add Javascript animation to modal opening and closing

javascripts/src/components/common/Modal.tsx

@@ -2,9 +2,11 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import AriaModal = require('react-aria-modal');
+import { VelocityTransitionGroup } from 'velocity-react';
+import 'velocity-animate';
+import 'velocity-animate/velocity.ui';
 
-export interface ModalProps
+export interface ModalProps {
-{
   onClose?: () => void // if you want your modal to close, this needs to set modalActive to false
   modalActive?: boolean
   titleText?: string
@@ -20,8 +22,8 @@ class Modal extends React.Component<ModalProps, {}> {
   }
 
   render() {
-   const modal = this.props.modalActive ?
+
-      <AriaModal mounted={this.props.modalActive} titleText={this.props.titleText} focusDialog={this.props.focusDialog}
+    const innerModal = this.props.modalActive ? <AriaModal mounted={this.props.modalActive} titleText={this.props.titleText} focusDialog={this.props.focusDialog}
       onExit={this.props.onClose} dialogStyle={this.props.dialogStyle}>
       <header className='modal-header'>
         <h4 className='modal-header-title'>{this.props.titleText}</h4>
@@ -29,10 +31,44 @@ class Modal extends React.Component<ModalProps, {}> {
       <div className="modal-body">
         {this.props.childGenerator()}
       </div>
-      </AriaModal> : false;
+    </AriaModal> : false
+
+    const modal =
+      <VelocityTransitionGroup
+        enter={
+          {
+            animation: 'fadeIn',
+            /* These styles are needed because, for some reason, we're 
+            not able to cover the sidebar otherwise. Why? *shrug*
+            */
+            style: {
+              position: 'fixed',
+              top: '0px',
+              left: '0px',
+              zIndex: '5000'
+            }
+          }
+        }
+
+        leave={
+          {
+            animation: 'fadeOut',
+            style: {
+              position: 'fixed',
+              top: '0px',
+              left: '0px',
+              zIndex: '5000'
+            }
+          }
+        }
+        
+        runOnMount={true}>
+        {innerModal}
+      </VelocityTransitionGroup>;
 
     return modal
   }
+
 }
 
 export default observer(Modal)

javascripts/src/components/common/__snapshots__/Modal.spec.tsx.snap

@@ -1,6 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Modal active modal displays 1`] = `
+<VelocityTransitionGroup
+  enter={
+    Object {
+      "animation": "fadeIn",
+      "style": Object {
+        "left": "0px",
+        "position": "fixed",
+        "top": "0px",
+        "zIndex": "5000",
+      },
+    }
+  }
+  enterHideStyle={
+    Object {
+      "display": "none",
+    }
+  }
+  enterShowStyle={
+    Object {
+      "display": "",
+    }
+  }
+  leave={
+    Object {
+      "animation": "fadeOut",
+      "style": Object {
+        "left": "0px",
+        "position": "fixed",
+        "top": "0px",
+        "zIndex": "5000",
+      },
+    }
+  }
+  runOnMount={true}
+>
   <Displaced
     dialogStyle={
       Object {
@@ -27,6 +62,43 @@ exports[`Modal active modal displays 1`] = `
       <div />
     </div>
   </Displaced>
+</VelocityTransitionGroup>
 `;
 
-exports[`Modal nothing displayed if inactive 1`] = `""`;
+exports[`Modal nothing displayed if inactive 1`] = `
+<VelocityTransitionGroup
+  enter={
+    Object {
+      "animation": "fadeIn",
+      "style": Object {
+        "left": "0px",
+        "position": "fixed",
+        "top": "0px",
+        "zIndex": "5000",
+      },
+    }
+  }
+  enterHideStyle={
+    Object {
+      "display": "none",
+    }
+  }
+  enterShowStyle={
+    Object {
+      "display": "",
+    }
+  }
+  leave={
+    Object {
+      "animation": "fadeOut",
+      "style": Object {
+        "left": "0px",
+        "position": "fixed",
+        "top": "0px",
+        "zIndex": "5000",
+      },
+    }
+  }
+  runOnMount={true}
+/>
+`;