feat: add slide transition to modal

1 files changed, 16 insertions, 3 deletions

diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index 6ffc978..c6044af 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import {
   AppBar,
@@ -7,11 +7,13 @@ import {
   Typography,
   IconButton,
   Divider,
+  Slide,
   useMediaQuery,
   useTheme
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
+import { TransitionProps } from '@material-ui/core/transitions';
 
 interface PropTypes {
   title: string;
@@ -29,17 +31,28 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+const Transition = React.forwardRef(function Transition(
+  props: TransitionProps & { children?: React.ReactElement<any, any> },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
 const ModalScreen: React.FC<PropTypes> = ({ title, children }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
   const classes = useStyles();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const history = useHistory();
 
-  const handleClose = useCallback(() => history.goBack(), [history]);
+  const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const onExited = useCallback(() => history.goBack(), [history])
 
   return (
     <Dialog
-      open
+      open={isOpen}
+      onExited={onExited}
+      TransitionComponent={Transition}
       PaperProps={{ className: classes.root }}
       fullScreen={isMobile}
       fullWidth