Merge pull request #162 from houdiniproject/velocity

Add Velocity for animations

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)

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

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)
+}