@material-ui/core#DialogActions JavaScript Examples

render() {
		return (
			<Dialog
				onEntered={helpers.genOnback(this.props.onClose)}
				disableBackdropClick={false}
				open={true}
				onClose={this.onClose}
			>
				<DialogTitle>Leaderboard</DialogTitle>
				<DialogContent>
					<TableContainer component={Paper}>
						<Table>
							<TableBody>
								{this.state.userStats.map((userStat, idx) => {
									return this.makeRow(
										idx + 1,
										userStat.Properties.User
									);
								})}
							</TableBody>
						</Table>
					</TableContainer>
				</DialogContent>
				<DialogActions>
					<Button onClick={this.onClose} color="primary">
						Close
					</Button>
				</DialogActions>
			</Dialog>
		);
	}

BetaBanner = () => {
  const [isBetaBarVisible, setIsBetaBarVisible] = useState(true);
  const classes = useStyles();

  const onCloseClick = () => {
    localStorage.setItem("isBetaBannerSeen", true);

    setIsBetaBarVisible(false);
  };

  return (
    <>
      {isBetaBarVisible && (
        <Dialog open={true} maxWidth="xs" fullWidth>
          <DialogContent className={classes.dialogContent}>
            <Typography variant="h3">
              <strong>Welcome!</strong>
            </Typography>
            <Box padding="1rem 0">
              <Chip label="BETA" color="secondary" className={classes.betaChip} size="small" />
            </Box>
            <div className={classes.betaText}>
              <Typography variant="body1">
                <strong>Akashlytics Deploy</strong> is currently in <strong>BETA</strong>. We strongly suggest you start with a new wallet and a small amount of
                AKT until we further stabilize the product. Enjoy!
              </Typography>
            </div>
          </DialogContent>
          <DialogActions>
            <Button variant="contained" onClick={onCloseClick} type="button" color="primary">
              Got it!
            </Button>
          </DialogActions>
        </Dialog>
      )}
    </>
  );
}

Modal = (props) => {
	const { open, handleClose, title, content, handleConfirmation } = props;
	return (
		<Dialog open={open} onClose={handleClose} aria-labelledby="dialog-title">
			<div style={{ minWidth: 300 }}>
				<DialogTitle id="dialog-title">{title}</DialogTitle>

				<DialogContent>
					{props.children ? (
						<>{props.children}</>
					) : (
						content && (
							<DialogContentText id="dialog-description">
								{content}
							</DialogContentText>
						)
					)}
				</DialogContent>

				<DialogActions>
					<Button onClick={handleClose} color="primary">
						Cancel
					</Button>
					{handleConfirmation && (
						<Button onClick={handleConfirmation} color="primary" autoFocus>
							Confirm
						</Button>
					)}
				</DialogActions>
			</div>
		</Dialog>
	);
}

export function ErrorDialog(props) {
  const alert = useSelector(state => state.alerts)
  const dispatch = useDispatch();
  
  const handleClose = () => {
    dispatch(alertActions.clear());
  }

  const titleText = alert.title || '문제가 발생하였습니다.'
  const bodyMessage = alert.message || '관리자에게 문의하여 주세요.'

  return (
    <Dialog
      open={alert.open}
      onClose={handleClose}
      aria-labelledby="error-alert-dialog-title"
      aria-describedby="error-alert-dialog-description"
    >
      { alert.title && 
        <DialogTitle id="alert-dialog-title">{titleText}</DialogTitle>
      }
      <DialogContent>
        {bodyMessage}
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary">
          닫기
        </Button>
      </DialogActions>
    </Dialog>
  );
}

