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

Add Javascript animation to modal opening and closing

Browse source
This commit is contained in:
Eric Schultz 2019-02-14 16:16:26 -06:00
parent 159932b51e
commit b471adb0ef
2 changed files with 146 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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)

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

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