From b471adb0ef64266a03f618c752b9c09226062da2 Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@wwahammy.com>
Date: Thu, 14 Feb 2019 16:16:26 -0600
Subject: [PATCH] Add Javascript animation to modal opening and closing

---
 javascripts/src/components/common/Modal.tsx   |  70 ++++++++---
 .../common/__snapshots__/Modal.spec.tsx.snap  | 114 ++++++++++++++----
 2 files changed, 146 insertions(+), 38 deletions(-)

diff --git a/javascripts/src/components/common/Modal.tsx b/javascripts/src/components/common/Modal.tsx
index 679c8728..819915d3 100644
--- a/javascripts/src/components/common/Modal.tsx
+++ b/javascripts/src/components/common/Modal.tsx
@@ -2,37 +2,73 @@
 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}
-                 onExit={this.props.onClose} dialogStyle={this.props.dialogStyle}>
-        <header className='modal-header'>
-          <h4 className='modal-header-title'>{this.props.titleText}</h4>
-        </header>
-        <div className="modal-body">
-          {this.props.childGenerator()}
-        </div>
-      </AriaModal> : false;
 
-      return modal
+    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>
+      </header>
+      <div className="modal-body">
+        {this.props.childGenerator()}
+      </div>
+    </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)
diff --git a/javascripts/src/components/common/__snapshots__/Modal.spec.tsx.snap b/javascripts/src/components/common/__snapshots__/Modal.spec.tsx.snap
index bf79ae7c..178f305f 100644
--- a/javascripts/src/components/common/__snapshots__/Modal.spec.tsx.snap
+++ b/javascripts/src/components/common/__snapshots__/Modal.spec.tsx.snap
@@ -1,32 +1,104 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Modal active modal displays 1`] = `
-<Displaced
-  dialogStyle={
+<VelocityTransitionGroup
+  enter={
     Object {
-      "minWidth": "768px",
+      "animation": "fadeIn",
+      "style": Object {
+        "left": "0px",
+        "position": "fixed",
+        "top": "0px",
+        "zIndex": "5000",
+      },
     }
   }
-  focusDialog={true}
-  mounted={true}
-  onExit={[Function]}
-  titleText="title text"
+  enterHideStyle={
+    Object {
+      "display": "none",
+    }
+  }
+  enterShowStyle={
+    Object {
+      "display": "",
+    }
+  }
+  leave={
+    Object {
+      "animation": "fadeOut",
+      "style": Object {
+        "left": "0px",
+        "position": "fixed",
+        "top": "0px",
+        "zIndex": "5000",
+      },
+    }
+  }
+  runOnMount={true}
 >
-  <header
-    className="modal-header"
+  <Displaced
+    dialogStyle={
+      Object {
+        "minWidth": "768px",
+      }
+    }
+    focusDialog={true}
+    mounted={true}
+    onExit={[Function]}
+    titleText="title text"
   >
-    <h4
-      className="modal-header-title"
+    <header
+      className="modal-header"
     >
-      title text
-    </h4>
-  </header>
-  <div
-    className="modal-body"
-  >
-    <div />
-  </div>
-</Displaced>
+      <h4
+        className="modal-header-title"
+      >
+        title text
+      </h4>
+    </header>
+    <div
+      className="modal-body"
+    >
+      <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}
+/>
+`;