src/components/dialog-create/dialog-create.js

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import Button from '@material-ui/core/Button';
   7 import TextField from '@material-ui/core/TextField';
   8 import Dialog from '@material-ui/core/Dialog';
   9 import DialogActions from '@material-ui/core/DialogActions';
  10 import DialogContent from '@material-ui/core/DialogContent';
  11 import DialogContentText from '@material-ui/core/DialogContentText';
  12 import DialogTitle from '@material-ui/core/DialogTitle';
  13
  14 export default class FormDialog extends React.Component {
  15   state = {
  16     open: false,
  17   };
  18
  19   handleClickOpen = () => {
  20     this.setState({ open: true });
  21   };
  22
  23   handleClose = () => {
  24     this.setState({ open: false });
  25   };
  26
  27   render() {
  28     return (
  29       <div>
  30         <Button onClick={this.handleClickOpen}>Open form dialog</Button>
  31         <Dialog
  32           open={this.state.open}
  33           onClose={this.handleClose}
  34         >
  35           <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
  36           <DialogContent>
  37             <DialogContentText>
  38               To subscribe to this website, please enter your email address here. We will send
  39               updates occasionally.
  40             </DialogContentText>
  41             <TextField
  42               autoFocus
  43               margin="dense"
  44               id="name"
  45               label="Project name"
  46               type="email"
  47               fullWidth
  48             />
  49           </DialogContent>
  50           <DialogActions>
  51             <Button onClick={this.handleClose} color="primary">
  52               CANCEL
  53             </Button>
  54             <Button onClick={this.handleClose} color="primary">
  55               CREATE A PROJECT
  56             </Button>
  57           </DialogActions>
  58         </Dialog>
  59       </div>
  60     );
  61   }
  62 }