84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import React, { useEffect, useMemo, useState } from 'react';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
|
|
import { CSSTransition } from 'react-transition-group';
|
|
import Spinner from '@/components/elements/Spinner';
|
|
import classNames from 'classnames';
|
|
|
|
export interface RequiredModalProps {
|
|
visible: boolean;
|
|
onDismissed: () => void;
|
|
appear?: boolean;
|
|
top?: boolean;
|
|
}
|
|
|
|
type Props = RequiredModalProps & {
|
|
dismissable?: boolean;
|
|
closeOnEscape?: boolean;
|
|
closeOnBackground?: boolean;
|
|
showSpinnerOverlay?: boolean;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }: Props) => {
|
|
const [render, setRender] = useState(visible);
|
|
|
|
const isDismissable = useMemo(() => {
|
|
return (dismissable || true) && !(showSpinnerOverlay || false);
|
|
}, [dismissable, showSpinnerOverlay]);
|
|
|
|
const handleEscapeEvent = (e: KeyboardEvent) => {
|
|
if (isDismissable && closeOnEscape && e.key === 'Escape') {
|
|
setRender(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setRender(visible);
|
|
}, [visible]);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('keydown', handleEscapeEvent);
|
|
|
|
return () => window.removeEventListener('keydown', handleEscapeEvent);
|
|
}, [render]);
|
|
|
|
return (
|
|
<CSSTransition
|
|
timeout={250}
|
|
classNames={'fade'}
|
|
appear={appear}
|
|
in={render}
|
|
unmountOnExit={true}
|
|
onExited={() => onDismissed()}
|
|
>
|
|
<div className={'modal-mask'} onClick={e => {
|
|
if (isDismissable && closeOnBackground) {
|
|
e.stopPropagation();
|
|
if (e.target === e.currentTarget) {
|
|
setRender(false);
|
|
}
|
|
}
|
|
}}>
|
|
<div className={classNames('modal-container', { top })}>
|
|
{isDismissable &&
|
|
<div className={'modal-close-icon'} onClick={() => setRender(false)}>
|
|
<FontAwesomeIcon icon={faTimes}/>
|
|
</div>
|
|
}
|
|
{showSpinnerOverlay &&
|
|
<div
|
|
className={'absolute w-full h-full rounded flex items-center justify-center'}
|
|
style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
|
|
>
|
|
<Spinner/>
|
|
</div>
|
|
}
|
|
<div className={'modal-content p-6'}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CSSTransition>
|
|
);
|
|
};
|