Merge pull request #162 from houdiniproject/velocity

Add Velocity for animations

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}
+/>
+`;

package.json

@@ -48,8 +48,8 @@
     "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.10",
     "cssnano": "3.10.0",
-    "enzyme": "^3.4.2",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.3",
     "exports-loader": "^0.7.0",
     "expose-loader": "^0.7.5",
@@ -61,7 +61,7 @@
     "jsdom": "^11.10.0",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
-    "lodash": "^4.17.5",
+    "lodash": "^4.17.11",
     "node-sass": "^4.11.0",
     "phantomjs-prebuilt": "^2.1.16",
     "postcss-cssnext": "^2.9.0",
@@ -83,8 +83,9 @@
     "webpack-sweet-entry": "^1.1.4"
   },
   "dependencies": {
+    "@types/velocity-animate": "^1.2.33",
     "attr-binder": "0.3.1",
-    "aws-sdk": "2.2.39",
+    "aws-sdk": "^2.402.0",
     "chart.js": "2.1.4",
     "color": "0.11.3",
     "colors": "1.1.2",
@@ -146,6 +147,7 @@
     "uuid": "2.0.2",
     "validator": "^9.4.1",
     "vdom-thunk": "3.0.0",
+    "velocity-react": "^1.4.1",
     "view-script": "0.3.6",
     "virtual-dom": "2.1.1",
     "vvvview": "0.4.3"

types/velocity-react/index.d.ts

@@ -0,0 +1,38 @@
+// License: LGPL-3.0-or-later
+declare module "velocity-react"
+import * as React from 'react'
+import * as Velocity from 'velocity-animate'
+import 'velocity-animate/velocity.ui'
+
+type Animation =  object|string
+type TargetQuerySelector = "children" | string
+interface VelocityComponentProps
+{
+  animation: Animation
+  runOnMount?: boolean
+  targetQuerySelector?: TargetQuerySelector
+
+}
+
+
+export declare class VelocityComponent extends React.Component<VelocityComponentProps, {}>
+{
+    runAnimation():void
+}
+
+interface VelocityTransitionGroupProps {
+    enter: Animation
+    leave?: Animation
+    runOnMount?: boolean
+    style?: CSSProperties
+}
+
+export declare class VelocityTransitionGroup extends React.Component<VelocityTransitionGroupProps, {}> {
+    static disabledForTest: boolean
+}
+
+
+export declare namespace velocityHelpers {
+    declare function registerEffect(animation:Animation)
+    declare function registerEffect(suffix:string, animation:Animation)
+}