70 lines
1.2 KiB
JavaScript
70 lines
1.2 KiB
JavaScript
import { useState } from '@wordpress/element'
|
|
|
|
import { useSpring } from 'react-spring'
|
|
import bezierEasing from 'bezier-easing'
|
|
|
|
export const useSpringModal = (args = {}) => {
|
|
args = {
|
|
onClosed: () => {},
|
|
|
|
...args,
|
|
}
|
|
|
|
const [modalOpen, setModalOpen] = useState(false)
|
|
|
|
const [modalSprings, modalAnimationApi] = useSpring(() => ({
|
|
from: {
|
|
transform: 'scale3d(0.95, 0.95, 1)',
|
|
opacity: 0,
|
|
},
|
|
|
|
config: {
|
|
duration: 100,
|
|
easing: bezierEasing(0.25, 0.1, 0.25, 1.0),
|
|
},
|
|
}))
|
|
|
|
// First render modal and make it hidden.
|
|
//
|
|
// Then, after one frame, animate the modal to be visible.
|
|
const openModal = () => {
|
|
if (modalOpen) {
|
|
return
|
|
}
|
|
|
|
setModalOpen(true)
|
|
|
|
requestAnimationFrame(() => {
|
|
modalAnimationApi.start({
|
|
transform: 'scale3d(1, 1, 1)',
|
|
opacity: 1,
|
|
})
|
|
})
|
|
}
|
|
|
|
// Animate the modal to be hidden first. Then fully remove it from the DOM.
|
|
const closeModal = () => {
|
|
if (!modalOpen) {
|
|
return
|
|
}
|
|
|
|
modalAnimationApi.start({
|
|
transform: 'scale3d(0.95, 0.95, 1)',
|
|
opacity: 0,
|
|
|
|
onRest: () => {
|
|
setModalOpen(false)
|
|
args.onClosed()
|
|
},
|
|
})
|
|
}
|
|
|
|
return {
|
|
modalOpen,
|
|
modalStyles: modalSprings,
|
|
|
|
openModal,
|
|
closeModal,
|
|
}
|
|
}
|