File "modal.tsx"
Full Path: /home/markqprx/iniasli.pro/client/ui/overlays/modal.tsx
File size: 1.79 KB
MIME-type: text/html
Charset: utf-8
import {forwardRef} from 'react';
import {m} from 'framer-motion';
import {OverlayProps} from './overlay-props';
import {useOverlayViewport} from './use-overlay-viewport';
import {Underlay} from './underlay';
import {FocusScope} from '@react-aria/focus';
import {useObjectRef} from '@react-aria/utils';
import clsx from 'clsx';
export const Modal = forwardRef<HTMLDivElement, OverlayProps>(
(
{
children,
autoFocus = false,
restoreFocus = true,
isDismissable = true,
isOpen = false,
placement = 'center',
onClose,
},
ref
) => {
const viewPortStyle = useOverlayViewport();
const objRef = useObjectRef(ref);
return (
<div
className="fixed inset-0 isolate z-modal"
style={viewPortStyle}
onKeyDown={e => {
if (e.key === 'Escape') {
e.stopPropagation();
e.preventDefault();
onClose();
}
}}
>
<Underlay
key="modal-underlay"
onClick={() => {
if (isDismissable) {
onClose();
}
}}
/>
<m.div
ref={objRef}
className={clsx(
'pointer-events-none absolute inset-0 z-20 flex h-full w-full',
placement === 'center' && 'items-center justify-center',
placement === 'top' && 'items-start justify-center pt-40'
)}
role="presentation"
initial={{opacity: 0, scale: placement === 'top' ? 1 : 0.7}}
animate={{opacity: 1, scale: 1}}
exit={{opacity: 0, scale: 1}}
transition={{duration: 0.1}}
>
<FocusScope restoreFocus={restoreFocus} autoFocus={autoFocus} contain>
{children}
</FocusScope>
</m.div>
</div>
);
}
);