Implementation of common dialogs in MUI ( Nextjs / Material-ui )

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.

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>

よかったらシェアしてね！

【NestJS】How to convert Response.

Implementation of common dialogs in MUI ( Nextjs / Material-ui )

関連記事