454 lines
17 KiB
Text
454 lines
17 KiB
Text
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`Modal active modal displays matches snapshot 1`] = `
|
|
<Modal
|
|
childGenerator={[Function]}
|
|
dialogStyle={
|
|
Object {
|
|
"minWidth": "768px",
|
|
}
|
|
}
|
|
focusDialog={true}
|
|
modalActive={true}
|
|
onClose={[Function]}
|
|
showCloseButton={true}
|
|
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
|
|
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;"
|
|
>
|
|
<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
|
|
class="row"
|
|
>
|
|
<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;"
|
|
>
|
|
<div />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<Modal
|
|
dialogId="react-aria-modal-dialog"
|
|
dialogStyle={
|
|
Object {
|
|
"minWidth": "768px",
|
|
}
|
|
}
|
|
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={
|
|
Object {
|
|
"escapeDeactivates": true,
|
|
"initialFocus": "#react-aria-modal-dialog",
|
|
}
|
|
}
|
|
paused={false}
|
|
tag="div"
|
|
>
|
|
<div>
|
|
<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,
|
|
}
|
|
}
|
|
>
|
|
<div
|
|
aria-label="title text"
|
|
id="react-aria-modal-dialog"
|
|
key="b"
|
|
role="dialog"
|
|
style={
|
|
Object {
|
|
"cursor": "default",
|
|
"display": "inline-block",
|
|
"maxWidth": "100%",
|
|
"minWidth": "768px",
|
|
"outline": 0,
|
|
"textAlign": "left",
|
|
"top": 0,
|
|
}
|
|
}
|
|
tabIndex="-1"
|
|
>
|
|
<BootstrapWrapper>
|
|
<div
|
|
className="tw-bs"
|
|
>
|
|
<header
|
|
className="modal-header"
|
|
style={
|
|
Object {
|
|
"padding": "12px 10px 12px 20px",
|
|
"position": "relative",
|
|
}
|
|
}
|
|
>
|
|
<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
|
|
style={
|
|
Object {
|
|
"position": "relative",
|
|
}
|
|
}
|
|
>
|
|
<div />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BootstrapWrapper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</FocusTrap>
|
|
</Modal>
|
|
</Portal>
|
|
</Displaced>
|
|
</div>
|
|
</TransitionGroup>
|
|
</VelocityTransitionGroup>
|
|
</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}
|
|
/>
|
|
`;
|