Implement a common Daialog that allows OK and Cancel to be selected.
It is good to make it into a Component and use it if it is used several times.
Here to see the completed image.
![](http://43.207.239.18/wp-content/uploads/2023/08/image.png)
OkCancelDialogComponent code.
import Grid from '@mui/material/Grid'
import { Box, BoxProps, Button, Dialog, DialogContent, Typography, TypographyProps } from '@mui/material'
import { Icon } from '@iconify/react'
import { styled } from '@mui/material/styles'
import IconButton from '@mui/material/IconButton'
const BoxWrapper = styled(Box)<BoxProps>(({ theme }) => ({
width: '100%',
margin: 'auto',
[theme.breakpoints.down('md')]: {
maxWidth: 400
}
}))
const TypographyStyled = styled(Typography)<TypographyProps>(({ theme }) => ({
fontWeight: 600,
letterSpacing: '0.18px',
marginBottom: theme.spacing(1.5),
[theme.breakpoints.down('md')]: { marginTop: theme.spacing(8) }
}))
interface Props {
open: boolean
onCancel: () => void
onOk: () => void
title: string
description: string
}
const OkCancelDialog = (props: Props) => {
const { open, onCancel: onCancel, onOk: onOk } = props
return (
<Dialog maxWidth='md' scroll='body' open={open}>
<DialogContent
sx={{
px: theme => [`${theme.spacing(6)} !important`, `${theme.spacing(6)} !important`],
maxWidth: '450px',
margin: 'auto',
width: '100%'
}}
>
<BoxWrapper>
<Grid container direction='row' justifyContent='flex-end' alignItems='center' sx={{ mb: 6 }}>
<IconButton edge='end' onClick={() => onCancel()}>
<Icon icon='basil:cross-outline' fontSize={40} />
</IconButton>
</Grid>
<Box sx={{ mb: 6, textAlign: 'center' }}>
<TypographyStyled variant='h5'>{props.title}</TypographyStyled>
<Typography variant='body2'>{props.description}</Typography>
</Box>
<Grid container direction='row' justifyContent='center' alignItems='center' gap={8}>
<Button
size='large'
type='submit'
variant='contained'
onClick={() => onOk()}
sx={{ mb: 2, width: '130px' }}
>
OK
</Button>
<Button
size='large'
color='secondary'
variant='outlined'
onClick={() => onCancel()}
sx={{ mb: 2, width: '130px' }}
>
キャンセル
</Button>
</Grid>
</BoxWrapper>
</DialogContent>
</Dialog>
)
}
export default OkCancelDialog
In order to componentise, Props are created that pass the State for opening the Dialog, the Event for Cancel and OK, a different Dialog title for each Dialog, and a description.
interface Props {
open: boolean
onCancel: () => void
onOk: () => void
title: string
description: string
}
When using the OkCancelDialogComponent, First, define the opening and closing state of the Dialog.
const [openDialog, setOpenDialog] = useState<boolean>(false)
It is then passed to the Props respectively.
By settingOpenDialog(true) at the timing when you want to open the Dialog, the Dialog can be displayed.
<OkCancelDialog
open={openDialog}
onCancel={() => {
setOpenDialog(false)
}}
onOk={onUpdate}
title='ダイアログ'
description='更新します。よろしいですか?'
></OkCancelDialog>