@material-ui/core#DialogTitle 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>
		);
	}

DepositModal = ({ address, onClose }) => {
  const classes = useStyles();
  const { enqueueSnackbar } = useSnackbar();

  const onQRClick = () => {
    copyTextToClipboard(address);
    enqueueSnackbar(<Snackbar title="Address copied to clipboard!" iconVariant="success" />, {
      variant: "success",
      autoHideDuration: 2000
    });
  };

  return (
    <Dialog maxWidth="xs" aria-labelledby="deposit-dialog-title" open={true} onClose={onClose}>
      <DialogTitle id="deposit-dialog-title">Deposit</DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        <Box fontSize="1rem">
          <Address address={address} isCopyable />
        </Box>

        <Button onClick={onQRClick}>
          <QRCode value={address} />
        </Button>
      </DialogContent>
      <DialogActions>
        <Button autoFocus variant="contained" onClick={onClose} color="primary">
          Close
        </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>
    );
  }

FileUploadProgress = ({
    total = 0,
    inProgress,
    show,
    done,
}) => {
    const progress = total > 0 ? (done / total) * 100 : 0;

    return (
        <Dialog
            open={show}
        >
            <DialogTitle>
                <FormattedMessage id="FILEUPLOADPROGRESS.GETTING_MEDIA_FILES_READY"/>
            </DialogTitle>
            <DialogContent>
                <LinearProgress variant="determinate" value={progress} valueBuffer={(done + inProgress)} />
                <Typography variant="body2" color="textSecondary">{`${done}`} / {`${total}`}</Typography>
            </DialogContent>
        </Dialog>
    );
}

StopDialog = ({open, stops, handleClose}) => {
  const { routeList, stopList } = useContext ( AppContext )
  const { i18n } = useTranslation()
  const [ routes, setRoutes ] = useState([])
  const classes = useStyles()

  useEffect(() => {
    if (stops === undefined) {
      setRoutes([])
      return
    }
    let _routes = [];
    Object.entries(routeList).forEach(([key, route]) => {
      stops.some( ([co, stopId]) => {
        if ( route.stops[co] && route.stops[co].includes(stopId) ) {
          _routes.push(key+'/'+route.stops[co].indexOf(stopId))
          return true
        }
        return false
      })
    })
    setRoutes(_routes)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [stops])
  
  return (
    <Dialog open={open} onClose={handleClose} className={classes.dialog}>
      <DialogTitle className={classes.title}>{stopList[stops[0][1]].name[i18n.language]}</DialogTitle>
      <DialogContent>
        <List>
          {routes.map(route => (
            <SuccinctTimeReport key={route} routeId={route} />
          ))}
        </List>
      </DialogContent>
    </Dialog>
  )
}

render() {

        const { classes, open } = this.state;

        return (
            <Dialog
                className={classes.dialog}
                open={open}
                onClose={this._close_scanner_dialog}
                aria-labelledby="qr-code-scanner-dialog-title"
                aria-describedby="qr-code-scanner-dialog-description"
            >
                <DialogTitle>{t("components.qr_code_scan_dialog.title")}</DialogTitle>
                <DialogContent className={classes.dialogContent}>
                    <Suspense fallback={<div />}>
                        <QrReader
                            delay={300}
                            onError={this._handle_on_scanner_error}
                            onScan={this._handle_on_scanner_scan}
                            style={{ width: "100%" }}
                        />
                    </Suspense>
                </DialogContent>
            </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>
  )
}

DialogWindowWrapper = ({ isOpen, handleClose, title, children }) => {
  const styles = useStyles();

  return (
    <Dialog
      className={styles.dialogComponent}
      id='dialog-window'
      onClose={handleClose}
      open={isOpen}
    >
      <div className={styles.dialogTitleWrapper}>
        <DialogTitle className={styles.dialogTitle} onClose={handleClose}>
          {title}
        </DialogTitle>
        <Tooltip
          title={config.buttonTitles.CLOSE_DIALOG_TITLE}
          placement='bottom'
        >
          <span className={styles.closeButton} onClick={handleClose}>
            &#215;
          </span>
        </Tooltip>
      </div>
      <DialogContent dividers>{children}</DialogContent>
    </Dialog>
  );
}

NoteDialog = props => {
  const classes = useStyles();

  const {
    open, onClose, onChange, applicationId, isNew, title: titleOld, content: contentOld, id, label,
  } = props;
  const [title, setTitle] = useState(isNew ? '' : titleOld);
  const [content, setContent] = useState(isNew ? '' : contentOld);
  const [error, setError] = useState('');

  const handleSubmit = (evt) => {
    evt.preventDefault();
    if (isNew) {
      APIService.addNotes(applicationId, title, content).then(onChange).catch(() => setError('Error in adding notes'));
    } else {
      APIService.updateNote(applicationId, id, title, content).then(onChange).catch(() => setError('Error in adding notes'));
    }
  };

  return (
    <Dialog open={open} onClose={onClose} aria-labelledby="form-dialog-title">
      <DialogTitle style={{ marginLeft: '8px' }} id="form-dialog-title">{label}</DialogTitle>
      <DialogContent>
        <form className={classes.form} onSubmit={handleSubmit}>
          <Input type="text" label="Title" required onChange={e => setTitle(e.target.value)} value={title} />
          <Input type="text" label="Content" multiline rows="6" required onChange={e => setContent(e.target.value)} value={content} />
          <Button type="submit">{isNew ? 'Add' : 'Update'}</Button>
          <p className={classes.error}>
            {error}
          </p>
        </form>
      </DialogContent>
    </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>
  )
}

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 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>
  );
}