misc_pterodactyl-panel/resources/scripts/components/elements/Modal.tsx
2020-10-14 20:13:36 -07:00

134 lines
4.5 KiB
TypeScript

import React, { useEffect, useMemo, useRef, useState } from 'react';
import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro';
import styled, { css } from 'styled-components/macro';
import { breakpoint } from '@/theme';
import Fade from '@/components/elements/Fade';
import { createPortal } from 'react-dom';
export interface RequiredModalProps {
visible: boolean;
onDismissed: () => void;
appear?: boolean;
top?: boolean;
}
export interface ModalProps extends RequiredModalProps {
dismissable?: boolean;
closeOnEscape?: boolean;
closeOnBackground?: boolean;
showSpinnerOverlay?: boolean;
}
export 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 }>`
max-width: 95%;
max-height: calc(100vh - 8rem);
${breakpoint('md')`max-width: 75%`};
${breakpoint('lg')`max-width: 50%`};
${tw`relative flex flex-col w-full m-auto`};
${props => props.alignTop && css`
margin-top: 20%;
${breakpoint('md')`margin-top: 10%`};
`};
margin-bottom: auto;
& > .close-icon {
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
top: -2.5rem;
&:hover {${tw`transform rotate-90`}}
& > svg {
${tw`w-6 h-6`};
}
}
`;
const Modal: React.FC<ModalProps> = ({ 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);
}, [ dismissable, showSpinnerOverlay ]);
useEffect(() => {
if (!isDismissable || !closeOnEscape) return;
const handler = (e: KeyboardEvent) => {
if (e.key === 'Escape') setRender(false);
};
window.addEventListener('keydown', handler);
return () => {
window.removeEventListener('keydown', handler);
};
}, [ isDismissable, closeOnEscape, render ]);
useEffect(() => setRender(visible), [ visible ]);
return (
<Fade
in={render}
timeout={150}
appear={appear || true}
unmountOnExit
onExited={() => onDismissed()}
>
<ModalMask
onClick={e => e.stopPropagation()}
onContextMenu={e => e.stopPropagation()}
onMouseDown={e => {
if (isDismissable && closeOnBackground) {
e.stopPropagation();
if (e.target === e.currentTarget) {
setRender(false);
}
}
}}
>
<ModalContainer alignTop={top}>
{isDismissable &&
<div className={'close-icon'} onClick={() => setRender(false)}>
<svg xmlns={'http://www.w3.org/2000/svg'} fill={'none'} viewBox={'0 0 24 24'} stroke={'currentColor'}>
<path
strokeLinecap={'round'}
strokeLinejoin={'round'}
strokeWidth={'2'}
d={'M6 18L18 6M6 6l12 12'}
/>
</svg>
</div>
}
{showSpinnerOverlay &&
<Fade timeout={150} appear in>
<div
css={tw`absolute w-full h-full rounded flex items-center justify-center`}
style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
>
<Spinner/>
</div>
</Fade>
}
<div css={tw`bg-neutral-800 p-3 sm:p-4 md:p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
{children}
</div>
</ModalContainer>
</ModalMask>
</Fade>
);
};
const PortaledModal: React.FC<ModalProps> = ({ children, ...props }) => {
const element = useRef(document.getElementById('modal-portal'));
return createPortal(<Modal {...props}>{children}</Modal>, element.current!);
};
export default PortaledModal;