Remove Velocity
This commit is contained in:
Eric Schultz
parent
4daaeb8c7f
commit
cf7eceee13
7 changed files with 424 additions and 664 deletions
|
|
@ -2,9 +2,6 @@
|
|||
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';
|
||||
import { DefaultCloseButton } from './DefaultCloseButton';
|
||||
import BootstrapWrapper from './BootstrapWrapper';
|
||||
import { Row, Column } from './layout';
|
||||
|
|
@ -27,7 +24,7 @@ class Modal extends React.Component<ModalProps, {}> {
|
|||
}
|
||||
|
||||
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}>
|
||||
<BootstrapWrapper>
|
||||
<header className='modal-header' style={{
|
||||
|
|
@ -55,39 +52,6 @@ class Modal extends React.Component<ModalProps, {}> {
|
|||
</BootstrapWrapper>
|
||||
</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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
// License: LGPL-3.0-or-later
|
||||
import { Color } from 'csstype';
|
||||
import * as React from 'react';
|
||||
import { VelocityComponent } from 'velocity-react';
|
||||
import ScreenReaderOnlyText from './ScreenReaderOnlyText';
|
||||
|
||||
export interface SpinnerProps {
|
||||
|
|
@ -41,11 +40,9 @@ class Spinner extends React.Component<SpinnerProps, {}> {
|
|||
|
||||
}
|
||||
render() {
|
||||
return <VelocityComponent animation={{ rotateZ: 360 }} duration={750} loop={true} easing={'linear'} runOnMount={true}>
|
||||
<div style={this.generateStyle()} role="status">
|
||||
return <div style={this.generateStyle()} role="status">
|
||||
<ScreenReaderOnlyText>Loading...</ScreenReaderOnlyText>
|
||||
</div>
|
||||
</VelocityComponent>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,441 +14,357 @@ exports[`Modal active modal displays matches snapshot 1`] = `
|
|||
showCloseButton={true}
|
||||
titleText="title text"
|
||||
>
|
||||
<VelocityTransitionGroup
|
||||
enter={
|
||||
<Displaced
|
||||
dialogStyle={
|
||||
Object {
|
||||
"animation": "fadeIn",
|
||||
"style": Object {
|
||||
"left": "0px",
|
||||
"position": "fixed",
|
||||
"top": "0px",
|
||||
"zIndex": "5000",
|
||||
},
|
||||
"minWidth": "768px",
|
||||
}
|
||||
}
|
||||
enterHideStyle={
|
||||
Object {
|
||||
"display": "none",
|
||||
}
|
||||
}
|
||||
enterShowStyle={
|
||||
Object {
|
||||
"display": "",
|
||||
}
|
||||
}
|
||||
leave={
|
||||
Object {
|
||||
"animation": "fadeOut",
|
||||
"style": Object {
|
||||
"left": "0px",
|
||||
"position": "fixed",
|
||||
"top": "0px",
|
||||
"zIndex": "5000",
|
||||
},
|
||||
}
|
||||
}
|
||||
runOnMount={true}
|
||||
focusDialog={true}
|
||||
mounted={true}
|
||||
onExit={[Function]}
|
||||
titleText="title text"
|
||||
>
|
||||
<TransitionGroup
|
||||
childFactory={[Function]}
|
||||
component="div"
|
||||
>
|
||||
<div>
|
||||
<Displaced
|
||||
dialogStyle={
|
||||
Object {
|
||||
"minWidth": "768px",
|
||||
}
|
||||
}
|
||||
focusDialog={true}
|
||||
in={true}
|
||||
key=".0"
|
||||
mounted={true}
|
||||
onExit={[Function]}
|
||||
onExited={[Function]}
|
||||
titleText="title text"
|
||||
>
|
||||
<Portal
|
||||
containerInfo={
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1050; overflow-x: hidden; overflow-y: auto; text-align: center; background: rgba(0, 0, 0, 0.5); cursor: pointer;"
|
||||
<Portal
|
||||
containerInfo={
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1050; overflow-x: hidden; overflow-y: auto; text-align: center; background: rgba(0, 0, 0, 0.5); cursor: pointer;"
|
||||
>
|
||||
<div
|
||||
aria-label="title text"
|
||||
id="react-aria-modal-dialog"
|
||||
role="dialog"
|
||||
style="display: inline-block; text-align: left; top: 0px; max-width: 100%; cursor: default; outline: 0; min-width: 768px;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="tw-bs"
|
||||
>
|
||||
<header
|
||||
class="modal-header"
|
||||
style="position: relative; padding: 12px 10px 12px 20px;"
|
||||
>
|
||||
<div
|
||||
aria-label="title text"
|
||||
id="react-aria-modal-dialog"
|
||||
role="dialog"
|
||||
style="display: inline-block; text-align: left; top: 0px; max-width: 100%; cursor: default; outline: 0; min-width: 768px;"
|
||||
tabindex="-1"
|
||||
class="row"
|
||||
>
|
||||
<div
|
||||
class="tw-bs"
|
||||
<h3
|
||||
class="col-xs-11 modal-header-title"
|
||||
style="margin: 0px;"
|
||||
>
|
||||
<header
|
||||
class="modal-header"
|
||||
style="position: relative; padding: 12px 10px 12px 20px;"
|
||||
title text
|
||||
</h3>
|
||||
<div
|
||||
class="col-xs-1 "
|
||||
style="text-align: right;"
|
||||
>
|
||||
<a
|
||||
class="focusable_item"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="row"
|
||||
<svg
|
||||
height="24"
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
>
|
||||
<h3
|
||||
class="col-xs-11 modal-header-title"
|
||||
style="margin: 0px;"
|
||||
>
|
||||
title text
|
||||
</h3>
|
||||
<div
|
||||
class="col-xs-1 "
|
||||
style="text-align: right;"
|
||||
>
|
||||
<a
|
||||
class="focusable_item"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
height="24"
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10.65625"
|
||||
style="stroke: #969696; fill: #FFFFFF;"
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9.25"
|
||||
style="fill: #969696;"
|
||||
/>
|
||||
<path
|
||||
d="M 7.130438,16.869562 16.869562,7.130438"
|
||||
style="stroke: #ffffff; stroke-width: 1.375; stroke-linecap: square;"
|
||||
/>
|
||||
<path
|
||||
d="M 16.869562,16.869562 7.130438,7.130438"
|
||||
style="stroke: #ffffff; stroke-width: 1.375; stroke-linecap: square;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); border: 0px;"
|
||||
>
|
||||
Close modal
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
class="modal-body"
|
||||
>
|
||||
<div
|
||||
style="position: relative;"
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10.65625"
|
||||
style="stroke: #969696; fill: #FFFFFF;"
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9.25"
|
||||
style="fill: #969696;"
|
||||
/>
|
||||
<path
|
||||
d="M 7.130438,16.869562 16.869562,7.130438"
|
||||
style="stroke: #ffffff; stroke-width: 1.375; stroke-linecap: square;"
|
||||
/>
|
||||
<path
|
||||
d="M 16.869562,16.869562 7.130438,7.130438"
|
||||
style="stroke: #ffffff; stroke-width: 1.375; stroke-linecap: square;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
style="position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); border: 0px;"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
Close modal
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
class="modal-body"
|
||||
>
|
||||
<div
|
||||
style="position: relative;"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Modal
|
||||
dialogId="react-aria-modal-dialog"
|
||||
dialogStyle={
|
||||
Object {
|
||||
"minWidth": "768px",
|
||||
}
|
||||
}
|
||||
escapeExits={true}
|
||||
focusDialog={true}
|
||||
focusTrapPaused={false}
|
||||
includeDefaultStyles={true}
|
||||
mounted={true}
|
||||
onExit={[Function]}
|
||||
scrollDisabled={true}
|
||||
titleText="title text"
|
||||
underlayClickExits={true}
|
||||
underlayColor="rgba(0,0,0,0.5)"
|
||||
underlayProps={Object {}}
|
||||
>
|
||||
<FocusTrap
|
||||
_createFocusTrap={[Function]}
|
||||
active={true}
|
||||
focusTrapOptions={
|
||||
Object {
|
||||
"escapeDeactivates": true,
|
||||
"initialFocus": "#react-aria-modal-dialog",
|
||||
}
|
||||
>
|
||||
<Modal
|
||||
dialogId="react-aria-modal-dialog"
|
||||
dialogStyle={
|
||||
}
|
||||
paused={false}
|
||||
tag="div"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
onMouseDown={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"minWidth": "768px",
|
||||
"WebkitOverflowScrolling": "touch",
|
||||
"background": "rgba(0,0,0,0.5)",
|
||||
"cursor": "pointer",
|
||||
"height": "100%",
|
||||
"left": 0,
|
||||
"overflowX": "hidden",
|
||||
"overflowY": "auto",
|
||||
"position": "fixed",
|
||||
"textAlign": "center",
|
||||
"top": 0,
|
||||
"width": "100%",
|
||||
"zIndex": 1050,
|
||||
}
|
||||
}
|
||||
escapeExits={true}
|
||||
focusDialog={true}
|
||||
focusTrapPaused={false}
|
||||
in={true}
|
||||
includeDefaultStyles={true}
|
||||
mounted={true}
|
||||
onExit={[Function]}
|
||||
onExited={[Function]}
|
||||
scrollDisabled={true}
|
||||
titleText="title text"
|
||||
underlayClickExits={true}
|
||||
underlayColor="rgba(0,0,0,0.5)"
|
||||
underlayProps={Object {}}
|
||||
>
|
||||
<FocusTrap
|
||||
_createFocusTrap={[Function]}
|
||||
active={true}
|
||||
focusTrapOptions={
|
||||
<div
|
||||
aria-label="title text"
|
||||
id="react-aria-modal-dialog"
|
||||
key="b"
|
||||
role="dialog"
|
||||
style={
|
||||
Object {
|
||||
"escapeDeactivates": true,
|
||||
"initialFocus": "#react-aria-modal-dialog",
|
||||
"cursor": "default",
|
||||
"display": "inline-block",
|
||||
"maxWidth": "100%",
|
||||
"minWidth": "768px",
|
||||
"outline": 0,
|
||||
"textAlign": "left",
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
paused={false}
|
||||
tag="div"
|
||||
tabIndex="-1"
|
||||
>
|
||||
<div>
|
||||
<BootstrapWrapper>
|
||||
<div
|
||||
onMouseDown={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"WebkitOverflowScrolling": "touch",
|
||||
"background": "rgba(0,0,0,0.5)",
|
||||
"cursor": "pointer",
|
||||
"height": "100%",
|
||||
"left": 0,
|
||||
"overflowX": "hidden",
|
||||
"overflowY": "auto",
|
||||
"position": "fixed",
|
||||
"textAlign": "center",
|
||||
"top": 0,
|
||||
"width": "100%",
|
||||
"zIndex": 1050,
|
||||
}
|
||||
}
|
||||
className="tw-bs"
|
||||
>
|
||||
<div
|
||||
aria-label="title text"
|
||||
id="react-aria-modal-dialog"
|
||||
key="b"
|
||||
role="dialog"
|
||||
<header
|
||||
className="modal-header"
|
||||
style={
|
||||
Object {
|
||||
"cursor": "default",
|
||||
"display": "inline-block",
|
||||
"maxWidth": "100%",
|
||||
"minWidth": "768px",
|
||||
"outline": 0,
|
||||
"textAlign": "left",
|
||||
"top": 0,
|
||||
"padding": "12px 10px 12px 20px",
|
||||
"position": "relative",
|
||||
}
|
||||
}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<BootstrapWrapper>
|
||||
<Row>
|
||||
<div
|
||||
className="tw-bs"
|
||||
className="row"
|
||||
>
|
||||
<header
|
||||
className="modal-header"
|
||||
style={
|
||||
Object {
|
||||
"padding": "12px 10px 12px 20px",
|
||||
"position": "relative",
|
||||
}
|
||||
}
|
||||
<Column
|
||||
breakSize="xs"
|
||||
colSpan={11}
|
||||
>
|
||||
<Row>
|
||||
<div
|
||||
className="row"
|
||||
>
|
||||
<Column
|
||||
breakSize="xs"
|
||||
colSpan={11}
|
||||
>
|
||||
<h3
|
||||
className="col-xs-11 modal-header-title"
|
||||
style={
|
||||
Object {
|
||||
"margin": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
title text
|
||||
</h3>
|
||||
</Column>
|
||||
<Column
|
||||
breakSize="xs"
|
||||
colSpan={1}
|
||||
>
|
||||
<div
|
||||
className="col-xs-1 "
|
||||
style={
|
||||
Object {
|
||||
"textAlign": "right",
|
||||
}
|
||||
}
|
||||
>
|
||||
<DefaultCloseButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Transition
|
||||
appear={false}
|
||||
enter={true}
|
||||
exit={true}
|
||||
in={false}
|
||||
mountOnEnter={false}
|
||||
onEnter={[Function]}
|
||||
onEntered={[Function]}
|
||||
onEntering={[Function]}
|
||||
onExit={[Function]}
|
||||
onExited={[Function]}
|
||||
onExiting={[Function]}
|
||||
timeout={250}
|
||||
unmountOnExit={false}
|
||||
>
|
||||
<a
|
||||
className="focusable_item"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
tabIndex={0}
|
||||
>
|
||||
<Component
|
||||
backgroundCircleStyle={
|
||||
Object {
|
||||
"fill": "#FFFFFF",
|
||||
"stroke": "#969696",
|
||||
}
|
||||
}
|
||||
foregroundCircleStyle={
|
||||
Object {
|
||||
"fill": "#969696",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
height="24"
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10.65625"
|
||||
style={
|
||||
Object {
|
||||
"fill": "#FFFFFF",
|
||||
"stroke": "#969696",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9.25"
|
||||
style={
|
||||
Object {
|
||||
"fill": "#969696",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M 7.130438,16.869562 16.869562,7.130438"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#ffffff",
|
||||
"strokeLinecap": "square",
|
||||
"strokeWidth": 1.375,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M 16.869562,16.869562 7.130438,7.130438"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#ffffff",
|
||||
"strokeLinecap": "square",
|
||||
"strokeWidth": 1.375,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
</Component>
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Close modal
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</a>
|
||||
</Transition>
|
||||
</DefaultCloseButton>
|
||||
</div>
|
||||
</Column>
|
||||
</div>
|
||||
</Row>
|
||||
</header>
|
||||
<div
|
||||
className="modal-body"
|
||||
>
|
||||
<div
|
||||
<h3
|
||||
className="col-xs-11 modal-header-title"
|
||||
style={
|
||||
Object {
|
||||
"position": "relative",
|
||||
"margin": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div />
|
||||
title text
|
||||
</h3>
|
||||
</Column>
|
||||
<Column
|
||||
breakSize="xs"
|
||||
colSpan={1}
|
||||
>
|
||||
<div
|
||||
className="col-xs-1 "
|
||||
style={
|
||||
Object {
|
||||
"textAlign": "right",
|
||||
}
|
||||
}
|
||||
>
|
||||
<DefaultCloseButton
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Transition
|
||||
appear={false}
|
||||
enter={true}
|
||||
exit={true}
|
||||
in={false}
|
||||
mountOnEnter={false}
|
||||
onEnter={[Function]}
|
||||
onEntered={[Function]}
|
||||
onEntering={[Function]}
|
||||
onExit={[Function]}
|
||||
onExited={[Function]}
|
||||
onExiting={[Function]}
|
||||
timeout={250}
|
||||
unmountOnExit={false}
|
||||
>
|
||||
<a
|
||||
className="focusable_item"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
tabIndex={0}
|
||||
>
|
||||
<Component
|
||||
backgroundCircleStyle={
|
||||
Object {
|
||||
"fill": "#FFFFFF",
|
||||
"stroke": "#969696",
|
||||
}
|
||||
}
|
||||
foregroundCircleStyle={
|
||||
Object {
|
||||
"fill": "#969696",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
height="24"
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10.65625"
|
||||
style={
|
||||
Object {
|
||||
"fill": "#FFFFFF",
|
||||
"stroke": "#969696",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9.25"
|
||||
style={
|
||||
Object {
|
||||
"fill": "#969696",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M 7.130438,16.869562 16.869562,7.130438"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#ffffff",
|
||||
"strokeLinecap": "square",
|
||||
"strokeWidth": 1.375,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M 16.869562,16.869562 7.130438,7.130438"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#ffffff",
|
||||
"strokeLinecap": "square",
|
||||
"strokeWidth": 1.375,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
</Component>
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Close modal
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</a>
|
||||
</Transition>
|
||||
</DefaultCloseButton>
|
||||
</div>
|
||||
</div>
|
||||
</Column>
|
||||
</div>
|
||||
</BootstrapWrapper>
|
||||
</Row>
|
||||
</header>
|
||||
<div
|
||||
className="modal-body"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"position": "relative",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
</Modal>
|
||||
</Portal>
|
||||
</Displaced>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</VelocityTransitionGroup>
|
||||
</BootstrapWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
</Modal>
|
||||
</Portal>
|
||||
</Displaced>
|
||||
</Modal>
|
||||
`;
|
||||
|
||||
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}
|
||||
/>
|
||||
`;
|
||||
exports[`Modal nothing displayed if inactive 1`] = `""`;
|
||||
|
|
|
|||
|
|
@ -5,53 +5,39 @@ exports[`Spinner has custom color 1`] = `
|
|||
color="#ffffff"
|
||||
size="small"
|
||||
>
|
||||
<VelocityComponent
|
||||
animation={
|
||||
<div
|
||||
role="status"
|
||||
style={
|
||||
Object {
|
||||
"rotateZ": 360,
|
||||
"border": "3px solid #ffffff",
|
||||
"borderRadius": "50%",
|
||||
"borderRightColor": "transparent",
|
||||
"display": "inline-block",
|
||||
"height": "25px",
|
||||
"verticalAlign": "text-bottom",
|
||||
"width": "25px",
|
||||
}
|
||||
}
|
||||
duration={750}
|
||||
easing="linear"
|
||||
interruptBehavior="stop"
|
||||
loop={true}
|
||||
runOnMount={true}
|
||||
targetQuerySelector={null}
|
||||
>
|
||||
<div
|
||||
role="status"
|
||||
style={
|
||||
Object {
|
||||
"border": "3px solid #ffffff",
|
||||
"borderRadius": "50%",
|
||||
"borderRightColor": "transparent",
|
||||
"display": "inline-block",
|
||||
"height": "25px",
|
||||
"verticalAlign": "text-bottom",
|
||||
"width": "25px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
>
|
||||
Loading...
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</div>
|
||||
</VelocityComponent>
|
||||
}
|
||||
>
|
||||
Loading...
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</div>
|
||||
</Spinner>
|
||||
`;
|
||||
|
||||
|
|
@ -60,53 +46,39 @@ exports[`Spinner is large 1`] = `
|
|||
color="currentcolor"
|
||||
size="large"
|
||||
>
|
||||
<VelocityComponent
|
||||
animation={
|
||||
<div
|
||||
role="status"
|
||||
style={
|
||||
Object {
|
||||
"rotateZ": 360,
|
||||
"border": "3px solid currentcolor",
|
||||
"borderRadius": "50%",
|
||||
"borderRightColor": "transparent",
|
||||
"display": "inline-block",
|
||||
"height": "100px",
|
||||
"verticalAlign": "text-bottom",
|
||||
"width": "100px",
|
||||
}
|
||||
}
|
||||
duration={750}
|
||||
easing="linear"
|
||||
interruptBehavior="stop"
|
||||
loop={true}
|
||||
runOnMount={true}
|
||||
targetQuerySelector={null}
|
||||
>
|
||||
<div
|
||||
role="status"
|
||||
style={
|
||||
Object {
|
||||
"border": "3px solid currentcolor",
|
||||
"borderRadius": "50%",
|
||||
"borderRightColor": "transparent",
|
||||
"display": "inline-block",
|
||||
"height": "100px",
|
||||
"verticalAlign": "text-bottom",
|
||||
"width": "100px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
>
|
||||
Loading...
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</div>
|
||||
</VelocityComponent>
|
||||
}
|
||||
>
|
||||
Loading...
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</div>
|
||||
</Spinner>
|
||||
`;
|
||||
|
||||
|
|
@ -115,53 +87,39 @@ exports[`Spinner is normal 1`] = `
|
|||
color="currentcolor"
|
||||
size="normal"
|
||||
>
|
||||
<VelocityComponent
|
||||
animation={
|
||||
<div
|
||||
role="status"
|
||||
style={
|
||||
Object {
|
||||
"rotateZ": 360,
|
||||
"border": "3px solid currentcolor",
|
||||
"borderRadius": "50%",
|
||||
"borderRightColor": "transparent",
|
||||
"display": "inline-block",
|
||||
"height": "50px",
|
||||
"verticalAlign": "text-bottom",
|
||||
"width": "50px",
|
||||
}
|
||||
}
|
||||
duration={750}
|
||||
easing="linear"
|
||||
interruptBehavior="stop"
|
||||
loop={true}
|
||||
runOnMount={true}
|
||||
targetQuerySelector={null}
|
||||
>
|
||||
<div
|
||||
role="status"
|
||||
style={
|
||||
Object {
|
||||
"border": "3px solid currentcolor",
|
||||
"borderRadius": "50%",
|
||||
"borderRightColor": "transparent",
|
||||
"display": "inline-block",
|
||||
"height": "50px",
|
||||
"verticalAlign": "text-bottom",
|
||||
"width": "50px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
>
|
||||
Loading...
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</div>
|
||||
</VelocityComponent>
|
||||
}
|
||||
>
|
||||
Loading...
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</div>
|
||||
</Spinner>
|
||||
`;
|
||||
|
||||
|
|
@ -170,52 +128,38 @@ exports[`Spinner is small 1`] = `
|
|||
color="currentcolor"
|
||||
size="small"
|
||||
>
|
||||
<VelocityComponent
|
||||
animation={
|
||||
<div
|
||||
role="status"
|
||||
style={
|
||||
Object {
|
||||
"rotateZ": 360,
|
||||
"border": "3px solid currentcolor",
|
||||
"borderRadius": "50%",
|
||||
"borderRightColor": "transparent",
|
||||
"display": "inline-block",
|
||||
"height": "25px",
|
||||
"verticalAlign": "text-bottom",
|
||||
"width": "25px",
|
||||
}
|
||||
}
|
||||
duration={750}
|
||||
easing="linear"
|
||||
interruptBehavior="stop"
|
||||
loop={true}
|
||||
runOnMount={true}
|
||||
targetQuerySelector={null}
|
||||
>
|
||||
<div
|
||||
role="status"
|
||||
style={
|
||||
Object {
|
||||
"border": "3px solid currentcolor",
|
||||
"borderRadius": "50%",
|
||||
"borderRightColor": "transparent",
|
||||
"display": "inline-block",
|
||||
"height": "25px",
|
||||
"verticalAlign": "text-bottom",
|
||||
"width": "25px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
<ScreenReaderOnlyText>
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"border": 0,
|
||||
"clip": "rect(0,0,0,0)",
|
||||
"height": "1px",
|
||||
"margin": "-1px",
|
||||
"overflow": "hidden",
|
||||
"padding": 0,
|
||||
"position": "absolute",
|
||||
"width": "1px",
|
||||
}
|
||||
>
|
||||
Loading...
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</div>
|
||||
</VelocityComponent>
|
||||
}
|
||||
>
|
||||
Loading...
|
||||
</span>
|
||||
</ScreenReaderOnlyText>
|
||||
</div>
|
||||
</Spinner>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
"@types/react-transition-group": "^2.9.0",
|
||||
"@types/sinon": "^4.3.3",
|
||||
"@types/validator": "^9.4.1",
|
||||
"@types/velocity-animate": "^1.2.33",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
|
|
@ -148,7 +147,6 @@
|
|||
"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"
|
||||
|
|
|
|||
37
types/velocity-react/index.d.ts
vendored
37
types/velocity-react/index.d.ts
vendored
|
|
@ -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
28
yarn.lock
|
|
@ -1056,7 +1056,7 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.2.3.tgz#0157c0316dc3722c43a7b71de3fdf3acbccef10d"
|
||||
integrity sha512-e74sM9W/4qqWB6D4TWV9FQk0WoHtX1X4FJpbjxucMSVJHtFjbQOH3H6yp+xno4br0AKG0wz/kPtaN599GUOvAg==
|
||||
|
||||
"@types/jquery@*", "@types/jquery@^3.3.1":
|
||||
"@types/jquery@^3.3.1":
|
||||
version "3.3.31"
|
||||
resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.3.31.tgz#27c706e4bf488474e1cb54a71d8303f37c93451b"
|
||||
integrity sha512-Lz4BAJihoFw5nRzKvg4nawXPzutkv7wmfQ5121avptaSIXlDNJCUuxZxX/G+9EVidZGuO0UBlk+YjKbwRKJigg==
|
||||
|
|
@ -1171,13 +1171,6 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/validator/-/validator-9.4.4.tgz#67c745e988f721ea2a1e4cc5b4cd76e6bb3a76b1"
|
||||
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@*":
|
||||
version "13.1.0"
|
||||
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"
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||
|
|
@ -10072,7 +10065,7 @@ react-text-mask@^5.3.0:
|
|||
dependencies:
|
||||
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"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
|
||||
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"
|
||||
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:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0"
|
||||
|
|
|
|||
Loading…
Reference in a new issue