misc_pterodactyl-panel/resources/scripts/components/elements/Modal.tsx

99 lines
3.4 KiB
TypeScript
Raw Normal View History

import React, { useEffect, useMemo, useState } from 'react';
2019-07-10 05:41:09 +00:00
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
import Spinner from '@/components/elements/Spinner';
2020-07-04 17:15:06 +00:00
import tw from 'twin.macro';
import styled from 'styled-components/macro';
import Fade from '@/components/elements/Fade';
2019-07-10 05:41:09 +00:00
2019-08-03 05:22:01 +00:00
export interface RequiredModalProps {
2019-07-10 05:41:09 +00:00
visible: boolean;
onDismissed: () => void;
appear?: boolean;
2020-04-03 23:39:55 +00:00
top?: boolean;
2019-08-03 05:22:01 +00:00
}
2020-07-04 17:15:06 +00:00
interface Props extends RequiredModalProps {
2019-07-10 05:41:09 +00:00
dismissable?: boolean;
closeOnEscape?: boolean;
closeOnBackground?: boolean;
showSpinnerOverlay?: boolean;
2019-07-10 05:41:09 +00:00
}
2020-07-04 17:15:06 +00:00
const ModalMask = styled.div`
${tw`fixed z-50 overflow-auto flex w-full inset-0`};
background: rgba(0, 0, 0, 0.70);
`;
const ModalContainer = styled.div<{ alignTop?: boolean }>`
${tw`relative flex flex-col w-full m-auto`};
max-width: 50%;
// @todo max-w-screen-lg perhaps?
${props => props.alignTop && 'margin-top: 10%'};
& > .close-icon {
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
top: -2rem;
&:hover {${tw`transform rotate-90`}}
}
`;
const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }) => {
const [ render, setRender ] = useState(visible);
const isDismissable = useMemo(() => {
return (dismissable || true) && !(showSpinnerOverlay || false);
2020-07-04 17:15:06 +00:00
}, [ dismissable, showSpinnerOverlay ]);
2019-07-10 05:41:09 +00:00
const handleEscapeEvent = (e: KeyboardEvent) => {
if (isDismissable && closeOnEscape && e.key === 'Escape') {
2019-07-10 05:41:09 +00:00
setRender(false);
}
};
2020-07-04 17:15:06 +00:00
useEffect(() => setRender(visible), [ visible ]);
2019-07-10 05:41:09 +00:00
useEffect(() => {
window.addEventListener('keydown', handleEscapeEvent);
return () => window.removeEventListener('keydown', handleEscapeEvent);
2020-07-04 17:15:06 +00:00
}, [ render ]);
2019-07-10 05:41:09 +00:00
return (
2020-07-04 17:15:06 +00:00
<Fade timeout={250} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
<ModalMask
onClick={e => {
if (isDismissable && closeOnBackground) {
e.stopPropagation();
if (e.target === e.currentTarget) {
setRender(false);
}
2019-07-10 05:41:09 +00:00
}
2020-07-04 17:15:06 +00:00
}}
>
<ModalContainer alignTop={top}>
{isDismissable &&
2020-07-04 17:15:06 +00:00
<div className={'close-icon'} onClick={() => setRender(false)}>
2019-07-10 05:41:09 +00:00
<FontAwesomeIcon icon={faTimes}/>
</div>
}
{showSpinnerOverlay &&
<div
2020-07-04 17:15:06 +00:00
css={tw`absolute w-full h-full rounded flex items-center justify-center`}
style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
>
<Spinner/>
</div>
}
2020-07-04 17:15:06 +00:00
<div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-250`}>
{children}
2019-07-10 05:41:09 +00:00
</div>
2020-07-04 17:15:06 +00:00
</ModalContainer>
</ModalMask>
</Fade>
2019-07-10 05:41:09 +00:00
);
};
2020-07-04 17:15:06 +00:00
export default Modal;