diff options
author | ilyayudovin <ilyayudovin123@gmail.com> | 2020-10-29 21:28:52 +0300 |
---|---|---|
committer | ilyayudovin <ilyayudovin123@gmail.com> | 2020-10-29 21:28:52 +0300 |
commit | 5eba5c1ffcdaee9a81e965f0570b00dd26bb38c6 (patch) | |
tree | d003cb63ce9915f45142a529c865aaf6cd3a98c3 /src/components/ModalScreen | |
parent | a40961a2564738ca9f14d9e50e0d1d5c6ab7ec54 (diff) | |
download | which-ui-5eba5c1ffcdaee9a81e965f0570b00dd26bb38c6.tar.gz |
Wait till modal slide right on close
Diffstat (limited to 'src/components/ModalScreen')
-rw-r--r-- | src/components/ModalScreen/ModalScreen.tsx | 12 |
1 files changed, 8 insertions, 4 deletions
diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx index 0f2c96f..61cf44a 100644 --- a/src/components/ModalScreen/ModalScreen.tsx +++ b/src/components/ModalScreen/ModalScreen.tsx @@ -20,6 +20,7 @@ interface PropTypes { actionIcon?: JSX.Element; handleAction?: () => void; isActionDisabled?: boolean; + handleCloseModal: ()=> void; } const useStyles = makeStyles(theme => ({ @@ -42,24 +43,27 @@ const Transition = React.forwardRef(( ref: React.Ref<unknown> ) => <Slide direction="left" ref={ref} {...props} />); -const ModalScreen: React.FC<PropTypes> = ({ title, actionIcon, handleAction, isActionDisabled, children }) => { +const ModalScreen: React.FC<PropTypes> = ({ title, actionIcon, handleAction, isActionDisabled, handleCloseModal, 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(handleCloseModal, [history, handleAction]); const handleClickAction = useCallback(async () => { if (handleAction) await handleAction(); - return window.location.pathname.includes('/profile') ? null : handleClose(); + return handleClose(); }, [handleAction, handleClose]); return ( <Dialog - open={true} + open={isOpen} onClose={handleClose} + onExited={onExited} TransitionComponent={Transition} PaperProps={{ className: classes.root }} fullScreen={isMobile} |