DeleteDialog = ({
  speciesEdit,
  setSpeciesEdit,
  openDelete,
  setOpenDelete,
  deleteSpecies,
  loadSpeciesList,
}) => {
  const handleDelete = async () => {
    await deleteSpecies({ id: speciesEdit.id });
    loadSpeciesList(true);
    setOpenDelete(false);
    setSpeciesEdit(undefined);
  };

  const closeDelete = () => {
    setOpenDelete(false);
    setSpeciesEdit(undefined);
  };

  return (
    <Dialog
      open={openDelete}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{`Please confirm you want to delete`}</DialogTitle>
      <DialogActions>
        <Button onClick={handleDelete} color="primary">
          Delete
        </Button>
        <Button onClick={closeDelete} color="primary" autoFocus>
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}

render() {
    const { characters, characterId, open, onClose } = this.props;
    const { name, error } = this.state;
    const characterName = pathOr(null, [characterId])(characters);
    const validChar = !(characterId === null || characterName === null);

    return (
      <Dialog open={open} onClose={onClose}>
        <DialogTitle>
          {!validChar
            ? 'Add Character'
            : `Edit [${characterName}]`}
        </DialogTitle>
        <DialogContent>
          <form onSubmit={this.handleSave}>
            <TextField
              label="Character Name"
              value={name}
              onChange={this.handleChange}
              inputProps={{
                maxLength: 20,
              }}
              autoFocus
              error={Boolean(error)}
              helperText={error}
            />
          </form>
        </DialogContent>
        <DialogActions>
          {validChar &&
          <Button onClick={this.handleDelete} classes={{ label: 'text-red' }}>Delete</Button>}
          <Button onClick={onClose}>Cancel</Button>
          <Button color="primary" onClick={this.handleSave}>Confirm</Button>
        </DialogActions>
      </Dialog>
    );
  }

export default function FieldControlDialog(props) {
  return (
    <Dialog
      open={props.open}
      onClose={props.closeDialog}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      maxWidth={'lg'}
    >
      <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description"></DialogContentText>
        <div>
          <DndProvider backend={props.backend}>{props.component}</DndProvider>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={props.action} color="primary" autoFocus>
          {props.actionProcess && <CircularProgress size={24} />}
          {!props.actionProcess && 'Save'}
        </Button>
        <Button onClick={props.closeDialog} color="primary" autoFocus>
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}

render() {
    //console.log("Rendering AddGraph");
    return (
      <Dialog
        open={this.props.show}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Add Graph</DialogTitle>
        <DialogContent>
          <Grid container spacing={2} direction="column" alignItems="center">
            <Grid item>
              <FormControl>
                <InputLabel htmlFor="plotname">Plot Name</InputLabel>
                <Input
                  id="plotname"
                  onChange={event => this.plotname = event.target.value}
                  aria-describedby="plotname-helper-text"
                  inputProps={{
                    'aria-label': 'Plot Name',
                  }}
                />
                <FormHelperText id="plotname-helper-text">Can be left empty</FormHelperText>
              </FormControl>
            </Grid>
            <Grid item>
            <ToggleButtonGroup orientation="vertical" value={this.lines} onChange={(event, lines) => {this.lines = lines; this.setState({render_revision: this.state.render_revision + 1}); } } aria-label="lines available">
              {this.renderButtons()}
            </ToggleButtonGroup>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.props.addplot(this.plotname, this.lines)} color="default">
            Save
        </Button>
        </DialogActions>
      </Dialog>
    );
  }

ConfirmDelete = ({ accessTokenToDelete, onClose, onDeleted }) => {
    const { id: applicationId } = React.useContext(ApplicationContext);
    const request = useRequestWithToken();
    const { status: deleteAccessTokenStatus, action: deleteAccessToken } =
        useRequestAction(() =>
            request(
                `/common/applications/${applicationId}/access_tokens/${accessTokenToDelete}`,
                'DELETE'
            )
        );

    return (
        <Dialog open={!!accessTokenToDelete} fullWidth maxWidth="xs">
            <DialogTitle>Delete application access token?</DialogTitle>
            <DialogContent>
                Are you sure you want to delete this access token? Application
                using this token will loose access to the API.
            </DialogContent>
            <DialogActions>
                <Button onClick={onClose} color="primary">
                    Cancel
                </Button>
                <Button
                    onClick={() => deleteAccessToken('', () => onDeleted())}
                    color="error"
                    disabled={deleteAccessTokenStatus.loading}
                    startIcon={<Delete />}
                >
                    Delete
                </Button>
            </DialogActions>
        </Dialog>
    );
}

CustomDialog = ({
  open,
  onClose,
  title,
  description,
  children,
  actions,
  ...props
}) => {
  const dialogClasses = useDialogStyles();

  return (
    <Dialog
      open={open}
      onClose={onClose}
      classes={dialogClasses}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      transitionDuration={0}
      {...props}
    >
      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
      <DialogContent>
        {description && (
          <DialogContentText id="alert-dialog-description">
            {description}
          </DialogContentText>
        )}
        {children}
      </DialogContent>
      {actions && <DialogActions>{actions}</DialogActions>}
    </Dialog>
  );
}

export default function Popup(props) {
  const { btnText, children, handleClose, open, title } = props;

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary" autoFocus>
          {btnText}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

// Dialog box to display generated netlist
export function NetlistModal ({ open, close, netlist }) {
  const netfile = useSelector(state => state.netlistReducer)
  const createNetlistFile = () => {
    const titleA = netfile.title.split(' ')[1]
    const blob = new Blob([netlist], { type: 'text/plain;charset=utf-8' })
    FileSaver.saveAs(blob, `${titleA}_eSim_on_cloud.cir`)
  }
  return (
    <Dialog
      open={open}
      onClose={close}
      TransitionComponent={Transition}
      keepMounted
      aria-labelledby="generate-netlist"
      aria-describedby="generate-netlist-description"
    >
      <DialogTitle id="generate-netlist-title">{'Netlist Generator'}</DialogTitle>
      <DialogContent dividers>
        <DialogContentText id="generate-netlist-description">
          Current Netlist for given schematic...<br /><br />
          <TextareaAutosize aria-label="empty textarea" rowsMin={20} rowsMax={50} style={{ minWidth: '500px' }} value={netlist} />
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        {/* Button to download the netlist */}
        <Button color="primary" onClick={createNetlistFile}>
          Download
        </Button>
        <Button onClick={close} color="primary" autoFocus>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default function NewVersionDialog(props) {
  const showNewVersionDialog = useSelector(
    (state) => state.Commons.showNewVersionDialog
  );
  const { value } = useAsync(fetchNewVersionDate);
  const dispatch = useDispatch();

  if (!value) {
    return null;
  }

  function onSubmit() {
    dispatch(hideNewVersionDialog());
    window.location.reload();
  }

  return (
    <Dialog
      open={showNewVersionDialog}
      disableEscapeKeyDown
      disableBackdropClick
    >
      <DialogTitle>{value.title}</DialogTitle>
      <DialogContent>{value.description}</DialogContent>
      <DialogActions>
        <Button onClick={onSubmit}>رفتن به نسخه‌ی جدید</Button>
      </DialogActions>
    </Dialog>
  );
}

function DialogComponent() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="contained" color="primary" onClick={handleClickOpen}>
        Open Dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Dialog Example</DialogTitle>
        <DialogContent>
          <DialogContentText>
            This is a dialog from the Material UI app rendered in a React{" "}
            <code>Portal</code>.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={handleClose}
            variant="contained"
            color="primary"
            autoFocus
          >
            Nice
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

function DialogComponent() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="contained" color="primary" onClick={handleClickOpen}>
        Open Dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Dialog Example</DialogTitle>
        <DialogContent>
          <DialogContentText>
            This is a dialog from the Material UI app rendered in a React <code>Portal</code>.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} variant="contained" color="primary" autoFocus>
            Nice
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default function UrlsDialog(props) {
    const classes = useStyles();
    return (
        <Dialog open={props.state.hitsopen} onClose={props.handleClose} aria-labelledby="form-dialog-title">
            <DialogTitle id="form-dialog-title">Link Activity</DialogTitle>
            <DialogContent>
                {props.hitActivity.map((activity) => (
                    <Accordion className={classes.accordion}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="panel1a-content"
                            id="panel1a-header"
                        >
                            <Typography className={classes.heading}>{activity.data.timestamp}</Typography>
                        </AccordionSummary>
                        <AccordionDetails>
                            <Box bgcolor="text.primary" color="background.paper" p={2} width={1}>
                                <div>
                                    <p><b>IPV4:</b>{activity.data.ipv4}</p>
                                    <p><b>User-Agent:</b>{activity.data.useragent}</p>
                                </div>
                            </Box>

                        </AccordionDetails>
                    </Accordion>
                ))}
            </DialogContent>
            <DialogActions>
                <Button onClick={props.handleClose} color="primary">
                    Cancel
              </Button>
            </DialogActions>
        </Dialog>
    );
}

export default function RemoveDialog({ open, setOpen, name, action }) {
  return (
    <Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm">
      <DialogTitle>{name}</DialogTitle>
      <DialogContent>
        <DialogContentText>Are you sure that you want to remove selected item?</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={action}>Remove Item</Button>
        <Button onClick={() => setOpen(false)} color="primary">
          Keep Item
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default function SettingsDialog({open, onClose}) {
    const classes = useStyles();
    const [selectedTab, setSelectedTab] = useState(0);

    const handleChange = (_, newValue) => {
        setSelectedTab(newValue);
    };

    return (
        <Dialog open={open} onClose={onClose} classes={{paper: classes.paper}}>
            <Tabs value={selectedTab} onChange={handleChange}>
                <Tab label="Credentials"/>
                <Tab label="Devices"/>
                <Tab label="Settings"/>
            </Tabs>
            <CredentialsOptions className={classes.container} hidden={selectedTab !== 0}/>
            <DeviceSelector className={classes.container} hidden={selectedTab !== 1}/>
            <ConnectionOptions className={classes.container} hidden={selectedTab !== 2}/>
            <DialogActions>
                <Button className={classes.button} onClick={onClose}>
                    Done
                </Button>
            </DialogActions>
        </Dialog>
    );
}

function ConfirmClearDialog(props) {
  const { setQueue, confirmDialog, setConfirmDialog } = props;

  function handleClickYes() {
    setQueue([]);
  }

  function handleClickNo() {
    setConfirmDialog({ ...confirmDialog, isOpen: false });
  }

  return (
    <Dialog
      open={confirmDialog.isOpen}
      PaperProps={{ style: { backgroundColor: "orange", boxShadow: "none" } }}
    >
      <DialogTitle>
        <Typography variant="h6" color="primary">
          {confirmDialog.title}
        </Typography>
      </DialogTitle>

      <DialogContent>
        <Typography variant="subtitle2" color="primary">
          {confirmDialog.subTitle}
        </Typography>
      </DialogContent>

      <DialogActions>
        <Button onClick={handleClickYes}>
          <Typography color="primary"> Yes </Typography>
        </Button>
        <Button onClick={handleClickNo}>
          <Typography color="primary"> No </Typography>
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function UrlsDialog(props) {
  return (
    <Dialog open={props.state.warnOpen} onClose={props.warnClose} aria-labelledby="form-dialog-title">
      <DialogTitle id="form-dialog-title">Replace?</DialogTitle>
      <DialogContent>
        <DialogContentText>There is already a Short URL with this same name. Do you want to Replace?</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={props.warnClose} color="primary">
          Cancel
        </Button>
        <Button onClick={props.handleReplace} color="primary">
          Replace
        </Button>
      </DialogActions>
    </Dialog>
  );
}

render() {
		return (
			<Dialog
				onEntered={helpers.genOnback(this.close)}
				open={this.state.open}
				className="find-game-dialog"
				disableBackdropClick={false}
				onClose={this.close}
			>
				<DialogTitle>Find game</DialogTitle>
				<DialogContent>
					<DialogContentText>
						Enter any game ID or URL to find it. You can find the
						game URL in the address bar for any opened game, or by
						choosing "Share" in the top right menu of any game.
					</DialogContentText>
					<TextField
						id="find-game-by-id-input-field"
						label="Game ID"
						autoFocus
						margin="dense"
						fullWidth
					/>
					<DialogActions>
						<Button onClick={this.close} color="primary">
							Cancel
						</Button>
						<Button
							onClick={this.onFind}
							color="primary"
						>
							Find
						</Button>
					</DialogActions>
				</DialogContent>
			</Dialog>
		);
	}

AccountsModal = ({ onClose }) => {
  const classes = useStyles();
  const { address, setSelectedWallet, wallets, setWallets } = useWallet();
  const { localCerts, setLocalCert, setValidCertificates, setSelectedCertificate } = useCertificate();
  const { wallets: storageWallets } = useStorageWallets();
  const history = useHistory();

  const handleSelectAccount = (wallet) => {
    if (wallet.address !== address) {
      const newWallet = wallets.find((w) => w.address === wallet.address);

      // Update memory wallets
      for (let i = 0; i < wallets.length; i++) {
        wallets[i].selected = wallets[i].address === wallet.address;
      }

      // Update storage wallets
      const newStorageWallets = storageWallets.map((w) => ({ ...w, selected: w.address === wallet.address }));
      const localCert = localCerts.find((c) => c.address === wallet.address);

      updateStorageWallets(newStorageWallets);
      setWallets(wallets);
      setSelectedWallet(newWallet);
      setValidCertificates([]);
      setSelectedCertificate(null);

      if (localCert) {
        setLocalCert(localCert);
      }

      onClose();

      history.replace(UrlService.dashboard());
    }
  };

  const handleAddAccount = () => {
    history.push(UrlService.register(true));
    onClose();
  };

  return (
    <Dialog open={true} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle>
        <span className={classes.dialogTitle}>
          Accounts
          <Button variant="contained" size="small" color="primary" onClick={handleAddAccount}>
            Add account
          </Button>
        </span>
      </DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        <List className={classes.list}>
          {storageWallets.map((wallet) => {
            return (
              <ListItem key={wallet.address} dense button onClick={() => handleSelectAccount(wallet)}>
                <ListItemIcon>{wallet.address === address && <CheckIcon color="primary" />}</ListItemIcon>
                <ListItemText
                  classes={{ secondary: classes.secondaryText }}
                  primary={
                    <Box display="flex" alignItems="center" justifyContent="space-between" fontSize="1rem">
                      {wallet.name}
                    </Box>
                  }
                  secondary={wallet.address}
                />
              </ListItem>
            );
          })}
        </List>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} type="button" autoFocus variant="contained" color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

function DiagnosticContainer(props) {
  const { reminderStatus, setReminderStatus } = props;
  const handleClose = () => {
    setReminderStatus(false);
  };
  const classes = useStyles();
  const { userSession } = useBlockstack();
  const today = new Date();
  const { i18n } = useTranslation();
  const history = useHistory();

  return (
    <div>
      <Typography variant="h5">
        <Trans i18nKey="logSection.text.hello.hello " />
        <b>{userSession.loadUserData().profile.name}</b>
      </Typography>
      <Typography variant="h6">
        <Trans i18nKey="logSection.text.todayIs.todayIs" />:{' '}
        <b>{today.toLocaleDateString(i18n.languages, dateOptions)}</b>{' '}
      </Typography>
      <hr className={classes.hr} />
      <HealthLogToggle />
      <Dialog
        open={reminderStatus}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogContent className={classes.dialog}>
          <DialogContentText id="alert-dialog-description">
            <Trans i18nKey="logSection.text.takeSurvey.takeASurvey" />{' '}
          </DialogContentText>
          <DialogActions className={classes.buttonContainer}>
            <Button
              className={classes.button}
              color="default"
              onClick={() => {
                handleClose();
                history.push('/symptomsurvey');
              }}
            >
              <Trans i18nKey="logSection.text.takeSurvey.takeASurvey" />
            </Button>
            <Button onClick={handleClose} color="default">
              <Trans i18nKey="surveySection.text.close.close" />
            </Button>
          </DialogActions>
        </DialogContent>
      </Dialog>
    </div>
  );
}

function ContactInfo({ requestId }) {
  const classes = useStyles();
  const user = useUser();
  const [
    hasAccess,
    requestAccess,
    addUserToAccessList,
    confirmationDialogOpen,
    closeConfirmationDialog,
  ] = useContactInfo(requestId);

  async function handleOK() {
    await addUserToAccessList();
    closeConfirmationDialog();
  }

  function handleCancel() {
    closeConfirmationDialog();
  }

  return (
    <div className={classes.root}>
      {hasAccess ? (
        <ContactDetails requestId={requestId} />
      ) : (
        <>
          {user ? (
            <Button
              size="small"
              startIcon={<RequestContactIcon />}
              onClick={requestAccess}>
              Show Contact Info...
            </Button>
          ) : (
            <Button
              size="small"
              component={Link}
              to={LOGIN_PATH}
              startIcon={<RequestContactIcon />}>
              Please login to see contact info
            </Button>
          )}
          <Dialog open={confirmationDialogOpen}>
            <DialogTitle>Viewing Contact Details</DialogTitle>
            <DialogContent>
              <DialogContentText>
                This volunteer system is open to public, but to minimize abuse
                we note who looks up the contact information on requests.
              </DialogContentText>
              <DialogContentText>
                We will only ask for this confirmation once per request.
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button onClick={handleCancel}>Cancel</Button>
              <Button onClick={handleOK} color="primary">
                OK
              </Button>
            </DialogActions>
          </Dialog>
        </>
      )}
    </div>
  );
}

DeleteDialog = ({
  selectedItem,
  openDelete,
  setOpenDelete,
  deleteRegion,
  deleteCollection,
  showSnackbar,
}) => {
  const handleDelete = async () => {
    try {
      let res;
      if (selectedItem.isCollection) {
        res = await deleteCollection(selectedItem.id);
      } else {
        res = await deleteRegion(selectedItem.id);
      }
      if (res?.error) {
        throw res.message;
      } else {
        showSnackbar(
          `${
            selectedItem.isCollection
              ? res?.collection?.name
              : res?.region?.name
          } deleted`
        );
        setOpenDelete(false);
      }
    } catch (error) {
      alert(`Failed to delete item: ${error}`);
    }
  };

  const closeDelete = () => {
    setOpenDelete(false);
  };

  return (
    <Dialog
      open={openDelete}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">
        {`Are you sure you want to delete ${selectedItem?.name}?`}
      </DialogTitle>
      <DialogActions>
        <Button onClick={closeDelete} color="primary" autoFocus>
          Cancel
        </Button>
        <Button onClick={handleDelete} variant="contained" color="primary">
          Delete
        </Button>
      </DialogActions>
    </Dialog>
  );
}

render() {
        return (
            <Dialog fullWidth={true} open={this.props.isOpen}>
                <DialogTitle>
                    <Box display="flex" alignItems="center">
                        <Box flexGrow={1}>{t('ehr', 'Request Data')}</Box>
                        <Box>
                            <IconButton onClick={this.props.onClose}>
                                <CloseIcon />
                            </IconButton>
                        </Box>
                    </Box>
                </DialogTitle>
                <DialogContent>
                    <Grid container direction="column">
                        <Grid item xs={6}>
                            <KailonaTextField
                                inputRef={this.toEmailRef}
                                id="providerEmail"
                                type="text"
                                label={t('ehr', 'Email')}
                                style={{ width: '100%' }}
                            />
                        </Grid>
                        <Grid item xs={12} style={{ marginTop: '20px' }}>
                            <Grid container direction="column">
                                <Grid item>
                                    <Typography variant="body2">{t('ehr', 'Message to Provider:')}</Typography>
                                </Grid>
                                <Grid item>
                                    <TextareaAutosize
                                        ref={this.emailBodyRef}
                                        rowsMin={5}
                                        defaultValue={this.defaultEmailBody}
                                        style={{ width: '100%', resize: 'vertical' }}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </DialogContent>
                <DialogActions>
                    <KailonaButton
                        class="default"
                        title={t('ehr', 'Cancel')}
                        onClick={this.props.onClose}
                        disabled={this.state.loading}
                    />
                    <KailonaButton
                        class="primary"
                        title={t('ehr', 'Send Request')}
                        onClick={this.sendRequest}
                        loading={this.state.loading}
                        disabled={this.state.loading}
                    />
                </DialogActions>
            </Dialog>
        );
    }

export default function AddViewDialog(props) {
  return (
    <Dialog
      open={props.open}
      onClose={props.closeDialog}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      maxWidth={'lg'}
    >
      <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
      <DialogContent style={{ width: 400 }}>
        <div class="dialog-input">
          <Select
            displayEmpty
            onChange={(e) => props.setCollection(e.target.value)}
            style={{ width: '100%' }}
          >
            {props.collectionArr.map((value) => {
              return <MenuItem value={value}>{value}</MenuItem>;
            })}
          </Select>
        </div>
        <div class="dialog-input">
          <input
            value="Position generated on publish"
            readonly
            style={{ width: '97%' }}
          />
        </div>
        <div class="dialog-input">
          <input
            placeholder="Enter view name here"
            type="text"
            style={{ width: '97%' }}
            onChange={(e) => props.setName(e.target.value)}
          />
        </div>
        <div class="dialog-input">
          <input
            placeholder="Enter description here"
            type="text"
            style={{ width: '97%' }}
            onChange={(e) => props.setDescription(e.target.value)}
          />
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={props.action} color="primary" autoFocus>
          {props.actionProcess && <CircularProgress size={24} />}
          {!props.actionProcess && 'Add'}
        </Button>
        <Button onClick={props.closeDialog} color="primary" autoFocus>
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}

DeleteDialog = ({ handleDelete, bodyType }) => {
  const [modalOpen, setModalOpen] = useState(false);
  const classes = useQuesPageStyles();

  const handleModalOpen = () => {
    setModalOpen(true);
  };

  const handleModalClose = () => {
    setModalOpen(false);
  };

  const handleDeleteClick = () => {
    handleDelete();
    handleModalClose();
  };

  return (
    <div style={{ display: 'inline' }}>
      {bodyType === 'comment' ? (
        <Button
          size="small"
          color="primary"
          className={classes.commentBtns}
          onClick={handleModalOpen}
        >
          delete
        </Button>
      ) : (
        <Button
          size="small"
          color="primary"
          variant="contained"
          className={classes.bottomBtns}
          onClick={handleModalOpen}
        >
          Delete
        </Button>
      )}
      <Dialog open={modalOpen} onClose={handleModalClose}>
        <DialogTitle>Confirm Delete</DialogTitle>
        <DialogContent>
          <DialogContentText>
            {`Are you sure you want to delete your ${
              bodyType ? bodyType : 'question'
            }?`}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button autoFocus onClick={handleModalClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleDeleteClick} color="primary">
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

DeleteDialog = ({ handleDelete, title, isMobile }) => {
  const [open, setOpen] = useState(false);
  const classes = useDeleteBtnStyles();

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleActionClick = () => {
    handleClose();
    handleDelete();
  };

  return (
    <div>
      {!isMobile ? (
        <Button
          className={classes.deleteButton}
          startIcon={<DeleteIcon />}
          onClick={handleClickOpen}
        >
          Delete
        </Button>
      ) : (
        <IconButton onClick={handleClickOpen} className={classes.deleteButton}>
          <DeleteIcon />
        </IconButton>
      )}
      <Dialog open={open} keepMounted onClose={handleClose}>
        <DialogTitle>Confirm Delete</DialogTitle>
        <DialogContent>
          <DialogContentText>
            {`Are you sure want to delete "${title}" ?`}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleActionClick} color="primary">
            Ok
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}