StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make modals programatically controllable via a HOC

Browse source 
This allows entire components to be unmounted when the modal is hidden without affecting the fade in/out of the modal itself.

This also makes it easier to programatically dismiss a modal without having to copy the visibility all over the place, and makes working with props much simpler in those modal components
This commit is contained in:
Dane Everitt 2020-08-17 21:35:11 -07:00
parent d41b86f0ea
commit c28cba92e2
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
14 changed files with 192 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

12
resources/scripts/components/elements/Modal.tsx
View file

@ -13,7 +13,7 @@ export interface RequiredModalProps {
top?: boolean;
}
interface Props extends RequiredModalProps {
export interface ModalProps extends RequiredModalProps {
dismissable?: boolean;
closeOnEscape?: boolean;
closeOnBackground?: boolean;
@ -40,7 +40,7 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
}
`;
const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }) => {
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(() => {
@ -62,7 +62,13 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
}, [ render ]);
return (
<Fade timeout={150} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
<Fade
in={render}
timeout={150}
appear={appear || true}
unmountOnExit
onExited={() => onDismissed()}
>
<ModalMask
onClick={e => {
if (isDismissable && closeOnBackground) {