Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/js/options/helpers/useSpringModal.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import { useState } from '@wordpress/element'
2
+
3
+
import { useSpring } from 'react-spring'
4
+
import bezierEasing from 'bezier-easing'
5
+
6
+
export const useSpringModal = (args = {}) => {
7
+
args = {
8
+
onClosed: () => {},
9
+
10
+
...args,
11
+
}
12
+
13
+
const [modalOpen, setModalOpen] = useState(false)
14
+
15
+
const [modalSprings, modalAnimationApi] = useSpring(() => ({
16
+
from: {
17
+
transform: 'scale3d(0.95, 0.95, 1)',
18
+
opacity: 0,
19
+
},
20
+
21
+
config: {
22
+
duration: 100,
23
+
easing: bezierEasing(0.25, 0.1, 0.25, 1.0),
24
+
},
25
+
}))
26
+
27
+
// First render modal and make it hidden.
28
+
//
29
+
// Then, after one frame, animate the modal to be visible.
30
+
const openModal = () => {
31
+
if (modalOpen) {
32
+
return
33
+
}
34
+
35
+
setModalOpen(true)
36
+
37
+
requestAnimationFrame(() => {
38
+
modalAnimationApi.start({
39
+
transform: 'scale3d(1, 1, 1)',
40
+
opacity: 1,
41
+
})
42
+
})
43
+
}
44
+
45
+
// Animate the modal to be hidden first. Then fully remove it from the DOM.
46
+
const closeModal = () => {
47
+
if (!modalOpen) {
48
+
return
49
+
}
50
+
51
+
modalAnimationApi.start({
52
+
transform: 'scale3d(0.95, 0.95, 1)',
53
+
opacity: 0,
54
+
55
+
onRest: () => {
56
+
setModalOpen(false)
57
+
args.onClosed()
58
+
},
59
+
})
60
+
}
61
+
62
+
return {
63
+
modalOpen,
64
+
modalStyles: modalSprings,
65
+
66
+
openModal,
67
+
closeModal,
68
+
}
69
+
}
70
+