import * as React from 'react' ; import Button from '@mui/material/Button' ; import Grid from '@mui/material/Grid' ; import { useModal } from '../../src' ; import { SimpleDialog , NestedDialog , ConfirmationDialog , SimpleModal , TransitionModal , } from './components' ; const App = ( ) => { const { showModal } = useModal ( ) ; const handleOpenConfirmationDialog = ( ) => { let timeoutId ; const modal = showModal ( ConfirmationDialog , { title : 'Hello World' , description : 'description text' , onConfirm : ( ) => { modal . hide ( ) ; } , onCancel : ( ) => { modal . hide ( ) ; } , TransitionProps : { onExited : ( ) => { clearTimeout ( timeoutId ) ; } , } , } ) ; timeoutId = setTimeout ( ( ) => { modal . update ( { title : 'Updated hello world' , description : 'updated description text' , } ) ; } , 1000 ) ; } ; return ( < Grid container spacing = { 2 } > < Grid item > < Button variant = "contained" onClick = { ( ) => showModal ( SimpleDialog ) } color = "primary" > simple dialog < /Button> < /Grid> < Grid item > < Button variant = "contained" onClick = { ( ) => showModal ( NestedDialog ) } color = "primary" > nested dialog < /Button> < /Grid> < Grid item > < Button variant = "contained" onClick = { handleOpenConfirmationDialog } color = "primary" > confirmation dialog < /Button> < /Grid> < Grid item > < Button variant = "contained" onClick = { ( ) => showModal ( SimpleModal , undefined , { destroyOnClose : true } ) } color = "primary" > simple modal < /Button> < /Grid> < Grid item > < Button variant = "contained" onClick = { ( ) => showModal ( TransitionModal ) } color = "primary" > transition modal < /Button> < /Grid> < /Grid>); } ; export default App ;