2018-05-24 12:38:21 +00:00
|
|
|
|
import FocusTrap from 'focus-trap-react'
|
2019-09-11 08:06:26 +00:00
|
|
|
|
import React from 'react'
|
2018-07-25 14:07:53 +00:00
|
|
|
|
import * as animate from 'Ui/animate'
|
2018-07-12 08:09:41 +00:00
|
|
|
|
import { LinkButton } from 'Ui/Button'
|
2018-01-30 14:16:32 +00:00
|
|
|
|
import './Overlay.css'
|
2019-09-11 08:06:26 +00:00
|
|
|
|
export default function Overlay({ onClose, children, ...otherProps }) {
|
|
|
|
|
return (
|
|
|
|
|
<div id="overlayWrapper">
|
|
|
|
|
<animate.fromBottom>
|
|
|
|
|
<FocusTrap
|
|
|
|
|
focusTrapOptions={{
|
|
|
|
|
onDeactivate: onClose,
|
2019-10-01 16:42:08 +00:00
|
|
|
|
clickOutsideDeactivates: !!onClose
|
2019-09-11 08:06:26 +00:00
|
|
|
|
}}>
|
|
|
|
|
<div aria-modal="true" id="overlayContent" {...otherProps}>
|
|
|
|
|
{children}
|
2019-10-01 16:42:08 +00:00
|
|
|
|
{onClose && (
|
|
|
|
|
<LinkButton
|
|
|
|
|
aria-label="close"
|
|
|
|
|
onClick={onClose}
|
|
|
|
|
id="overlayCloseButton">
|
|
|
|
|
×
|
|
|
|
|
</LinkButton>
|
|
|
|
|
)}
|
2019-09-11 08:06:26 +00:00
|
|
|
|
</div>
|
|
|
|
|
</FocusTrap>
|
|
|
|
|
</animate.fromBottom>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
2018-01-30 14:16:32 +00:00
|
|
|
|
}
|