Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/js/customizer/components/Overlay.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import {
2
+
createElement,
3
+
Component,
4
+
useEffect,
5
+
useState,
6
+
useContext,
7
+
createContext,
8
+
Fragment,
9
+
} from '@wordpress/element'
10
+
import { Dialog, DialogOverlay, DialogContent } from './reach/dialog'
11
+
import { Transition, animated } from 'react-spring'
12
+
import { __ } from 'ct-i18n'
13
+
import classnames from 'classnames'
14
+
15
+
const AnimatedDialogOverlay = animated(DialogOverlay)
16
+
const AnimatedDialogContent = animated(DialogContent)
17
+
18
+
const defaultIsVisible = (i) => !!i
19
+
20
+
const Overlay = ({
21
+
items,
22
+
isVisible = defaultIsVisible,
23
+
render,
24
+
className,
25
+
initialFocusRef,
26
+
onDismiss,
27
+
onDismissed,
28
+
onCloseButtonClick,
29
+
}) => {
30
+
return (
31
+
<Transition
32
+
items={items}
33
+
onStart={() =>
34
+
document.body.classList[isVisible(items) ? 'add' : 'remove'](
35
+
'ct-dashboard-overlay-open'
36
+
)
37
+
}
38
+
onRest={(result, spring, item) => {
39
+
if (onDismissed && !isVisible(item)) {
40
+
onDismissed()
41
+
}
42
+
}}
43
+
config={{ duration: 200 }}
44
+
from={{ opacity: 0, y: -10 }}
45
+
enter={{ opacity: 1, y: 0 }}
46
+
leave={{ opacity: 0, y: 10 }}>
47
+
{(props, items) => {
48
+
return (
49
+
isVisible(items) && (
50
+
<AnimatedDialogOverlay
51
+
style={{ opacity: props.opacity }}
52
+
container={document.body}
53
+
onDismiss={() => onDismiss()}
54
+
initialFocusRef={initialFocusRef}>
55
+
<AnimatedDialogContent
56
+
className={classnames(
57
+
'ct-admin-modal',
58
+
className
59
+
)}
60
+
style={{
61
+
transform: props.y.to(
62
+
(y) => `translate3d(0px, ${y}px, 0px)`
63
+
),
64
+
}}>
65
+
<button
66
+
className="close-button"
67
+
onClick={() =>
68
+
onCloseButtonClick
69
+
? onCloseButtonClick()
70
+
: onDismiss()
71
+
}>
72
+
×
73
+
</button>
74
+
75
+
{render(items, props)}
76
+
</AnimatedDialogContent>
77
+
</AnimatedDialogOverlay>
78
+
)
79
+
)
80
+
}}
81
+
</Transition>
82
+
)
83
+
}
84
+
85
+
export default Overlay
86
+