confirmation modal

2022.08.12
Confirmation modal dialog with MUI
#mui#react
use client /components/post/reExport 
import Button from  
import Dialog from  
import DialogActions from  
import DialogContent from  
import DialogContentText from  
import DialogTitle from  
import Slide from  

const Transition = forwardRef(function Transition (props, ref) {
  return <Slide direction=  ref={ref} {...props} />
})

const ConfirmationDialog = ({
  renderState,
  renderStateSetter,
  title,
  content,
  hideLeftButton,
  leftButtonContent,
  leftButtonHandler,
  rightButtonContent,
  rightButtonHandler
}) => (
  <Dialog
    open={renderState}
    TransitionComponent={Transition}
    keepMounted
    onClose={() => renderStateSetter(false)}
    sx={{ zIndex: 1200 }}
    data-testid= 
  >
    <DialogTitle>{title}</DialogTitle>
    <DialogContent>
      <DialogContentText>
        {content}
      </DialogContentText>
    </DialogContent>
    <DialogActions>
      {!hideLeftButton && <Button onClick={leftButtonHandler}>{leftButtonContent}</Button>}
      <Button
        onClick={rightButtonHandler}
        sx={{ marginLeft:   }}
      >
        {rightButtonContent}
      </Button>
    </DialogActions>
  </Dialog>
)

const Component = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open dialog</button>
      <ConfirmationDialog
        renderState={isOpen}
        renderStateSetter={setIsOpen}
        title= 
        content= 
        leftButtonContent= 
        leftButtonHandler={
          () => {
            alert( )
            setIsOpen(false)
          }
        }
        rightButtonContent= 
        rightButtonHandler={() => alert( )}
      />
    </>
  )
}

const postObj = {
  title:  ,
  date:  ,
  tags: [ ],
  imgUrl:  ,
  desc:  ,
  body: (
    <>
      <H>Confirmation modal dialog with Material UI</H>

      <p>Confirmation modal dialog with <Lnk path= >Material UI</Lnk>.</p>
      <Component />

      <Code block jsx>{ /components/post/reExport 
      import Button from  
      import Dialog from  
      import DialogActions from  
      import DialogContent from  
      import DialogContentText from  
      import DialogTitle from  
      import Slide from  

      const Transition = forwardRef(function Transition (props, ref) {
        return <Slide direction=  ref={ref} {...props} />
      })

      const ConfirmationDialog = ({
        renderState,
        renderStateSetter,
        title,
        content,
        hideLeftButton,
        leftButtonContent,
        leftButtonHandler,
        rightButtonContent,
        rightButtonHandler
      }) => (
        <Dialog
          open={renderState}
          TransitionComponent={Transition}
          keepMounted
          onClose={() => renderStateSetter(false)}
          sx={{ zIndex: 1200 }}
          data-testid= 
        >
          <DialogTitle>{title}</DialogTitle>
          <DialogContent>
            <DialogContentText>
              {content}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            {!hideLeftButton && <Button onClick={leftButtonHandler}>{leftButtonContent}</Button>}
            <Button
              onClick={rightButtonHandler}
              sx={{ marginLeft:   }}
            >
              {rightButtonContent}
            </Button>
          </DialogActions>
        </Dialog>
      )

      const Component = () => {
        const [isOpen, setIsOpen] = useState(false)
        return (
          <>
            <button onClick={() => setIsOpen(true)}>Open dialog</button>
            <ConfirmationDialog
              renderState={isOpen}
              renderStateSetter={setIsOpen}
              title= 
              content= 
              leftButtonContent= 
              leftButtonHandler={
                () => {
                  alert( )
                  setIsOpen(false)
                }
              }
              rightButtonContent= 
              rightButtonHandler={() => alert( )}
            />
          </>
        )
      }
      