Add Javascript animation to modal opening and closing

javascripts/src/components/common/Modal.tsx

@@ -2,26 +2,28 @@
 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
-  focusDialog?:boolean
-  dialogStyle?:any
-  childGenerator:() => any
+  focusDialog?: boolean
+  dialogStyle?: any
+  childGenerator: () => any
 }
 
 class Modal extends React.Component<ModalProps, {}> {
 
   static defaultProps = {
-    dialogStyle: {minWidth:'768px'}
+    dialogStyle: { minWidth: '768px' }
   }
 
   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,7 +1,42 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Modal active modal displays 1`] = `
-<Displaced
+<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 {
         "minWidth": "768px",
@@ -11,7 +46,7 @@ exports[`Modal active modal displays 1`] = `
     mounted={true}
     onExit={[Function]}
     titleText="title text"
->
+  >
     <header
       className="modal-header"
     >
@@ -26,7 +61,44 @@ exports[`Modal active modal displays 1`] = `
     >
       <div />
     </div>
-</Displaced>
+  </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}
+/>
+`;