NPO-Accounting/houdini
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Remove Velocity

Browse source
This commit is contained in:
Eric Schultz 2020-04-23 14:06:30 -05:00
parent 4daaeb8c7f
commit cf7eceee13
7 changed files with 424 additions and 664 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
javascripts/src/components/common/Modal.tsx
View file

@ -2,9 +2,6 @@
import * as React from 'react'; import * as React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import AriaModal = require('react-aria-modal'); import AriaModal = require('react-aria-modal');
import { VelocityTransitionGroup } from 'velocity-react';
import 'velocity-animate';
import 'velocity-animate/velocity.ui';
import { DefaultCloseButton } from './DefaultCloseButton'; import { DefaultCloseButton } from './DefaultCloseButton';
import BootstrapWrapper from './BootstrapWrapper'; import BootstrapWrapper from './BootstrapWrapper';
import { Row, Column } from './layout'; import { Row, Column } from './layout';
@ -27,7 +24,7 @@ class Modal extends React.Component<ModalProps, {}> {
} }
render() { render() {
const innerModal = this.props.modalActive ? <AriaModal mounted={this.props.modalActive} titleText={this.props.titleText} focusDialog={this.props.focusDialog} 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}> onExit={this.props.onClose} dialogStyle={this.props.dialogStyle}>
<BootstrapWrapper> <BootstrapWrapper>
<header className='modal-header' style={{ <header className='modal-header' style={{
@ -55,39 +52,6 @@ class Modal extends React.Component<ModalProps, {}> {
</BootstrapWrapper> </BootstrapWrapper>
</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 return modal
} }

5
javascripts/src/components/common/Spinner.tsx
View file

@ -1,7 +1,6 @@
// License: LGPL-3.0-or-later // License: LGPL-3.0-or-later
import { Color } from 'csstype'; import { Color } from 'csstype';
import * as React from 'react'; import * as React from 'react';
import { VelocityComponent } from 'velocity-react';
import ScreenReaderOnlyText from './ScreenReaderOnlyText'; import ScreenReaderOnlyText from './ScreenReaderOnlyText';
export interface SpinnerProps { export interface SpinnerProps {
@ -41,11 +40,9 @@ class Spinner extends React.Component<SpinnerProps, {}> {
} }
render() { render() {
return <VelocityComponent animation={{ rotateZ: 360 }} duration={750} loop={true} easing={'linear'} runOnMount={true}> return <div style={this.generateStyle()} role="status">
<div style={this.generateStyle()} role="status">
<ScreenReaderOnlyText>Loading...</ScreenReaderOnlyText> <ScreenReaderOnlyText>Loading...</ScreenReaderOnlyText>
</div> </div>
</VelocityComponent>;
} }
} }

86
javascripts/src/components/common/__snapshots__/Modal.spec.tsx.snap
View file

@ -14,46 +14,6 @@ exports[`Modal active modal displays matches snapshot 1`] = `
showCloseButton={true} showCloseButton={true}
titleText="title text" titleText="title text"
> >
<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}
>
<TransitionGroup
childFactory={[Function]}
component="div"
>
<div>
<Displaced <Displaced
dialogStyle={ dialogStyle={
Object { Object {
@ -61,11 +21,8 @@ exports[`Modal active modal displays matches snapshot 1`] = `
} }
} }
focusDialog={true} focusDialog={true}
in={true}
key=".0"
mounted={true} mounted={true}
onExit={[Function]} onExit={[Function]}
onExited={[Function]}
titleText="title text" titleText="title text"
> >
<Portal <Portal
@ -168,11 +125,9 @@ exports[`Modal active modal displays matches snapshot 1`] = `
escapeExits={true} escapeExits={true}
focusDialog={true} focusDialog={true}
focusTrapPaused={false} focusTrapPaused={false}
in={true}
includeDefaultStyles={true} includeDefaultStyles={true}
mounted={true} mounted={true}
onExit={[Function]} onExit={[Function]}
onExited={[Function]}
scrollDisabled={true} scrollDisabled={true}
titleText="title text" titleText="title text"
underlayClickExits={true} underlayClickExits={true}
@ -409,46 +364,7 @@ exports[`Modal active modal displays matches snapshot 1`] = `
</Modal> </Modal>
</Portal> </Portal>
</Displaced> </Displaced>
</div>
</TransitionGroup>
</VelocityTransitionGroup>
</Modal> </Modal>
`; `;
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}
/>
`;

56
javascripts/src/components/common/__snapshots__/Spinner.spec.tsx.snap
View file

@ -5,19 +5,6 @@ exports[`Spinner has custom color 1`] = `
color="#ffffff" color="#ffffff"
size="small" size="small"
> >
<VelocityComponent
animation={
Object {
"rotateZ": 360,
}
}
duration={750}
easing="linear"
interruptBehavior="stop"
loop={true}
runOnMount={true}
targetQuerySelector={null}
>
<div <div
role="status" role="status"
style={ style={
@ -51,7 +38,6 @@ exports[`Spinner has custom color 1`] = `
</span> </span>
</ScreenReaderOnlyText> </ScreenReaderOnlyText>
</div> </div>
</VelocityComponent>
</Spinner> </Spinner>
`; `;
@ -60,19 +46,6 @@ exports[`Spinner is large 1`] = `
color="currentcolor" color="currentcolor"
size="large" size="large"
> >
<VelocityComponent
animation={
Object {
"rotateZ": 360,
}
}
duration={750}
easing="linear"
interruptBehavior="stop"
loop={true}
runOnMount={true}
targetQuerySelector={null}
>
<div <div
role="status" role="status"
style={ style={
@ -106,7 +79,6 @@ exports[`Spinner is large 1`] = `
</span> </span>
</ScreenReaderOnlyText> </ScreenReaderOnlyText>
</div> </div>
</VelocityComponent>
</Spinner> </Spinner>
`; `;
@ -115,19 +87,6 @@ exports[`Spinner is normal 1`] = `
color="currentcolor" color="currentcolor"
size="normal" size="normal"
> >
<VelocityComponent
animation={
Object {
"rotateZ": 360,
}
}
duration={750}
easing="linear"
interruptBehavior="stop"
loop={true}
runOnMount={true}
targetQuerySelector={null}
>
<div <div
role="status" role="status"
style={ style={
@ -161,7 +120,6 @@ exports[`Spinner is normal 1`] = `
</span> </span>
</ScreenReaderOnlyText> </ScreenReaderOnlyText>
</div> </div>
</VelocityComponent>
</Spinner> </Spinner>
`; `;
@ -170,19 +128,6 @@ exports[`Spinner is small 1`] = `
color="currentcolor" color="currentcolor"
size="small" size="small"
> >
<VelocityComponent
animation={
Object {
"rotateZ": 360,
}
}
duration={750}
easing="linear"
interruptBehavior="stop"
loop={true}
runOnMount={true}
targetQuerySelector={null}
>
<div <div
role="status" role="status"
style={ style={
@ -216,6 +161,5 @@ exports[`Spinner is small 1`] = `
</span> </span>
</ScreenReaderOnlyText> </ScreenReaderOnlyText>
</div> </div>
</VelocityComponent>
</Spinner> </Spinner>
`; `;

2
package.json
View file

@ -40,7 +40,6 @@
"@types/react-transition-group": "^2.9.0", "@types/react-transition-group": "^2.9.0",
"@types/sinon": "^4.3.3", "@types/sinon": "^4.3.3",
"@types/validator": "^9.4.1", "@types/validator": "^9.4.1",
"@types/velocity-animate": "^1.2.33",
"babel-core": "^6.26.0", "babel-core": "^6.26.0",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
@ -148,7 +147,6 @@
"uuid": "2.0.2", "uuid": "2.0.2",
"validator": "^9.4.1", "validator": "^9.4.1",
"vdom-thunk": "3.0.0", "vdom-thunk": "3.0.0",
"velocity-react": "^1.4.1",
"view-script": "0.3.6", "view-script": "0.3.6",
"virtual-dom": "2.1.1", "virtual-dom": "2.1.1",
"vvvview": "0.4.3" "vvvview": "0.4.3"

37
types/velocity-react/index.d.ts vendored
View file

@ -1,37 +0,0 @@
// 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 & jquery.velocity.Options, {}>
{
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)
}

28
yarn.lock
View file

@ -1056,7 +1056,7 @@
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.2.3.tgz#0157c0316dc3722c43a7b71de3fdf3acbccef10d" resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.2.3.tgz#0157c0316dc3722c43a7b71de3fdf3acbccef10d"
integrity sha512-e74sM9W/4qqWB6D4TWV9FQk0WoHtX1X4FJpbjxucMSVJHtFjbQOH3H6yp+xno4br0AKG0wz/kPtaN599GUOvAg== integrity sha512-e74sM9W/4qqWB6D4TWV9FQk0WoHtX1X4FJpbjxucMSVJHtFjbQOH3H6yp+xno4br0AKG0wz/kPtaN599GUOvAg==
"@types/jquery@*", "@types/jquery@^3.3.1": "@types/jquery@^3.3.1":
version "3.3.31" version "3.3.31"
resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.31.tgz#27c706e4bf488474e1cb54a71d8303f37c93451b" resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.31.tgz#27c706e4bf488474e1cb54a71d8303f37c93451b"
integrity sha512-Lz4BAJihoFw5nRzKvg4nawXPzutkv7wmfQ5121avptaSIXlDNJCUuxZxX/G+9EVidZGuO0UBlk+YjKbwRKJigg== integrity sha512-Lz4BAJihoFw5nRzKvg4nawXPzutkv7wmfQ5121avptaSIXlDNJCUuxZxX/G+9EVidZGuO0UBlk+YjKbwRKJigg==
@ -1171,13 +1171,6 @@
resolved "https://registry.yarnpkg.com/@types/validator/-/validator-9.4.4.tgz#67c745e988f721ea2a1e4cc5b4cd76e6bb3a76b1" resolved "https://registry.yarnpkg.com/@types/validator/-/validator-9.4.4.tgz#67c745e988f721ea2a1e4cc5b4cd76e6bb3a76b1"
integrity sha512-7bWNKQ3lDMhRS2lxe1aHGTBijZ/a6wQfZmCtKJDefpb81sYd+FrfNqj6Gda1Tcw8bYK0gG1CVuNLWV2JS7K8Dw== integrity sha512-7bWNKQ3lDMhRS2lxe1aHGTBijZ/a6wQfZmCtKJDefpb81sYd+FrfNqj6Gda1Tcw8bYK0gG1CVuNLWV2JS7K8Dw==
"@types/velocity-animate@^1.2.33":
version "1.2.33"
resolved "https://registry.yarnpkg.com/@types/velocity-animate/-/velocity-animate-1.2.33.tgz#611fb5007fe32f02a9056114bc9254a37510c2d7"
integrity sha512-0UAWZSIAT7QE2kR1tcCJcfed3VY2m7VDbLhXEFt+5yog9mb+JSTAukBJVGOqptm5vuXJhvyOFzVkeNU4mjqcvg==
dependencies:
"@types/jquery" "*"
"@types/yargs-parser@*": "@types/yargs-parser@*":
version "13.1.0" version "13.1.0"
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
@ -9769,7 +9762,7 @@ prop-types-exact@^1.2.0:
object.assign "^4.1.0" object.assign "^4.1.0"
reflect.ownkeys "^0.2.0" reflect.ownkeys "^0.2.0"
prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2: prop-types@^15.5.6, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2" version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -10072,7 +10065,7 @@ react-text-mask@^5.3.0:
dependencies: dependencies:
prop-types "^15.5.6" prop-types "^15.5.6"
react-transition-group@^2.0.0, react-transition-group@^2.9.0: react-transition-group@^2.9.0:
version "2.9.0" version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg== integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
@ -11996,21 +11989,6 @@ vdom-thunk@3.0.0:
resolved "https://registry.yarnpkg.com/vdom-thunk/-/vdom-thunk-3.0.0.tgz#3662156df6ee64da2e7d639ed5b4f01daf875812" resolved "https://registry.yarnpkg.com/vdom-thunk/-/vdom-thunk-3.0.0.tgz#3662156df6ee64da2e7d639ed5b4f01daf875812"
integrity sha1-NmIVbfbuZNoufWOe1bTwHa+HWBI= integrity sha1-NmIVbfbuZNoufWOe1bTwHa+HWBI=
velocity-animate@^1.4.0:
version "1.5.2"
resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105"
integrity sha512-m6EXlCAMetKztO1ppBhGU1/1MR3IiEevO6ESq6rcrSQ3Q77xYSW13jkfXW88o4xMrkXJhy/U7j4wFR/twMB0Eg==
velocity-react@^1.4.1:
version "1.4.3"
resolved "https://registry.yarnpkg.com/velocity-react/-/velocity-react-1.4.3.tgz#63e41d92e334d5a3bea8b2fa02ee170f62ef4d36"
integrity sha512-zvefGm85A88S3KdF9/dz5vqyFLAiwKYlXGYkHH2EbXl+CZUD1OT0a0aS1tkX/WXWTa/FUYqjBaAzAEFYuSobBQ==
dependencies:
lodash "^4.17.5"
prop-types "^15.5.8"
react-transition-group "^2.0.0"
velocity-animate "^1.4.0"
vendors@^1.0.0: vendors@^1.0.0:
version "1.0.3" version "1.0.3"
resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0" resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0"