80 lines
1.7 KiB
JavaScript
80 lines
1.7 KiB
JavaScript
|
import {
|
|||
|
|
createElement,
|
|||
|
|
Component,
|
|||
|
|
useEffect,
|
|||
|
|
useState,
|
|||
|
|
useContext,
|
|||
|
|
createContext,
|
|||
|
|
Fragment,
|
|||
|
|
} from '@wordpress/element'
|
|||
|
|
import { Dialog, DialogOverlay, DialogContent } from './reach/dialog'
|
|||
|
|
import { Transition, animated } from 'react-spring'
|
|||
|
|
import { __ } from 'ct-i18n'
|
|||
|
|
import classnames from 'classnames'
|
|||
|
|
|
|||
|
|
const AnimatedDialogOverlay = animated(DialogOverlay)
|
|||
|
|
const AnimatedDialogContent = animated(DialogContent)
|
|||
|
|
|
|||
|
|
const defaultIsVisible = (i) => !!i
|
|||
|
|
|
|||
|
|
const Overlay = ({
|
|||
|
|
items,
|
|||
|
|
isVisible = defaultIsVisible,
|
|||
|
|
render,
|
|||
|
|
className,
|
|||
|
|
initialFocusRef,
|
|||
|
|
onDismiss,
|
|||
|
|
onCloseButtonClick,
|
|||
|
|
}) => {
|
|||
|
|
return (
|
|||
|
|
<Transition
|
|||
|
|
items={items}
|
|||
|
|
onStart={() =>
|
|||
|
|
document.body.classList[isVisible(items) ? 'add' : 'remove'](
|
|||
|
|
'ct-dashboard-overlay-open'
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
config={{ duration: 200 }}
|
|||
|
|
from={{ opacity: 0, y: -10 }}
|
|||
|
|
enter={{ opacity: 1, y: 0 }}
|
|||
|
|
leave={{ opacity: 0, y: 10 }}>
|
|||
|
|
{(props, items) => {
|
|||
|
|
return (
|
|||
|
|
isVisible(items) && (
|
|||
|
|
<AnimatedDialogOverlay
|
|||
|
|
style={{ opacity: props.opacity }}
|
|||
|
|
container={document.body}
|
|||
|
|
onDismiss={() => onDismiss()}
|
|||
|
|
initialFocusRef={initialFocusRef}>
|
|||
|
|
<AnimatedDialogContent
|
|||
|
|
className={classnames(
|
|||
|
|
'ct-admin-modal',
|
|||
|
|
className
|
|||
|
|
)}
|
|||
|
|
style={{
|
|||
|
|
transform: props.y.to(
|
|||
|
|
(y) => `translate3d(0px, ${y}px, 0px)`
|
|||
|
|
),
|
|||
|
|
}}>
|
|||
|
|
<button
|
|||
|
|
className="close-button"
|
|||
|
|
onClick={() =>
|
|||
|
|
onCloseButtonClick
|
|||
|
|
? onCloseButtonClick()
|
|||
|
|
: onDismiss()
|
|||
|
|
}>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
{render(items, props)}
|
|||
|
|
</AnimatedDialogContent>
|
|||
|
|
</AnimatedDialogOverlay>
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
}}
|
|||
|
|
</Transition>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Overlay
|