From 3ec8fb942f09e29020f6e466932ed0cca7db3d69 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Thu, 8 Oct 2020 13:03:49 +0300 Subject: feat: add slide transition to modal --- src/components/ModalScreen/ModalScreen.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'src') 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 }, + ref: React.Ref, +) { + return ; +}); + const ModalScreen: React.FC = ({ title, children }) => { + const [isOpen, setIsOpen] = useState(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 (