55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
import FocusTrap from 'focus-trap-react'
|
||
import React, { useEffect } from 'react'
|
||
import * as animate from 'Ui/animate'
|
||
import { LinkButton } from 'Ui/Button'
|
||
import './Overlay.css'
|
||
|
||
type OverlayProps = React.HTMLAttributes<HTMLDivElement> & {
|
||
onClose?: () => void
|
||
children: React.ReactNode
|
||
}
|
||
|
||
export default function Overlay({
|
||
onClose,
|
||
children,
|
||
...otherProps
|
||
}: OverlayProps) {
|
||
useEffect(() => {
|
||
const body = document.getElementsByTagName('body')[0]
|
||
body.classList.add('no-scroll')
|
||
return () => {
|
||
body.classList.remove('no-scroll')
|
||
}
|
||
}, [])
|
||
return (
|
||
<div id="overlayWrapper">
|
||
<animate.fromBottom>
|
||
<FocusTrap
|
||
focusTrapOptions={{
|
||
onDeactivate: onClose,
|
||
clickOutsideDeactivates: !!onClose
|
||
}}
|
||
>
|
||
<div
|
||
aria-modal="true"
|
||
id="overlayContent"
|
||
{...otherProps}
|
||
className={'ui__ card ' + otherProps?.className}
|
||
>
|
||
{children}
|
||
{onClose && (
|
||
<LinkButton
|
||
aria-label="close"
|
||
onClick={onClose}
|
||
id="overlayCloseButton"
|
||
>
|
||
×
|
||
</LinkButton>
|
||
)}
|
||
</div>
|
||
</FocusTrap>
|
||
</animate.fromBottom>
|
||
</div>
|
||
)
|
||
}
|