import React , { FC , HTMLAttributes , ReactChild } from 'react' ; import { makeStyles } from '@material-ui/core/styles' ; import Button from '@material-ui/core/Button' ; import Dialog from '@material-ui/core/Dialog' ; import AppBar from '@material-ui/core/AppBar' ; import Toolbar from '@material-ui/core/Toolbar' ; import IconButton from '@material-ui/core/IconButton' ; import Typography from '@material-ui/core/Typography' ; import CloseIcon from '@material-ui/icons/Close' ; import Slide from '@material-ui/core/Slide' ; const useStyles = makeStyles ( ( theme ) => ( { appBar : { position : 'relative' } , title : { marginLeft : theme . spacing ( 2 ) , flex : 1 } } ) ) ; const Transition = React . forwardRef ( function Transition ( props , ref ) { return < Slide direction = "up" ref = { ref } { ... props } />; } as any ) ; export interface Props extends HTMLAttributes < HTMLDivElement > { dialogContent : ReactChild ; dialogTitle : string ; dialogSubmitTitle : string ; dialogTrigger : ReactChild ; handleCancel : any ; handleSubmit : any ; } export const FullscreenDialog = ( { dialogContent , dialogTitle , dialogSubmitTitle , dialogTrigger , handleCancel , handleSubmit , } ) => { const classes = useStyles ( ) ; const [ open , setOpen ] = React . useState ( false ) ; const handleClickOpen = ( ) => { setOpen ( true ) ; } ; const handleClose = ( ) => { setOpen ( false ) ; handleCancel ( ) ; } ; const _handleSubmit = ( ) => { handleClose ( ) ; handleSubmit ( ) ; } ; return ( < React . Fragment > < div onClick = { handleClickOpen } > { dialogTrigger } < /div> < Dialog fullScreen open = { open } onClose = { handleClose } TransitionComponent = { Transition } > < AppBar className = { classes . appBar } > < Toolbar > < IconButton edge = "start" color = "inherit" onClick = { handleClose } aria - label = "close" > < CloseIcon /> < /IconButton> < Typography variant = "h6" className = { classes . title } > { dialogTitle } < /Typography> < Button autoFocus color = "inherit" onClick = { _handleSubmit } > { dialogSubmitTitle } < /Button> < /Toolbar> < /AppBar> { dialogContent } < /Dialog> < /React.Fragment>); } ;