@material-ui/core#Dialog TypeScript Examples

The following examples show how to use @material-ui/core#Dialog. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DeleteDialog.tsx    From vscode-crossnote with GNU Affero General Public License v3.0 7 votes vote down vote up
export function DeleteDialog(props: Props) {
  const { t } = useTranslation();
  const note = props.note;

  const deleteNote = useCallback((note: Note) => {
    vscode.postMessage({
      action: MessageAction.DeleteNote,
      data: note,
    });
  }, []);

  return (
    <Dialog open={props.open} onClose={props.onClose}>
      <DialogTitle>{t("delete-file-dialog/title")}</DialogTitle>
      <DialogContent>
        <DialogContentText>
          {t("delete-file-dialog/subtitle")}
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button
          style={{ color: "red" }}
          onClick={() => {
            deleteNote(note);
            props.onClose();
          }}
        >
          {t("general/Delete")}
        </Button>
        <Button onClick={props.onClose}>{t("general/cancel")}</Button>
      </DialogActions>
    </Dialog>
  );
}
Example #2
Source File: Dialog.tsx    From Demae with MIT License 6 votes vote down vote up
_Dialog = ({ open, title, body, actions, onClose }: { open: boolean, title?: string, body?: string, actions: Action[], onClose: () => void }) => {
	if (open) {
		return (
			<Dialog onClose={onClose} open={open} maxWidth='md'>
				<div style={{ minWidth: '280px' }}>
					<DialogTitle>
						{title}
					</DialogTitle>
					{body && <DialogContent dividers>
						{body}
					</DialogContent>}
					<DialogActions>
						{actions.map((action, index) => {
							return (
								<Button key={index} variant={action.variant} color={action.color} autoFocus={action.autoFocus} onClick={() => {
									onClose()
									if (action.handler) {
										action.handler()
									}
								}}>
									{action.title}
								</Button>
							)
						})
						}
					</DialogActions>
				</div>
			</Dialog>
		)
	}
	return <></>
}
Example #3
Source File: useAlert.tsx    From anchor-web-app with Apache License 2.0 6 votes vote down vote up
export function Component({
  closeDialog,
  title,
  description,
  agree = 'Agree',
}: DialogProps<AlertParams, FormReturn>) {
  const classes = useAlertStyles();

  return (
    <Dialog
      open
      classes={classes}
      onClose={() => closeDialog()}
      disableBackdropClick
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      style={{ padding: 100 }}
    >
      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}

      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          {description}
        </DialogContentText>
      </DialogContent>

      <DialogActions>
        <ActionButton
          autoFocus
          style={{ width: '100%' }}
          onClick={() => closeDialog()}
        >
          {agree}
        </ActionButton>
      </DialogActions>
    </Dialog>
  );
}
Example #4
Source File: RenderErrorView.tsx    From abacus with GNU General Public License v2.0 6 votes vote down vote up
export default function (props: { renderError: RenderError }): JSX.Element {
  const classes = useStyles()
  return (
    <div className={classes.root}>
      <Dialog open={true} maxWidth={false}>
        <DialogTitle disableTypography>
          <Typography variant='h5'>Oops! Something went wrong...</Typography>
        </DialogTitle>
        <DialogContent className={classes.dialogContent}>
          <img
            src='/img/hippo-with-turtle.jpg'
            alt={`"hippo" by .wilkie is licensed with CC BY-NC-SA 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/2.0/`}
          />
          <pre className={classes.pre}>{props.renderError.error.stack || props.renderError.error.message}</pre>
        </DialogContent>
        <DialogActions>
          <Button component={'a'} href='/'>
            Go home
          </Button>
          <Button onClick={props.renderError.clear} color='primary'>
            Try again
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}
Example #5
Source File: Confirmation.tsx    From clarity with Apache License 2.0 6 votes vote down vote up
render() {
    return (
      <Dialog
        open={this.props.show}
        onClose={this.props.dismiss}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">{this.props.title}</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {this.props.confirmation}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => {
              this.props.cancel();
            }}
            color="secondary"
          >
            {this.props.cancelLabel}
          </Button>
          <Button
            onClick={() => {
              this.props.proceed();
            }}
            color="primary"
            autoFocus
          >
            {this.props.proceedLabel}
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
Example #6
Source File: OverclockingCard.tsx    From Pi-Tool with GNU General Public License v3.0 6 votes vote down vote up
EnableOverclockingDialog: React.FC<EnableOverclockingDialogProps> = ({ onClose, open }) => {
    const classes = useStyles();

    const handleCancel = () => { onClose(false) }
    const handleOk = () => { onClose(true) }

    return (
        <Dialog
            disableBackdropClick
            disableEscapeKeyDown
            maxWidth="xs"
            aria-labelledby="confirmation-dialog-title"
            open={open}>
            <DialogTitle id="confirmation-dialog-title">
                <Typography variant="h5" className={classes.iconHeader}>
                    <WarningIcon />  Overclocking warning
	      </Typography>
            </DialogTitle>
            <DialogContent>
                <Typography>
                    It is recommended that you save any important data before using this tool. Operating your Raspberry Pi outside of official Raspberry Pi specifications or outside factory settings, including the conducting of overclocking, may damage your system components and lead to system instabilities. <br /> <br /> Cooler Master does not provide support or service for issues or damages related to use of the system components outside of official specifications or factory settings. You may also not receive support from your board or system manufacturer.
		</Typography>
            </DialogContent>
            <DialogActions>
                <Button autoFocus onClick={handleCancel} color="primary" variant="contained">
                    Cancel
	    </Button>
                <Button onClick={handleOk} color="primary" variant="contained">
                    Ok
	    </Button>
            </DialogActions>
        </Dialog>
    )
}
Example #7
Source File: ForgotPasswordModal.tsx    From DamnVulnerableCryptoApp with MIT License 6 votes vote down vote up
ForgotPasswordModal = (props: IModalProps) => {

  const [username, setUsername] = useState("");
  const onUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => setUsername(e.target.value);
  const { isOpen, setIsOpen, setFlag } = props;


  const onModalClose = () => setIsOpen(false);

  const onSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault();

    TimingAttackService.forgotPassword(username).then(res => setFlag(res.flag));
    onModalClose();
  };


  return (
    <Dialog open={isOpen} container={getContainer} style={{ position: 'absolute' }} onClose={onModalClose} BackdropProps={{ style: { position: 'absolute' } }}>
      <DialogTitle >Forgot Password</DialogTitle>
      <DialogContent>
        <form noValidate autoComplete="off" onSubmit={onSubmit}>
          <Alert severity="info">
            Type your username here. If the username is valid an email will be sent to it. No other feedback will be given
          </Alert>

          <TextField fullWidth label="Username" value={username} onChange={onUsernameChange} autoFocus />

          <Box mt={3} textAlign="right">
            <Button variant="contained" color="primary" type="submit">Submit</Button>
          </Box>
        </form>
      </DialogContent>
    </Dialog>
  );
}
Example #8
Source File: dialog.tsx    From jupyter-extensions with Apache License 2.0 6 votes vote down vote up
StyledDialog = withStyles({
  paper: {
    minHeight: (props: StyledDialogProps) => props.height ?? 0,
    backgroundColor: 'var(--jp-layout-color1)',
    color: 'var(--jp-ui-font-color1)',
  },
})((props: StyledDialogProps) => {
  return <Dialog {...props} />;
})
Example #9
Source File: Main.tsx    From SpaceEye with MIT License 6 votes vote down vote up
WindowsOnboardingDialog: React.FC<WindowsOnboardingDialogProps> = props => (
    <Dialog open={props.show} style={{ userSelect: 'none' }}>
        <DialogTitle>Welcome to SpaceEye!</DialogTitle>
        <DialogContent>
            <DialogContentText>
                To make sure the app icon is always visible in your taskbar, click the button below
                and select &quot;Show icon and notifications&quot; for &quot;SpaceEye&quot;.
            </DialogContentText>
            <DialogContentText>
                You can do this later by Windows searching for &quot;Select which icons appear on
                the taskbar&quot;
            </DialogContentText>
        </DialogContent>
        <DialogActions>
            <Button onClick={props.onDone}>Done</Button>
            <Button color="primary" onClick={props.onOpenSettings}>
                Open Icon Settings
            </Button>
        </DialogActions>
    </Dialog>
)
Example #10
Source File: ExportDataPopup.tsx    From Teyvat.moe with GNU General Public License v3.0 6 votes vote down vote up
ExportDataPopup: FunctionComponent<ExportDataPopupProps> = ({
  title,
  message,
  fetchData,
  trigger,
}) => {
  const [data, setData] = useState<string>('');
  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
  const classes = useStyles();

  // When the popup opens, update the contents.
  const performOpen = () => {
    setData(fetchData());
  };

  const onOpen = useCallback(() => setIsDialogOpen(true), []);
  const onClose = useCallback(() => setIsDialogOpen(false), []);

  return (
    <div>
      {cloneElement(trigger, { onClick: onOpen })}
      <Dialog
        PaperProps={{ className: classes.dialog }}
        open={isDialogOpen}
        onEntering={performOpen}
        fullWidth
        maxWidth="lg"
        onClose={onClose}
      >
        <DialogTitle onClose={onClose}>{title}</DialogTitle>
        <DialogContent>
          <DialogContentText>{message}</DialogContentText>
          <CopyTextArea text={data} rows={4} />
        </DialogContent>
      </Dialog>
    </div>
  );
}
Example #11
Source File: BaseModal.tsx    From frontend with Apache License 2.0 6 votes vote down vote up
BaseModal: React.FunctionComponent<IProps> = ({
  open,
  title,
  submitButtonText,
  content,
  onSubmit,
  onCancel,
}) => {
  return (
    <Dialog
      open={open}
      onClose={onCancel}
      aria-labelledby="form-dialog-title"
      fullWidth
    >
      <DialogTitle id="form-dialog-title">{title}</DialogTitle>
      <ValidatorForm onSubmit={onSubmit} instantValidate>
        <DialogContent>{content}</DialogContent>
        <DialogActions>
          <Button onClick={onCancel} color="primary">
            Cancel
          </Button>
          <Button type="submit" color="primary">
            {submitButtonText}
          </Button>
        </DialogActions>
      </ValidatorForm>
    </Dialog>
  );
}
Example #12
Source File: index.tsx    From react-app-architecture with Apache License 2.0 6 votes vote down vote up
export default function ConfirmationDialog({
  open,
  onClose,
  title,
  message,
  onPositiveAction,
  onNegativeAction,
  positionText = 'Yes',
  negativeText = 'No',
}: Props): ReactElement {
  const classes = useStyles();
  return (
    <Dialog
      open={open}
      onClose={onClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      PaperProps={{ className: classes.paper }}
      PaperComponent={PaperComponent}
    >
      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">{message}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onPositiveAction} color="primary">
          {positionText}
        </Button>
        <Button onClick={onNegativeAction} color="primary" autoFocus>
          {negativeText}
        </Button>
      </DialogActions>
    </Dialog>
  );
}
Example #13
Source File: UnregisterEntityDialog.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
UnregisterEntityDialog = (props: UnregisterEntityDialogProps) => {
  const { open, onConfirm, onClose, entity } = props;
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle id="responsive-dialog-title">
        Are you sure you want to unregister this entity?
      </DialogTitle>
      <DialogContent>
        <Contents entity={entity} onConfirm={onConfirm} />
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary">
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
}
Example #14
Source File: SharedDialogWrapper.tsx    From react-admin-import-csv with MIT License 6 votes vote down vote up
export function SharedDialogWrapper(props: {
  open: boolean;
  title: string;
  subTitle: string;
  handleClose: () => any;
  children?: any;
}) {
  return (
    <Dialog
      open={props.open}
      onClose={props.handleClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
      <DialogContent>
        <div style={{ width: "400px", maxWidth: "100%" }}>
          <p
            style={{
              fontFamily: "sans-serif",
              margin: "0",
              fontSize: "0.9em",
              marginBottom: "10px",
              marginTop: "-7px",
              color: "#555",
            }}
          >
            {props.subTitle}
          </p>
          {props.children}
        </div>
      </DialogContent>
    </Dialog>
  );
}
Example #15
Source File: Prompt.tsx    From signer with Apache License 2.0 6 votes vote down vote up
export function Prompt({
  isOpened,
  renderHeader,
  renderContent,
  renderActions
}: Props): JSX.Element {
  const classes = useStyles();

  return (
    <Dialog fullWidth classes={{ paper: classes.dialogPaper }} open={isOpened}>
      <div className={classes.promptContainer}>
        <Header>{renderHeader()}</Header>
        <Content>{renderContent()}</Content>
        <Actions>{renderActions()}</Actions>
      </div>
    </Dialog>
  );
}
Example #16
Source File: CaptchaChallenger.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
render() {
    return (
      <Dialog
        open={!!this.state.solved}
        scroll='body'
        PaperProps={{
          style: {
            width: 'fit-content',
            marginLeft: 'auto',
            marginRight: 'auto',
          },
        }}
      >
        <DialogTitle>Make sure you are human</DialogTitle>
        <DialogContent>
          <DialogContentText>Complete captcha challenge below to continue</DialogContentText>
          {this.state.sitekey && (
            <ReCAPTCHA
              ref={this.recaptchaRef}
              sitekey={this.state.sitekey}
              onChange={result => this.recaptchaOnChange(result)}
            />
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => this.setState({ solved: undefined, sitekey: undefined })}>Cancel</Button>
        </DialogActions>
      </Dialog>
    );
  }
Example #17
Source File: ResponsiveDialog.tsx    From homebase-app with MIT License 6 votes vote down vote up
ProposalFormResponsiveDialog: React.FC<{ open: boolean; onClose: () => void; }> = ({
                                                                                                open,
                                                                                                onClose,
                                                                                                children,
                                                                                              }) => {
  const theme = useTheme();
  const isSmall = useMediaQuery(theme.breakpoints.down("sm"));

  return isSmall ? (
    <BottomSheet open={open} onDismiss={() => onClose()}>
      {children}
    </BottomSheet>
  ) : (
    <Dialog open={open} onClose={() => onClose()}>
      {children}
    </Dialog>
  );
}
Example #18
Source File: QRCodeModal.tsx    From bee-dashboard with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up
export default function QRCodeModal(props: Props): ReactElement {
  const [open, setOpen] = useState(false)

  const handleOpen = () => {
    setOpen(true)
  }

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

  return (
    <div>
      <IconButton color="primary" size="small" onClick={handleOpen}>
        <FilterCenterFocusSharp />
      </IconButton>
      <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
        <div style={{ padding: '30px', textAlign: 'center' }}>
          <DialogTitle id="simple-dialog-title">{props.label}</DialogTitle>
          <QRCode
            value={props.value}
            size={150}
            bgColor={'#ffffff'}
            fgColor={'#000000'}
            level={'L'}
            includeMargin={false}
            renderAs={'svg'}
          />
        </div>
      </Dialog>
    </div>
  )
}
Example #19
Source File: SettingsDialog.tsx    From github-deploy-center with MIT License 6 votes vote down vote up
SettingsDialog = () => {
  const { settingsDialog } = useAppState()
  const { hideSettings } = useActions()
  return (
    <Dialog open={!!settingsDialog} fullWidth onClose={hideSettings}>
      <DialogTitle>Settings</DialogTitle>
      <DialogContent style={{ gap: '1rem', display: 'flex' }}>
        <Editor
          label="Deploy timeout (secs)"
          selector={(state) => state.appSettings.deployTimeoutSecs}
        />
        <Editor
          label="Status refresh interval (secs)"
          selector={(state) => state.appSettings.refreshIntervalSecs}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={hideSettings}>Close</Button>
      </DialogActions>
    </Dialog>
  )
}
Example #20
Source File: MessageDialog.tsx    From glific-frontend with GNU Affero General Public License v3.0 6 votes vote down vote up
MessageDialog = ({ title, onSendMessage, handleClose }: MessageDialogProps) => (
  <Dialog
    open
    classes={{
      paper: styles.Dialog,
    }}
  >
    <DialogContent className={styles.DialogContent}>
      <div className={styles.DialogTitle} data-testid="title">
        {title}
      </div>
      <ChatInput
        onSendMessage={onSendMessage}
        handleHeightChange={() => {}}
        contactStatus=""
        contactBspStatus="SESSION_AND_HSM"
        additionalStyle={styles.ChatInput}
      />
      <CrossDarkIcon className={styles.CloseIcon} onClick={handleClose} data-testid="closeButton" />
    </DialogContent>
  </Dialog>
)
Example #21
Source File: DeleteConfirm.tsx    From max-todos with MIT License 6 votes vote down vote up
DeleteConfirm = ({ open, close, yes }: Props) => {
  const matches = useMediaQuery("(max-width: 768px)");
  return (
    <Dialog open={open} onClose={close}>
      <DialogTitle>DELETE ITEM?</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Are you sure you want to delete this item?
        </DialogContentText>
        <div style={{ display: matches ? "none" : "block" }}>
          <Divider />
          <br />
          <DialogContentText>
            <span style={{ color: "green", fontWeight: "bold" }}>PROTIP:</span>
            <br />
            You can hold down shift when clicking the <b>delete button</b> to
            bypass this confirmation entirely
          </DialogContentText>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={close} color="primary">
          No
        </Button>
        <Button onClick={yes} color="primary" variant="contained">
          Yes
        </Button>
      </DialogActions>
    </Dialog>
  );
}
Example #22
Source File: EditServerDialog.tsx    From shadowsocks-electron with GNU General Public License v3.0 6 votes vote down vote up
StyledDialog = withStyles((theme: Theme) => (
  createStyles({
    paper: {
    },
    root: {
      '& *': scrollBarStyle(6, 0, theme)
    }
  })
))(Dialog)
Example #23
Source File: OpenOrdersDialog.tsx    From swap-ui with Apache License 2.0 6 votes vote down vote up
export default function OpenOrdersDialog({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  return (
    <Dialog
      maxWidth="lg"
      open={open}
      onClose={onClose}
      PaperProps={{
        style: {
          borderRadius: "10px",
        },
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "flex-end",
        }}
      >
        <IconButton
          onClick={onClose}
          style={{
            padding: 10,
          }}
        >
          <Close />
        </IconButton>
      </div>
      <DialogContent style={{ paddingTop: 0 }}>
        <OpenOrdersAccounts />
      </DialogContent>
    </Dialog>
  );
}
Example #24
Source File: ApiKeyDialog.tsx    From prompts-ai with MIT License 6 votes vote down vote up
export default function ApiKeyDialog() {
    const dispatch = useDispatch();

    const apiKey = useSelector(selectApiKey);
    const apiKeyDialogOpen = useSelector(selectApiKeyDialogVisible);
    const handleApiKeyDialogClose = () => {
        dispatch(toggleApiKeyDialog(false));
    };

    const classes = useStyles();

    return <Dialog open={apiKeyDialogOpen} onClose={handleApiKeyDialogClose} aria-labelledby="api-key-form-dialog-title">
        <DialogTitle id="api-key-form-dialog-title">API Key</DialogTitle>
        <DialogContent>
            <DialogContentText>
                Please provide your OpenAI API Key. We only store this key locally and never send it to our servers.
            </DialogContentText>
            <TextField
                className={classes.apiKeyInput}
                autoFocus
                margin="dense"
                id="name"
                label="API Key"
                type="text"
                value={apiKey}
                fullWidth
                onChange={(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
                    dispatch(editApiKey(event.currentTarget.value));
                }}
            />
        </DialogContent>
        <DialogActions>
            <Button onClick={handleApiKeyDialogClose} color="primary">
                Done
            </Button>
        </DialogActions>
    </Dialog>;
}
Example #25
Source File: MessageDialg.tsx    From flect-chime-sdk-demo with Apache License 2.0 6 votes vote down vote up
MessageDialog = () => {
    const { messageState, resolveMessage } = useAppState();
    const classes = useStyles();
    return (
        <>
            {messageState.messageActive && (
                <>
                    <Dialog open={messageState.messageActive} onClose={resolveMessage}>
                        {messageState.messageType === "Info" ? (
                            <Avatar className={classes.avatarForInformation}>
                                <Info />
                            </Avatar>
                        ) : (
                            <Avatar className={classes.avatarForException}>
                                <ErrorOutline />
                            </Avatar>
                        )}
                        <DialogTitle>{messageState.messageTitle}</DialogTitle>
                        <DialogContent>
                            {messageState.messageDetail.map((d, i) => {
                                return <DialogContentText key={i}>{d}</DialogContentText>;
                            })}
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={resolveMessage} color="primary">
                                OK
                            </Button>
                        </DialogActions>
                    </Dialog>
                </>
            )}
        </>
    );
}
Example #26
Source File: useConfirm.tsx    From anchor-web-app with Apache License 2.0 5 votes vote down vote up
export function Component({
  closeDialog,
  title,
  description,
  agree = 'Agree',
  disagree = 'Disagree',
}: DialogProps<ConfirmParams, boolean>) {
  const classes = useAlertStyles();

  return (
    <Dialog
      open
      classes={classes}
      onClose={() => closeDialog(false)}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}

      <DialogContent>
        <DialogContentText id="alert-dialog-description">
          {description}
        </DialogContentText>
      </DialogContent>

      <DialogActions>
        <ActionButton style={{ width: 150 }} onClick={() => closeDialog(false)}>
          {disagree}
        </ActionButton>
        <ActionButton
          autoFocus
          style={{ width: 150 }}
          onClick={() => closeDialog(true)}
        >
          {agree}
        </ActionButton>
      </DialogActions>
    </Dialog>
  );
}
Example #27
Source File: MonitoringDialog.tsx    From Pi-Tool with GNU General Public License v3.0 5 votes vote down vote up
MonitoringDialog: React.FC<MonitoringDialogProps> = ({ onClose, open }) => {
    const dispatch = useDispatch();
    const activeMetrics = useSelector((state: RootState) => state.monitoring.activeMetrics);
    const classes = useStyles();

    const metricList = Object.keys(activeMetrics).map((key, index) => {
        return (
            <ListItem key={index}>
                <ListItemIcon>
                    {metricLookup[key].icon}
                </ListItemIcon>
                <ListItemText id="switch-list-label-wifi" primary={metricLookup[key].label} />
                <ListItemSecondaryAction>
                    <Switch
                        edge="end"
                        onChange={(_event, checked) => dispatch(setMonitoringMetric(key, checked))}
                        checked={activeMetrics[key as MonitoringMetric].active}
                        inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
                    />
                </ListItemSecondaryAction>
            </ListItem>
        );
    });

    return (
        <Dialog aria-labelledby="simple-dialog-title" open={open} onClose={onClose}>
            <DialogTitle id="simple-dialog-title">
                <Typography variant="h5">
                    Select monitoring metrics
	      </Typography>
            </DialogTitle>
            <List className={classes.root}>
                {metricList}
            </List>
        </Dialog>
    );

}
Example #28
Source File: KeyModal.tsx    From DamnVulnerableCryptoApp with MIT License 5 votes vote down vote up
KeyModal = (props: IModalProps) => {

  const layoutContext = useContext(LayoutContext);
  const classes = useStyles();

  const onLoginClicked = () => {
    layoutContext.setLoading(true);

    KeyDisclosureService.unlockMailbox(props.mailboxKey).then(res => {
      layoutContext.setLoading(false);
      if (res.success) {
        props.setFlag(res.flag);
        props.setInboxUnlocked(true);
        props.setEmails(res.emails);
        props.setSelectedEmail(res.emails[0]);
      }
    }).catch(() => layoutContext.setLoading(false));
  };

  const onMailboxChange = (e: React.ChangeEvent<HTMLInputElement>) => props.setMailboxKey(e.target.value);
  const getContainer = () => document.getElementById('key-disclosure-container');



  return (
    <Dialog open={!props.inboxUnlocked} container={getContainer} style={{ position: 'absolute' }} BackdropProps={{ style: { position: 'absolute' } }}>
      <DialogTitle id="simple-dialog-title">Unlock [email protected] mailbox</DialogTitle>
      <DialogContent>
        <Box display={props.inboxUnlocked ? "none" : "block"}>
          <Typography>Add your private key to decrypt your inbox</Typography>

          <Box mt={2} mb={3}>
            <TextField placeholder="Private Key" fullWidth multiline rows={8} variant="outlined" onChange={onMailboxChange} />
          </Box>

          <Box textAlign="right">
            <Button variant="contained" className={classes.btn} onClick={onLoginClicked}>Decrypt</Button>
          </Box>
        </Box>
      </DialogContent>
    </Dialog >
  );
}
Example #29
Source File: new_comment_dialog.tsx    From jupyter-extensions with Apache License 2.0 5 votes vote down vote up
function NewCommentDialog(props) {
  const [open, setOpen] = useState(true);
  const [comment, setComment] = useState('');

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

  const handleCloseSend = () => {
    setOpen(false);
    const lineNumber = props.selection.start.line;
    newDetachedCommentThread(
      props.currFilePath,
      props.serverRoot,
      comment,
      lineNumber
    );
  };

  return (
    <div>
      <Dialog
        open={open}
        onClose={handleCloseCancel}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Add a comment</DialogTitle>
        <DialogContent>
          <TextField
            autoFocus
            multiline
            margin="dense"
            rows={3}
            value={comment}
            variant="outlined"
            size="medium"
            label="Start a new comment thread"
            onChange={e => setComment(e.target.value)}
            style={style.textField}
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseCancel} color="primary">
            Cancel
          </Button>
          <Button onClick={handleCloseSend} color="primary">
            Send
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}