src/components/dialog-create/dialog-project-create.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import TextField from '@material-ui/core/TextField';
   7 import Dialog from '@material-ui/core/Dialog';
   8 import DialogActions from '@material-ui/core/DialogActions';
   9 import DialogContent from '@material-ui/core/DialogContent';
  10 import DialogTitle from '@material-ui/core/DialogTitle';
  11 import { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
  12
  13 interface ProjectCreateProps {
  14   open: boolean;
  15   handleClose: () => void;
  16 }
  17
  18 const DialogProjectCreate: React.SFC<ProjectCreateProps & WithStyles<CssRules>> = ({ classes, open, handleClose }) => {
  19   return (
  20     <Dialog
  21       open={open}
  22       onClose={handleClose}>
  23       <div className={classes.dialog}>
  24         <DialogTitle id="form-dialog-title">Create a project</DialogTitle>
  25         <DialogContent className={classes.dialogContent}>
  26           <TextField
  27             margin="dense"
  28             className={classes.textField}
  29             id="name"
  30             label="Project name"
  31             fullWidth />
  32           <TextField
  33             margin="dense"
  34             id="description"
  35             label="Description - optional"
  36             fullWidth />
  37         </DialogContent>
  38         <DialogActions>
  39           <Button onClick={handleClose} className={classes.button} color="primary">CANCEL</Button>
  40           <Button onClick={handleClose} className={classes.lastButton} color="primary" variant="raised">CREATE A PROJECT</Button>
  41         </DialogActions>
  42       </div>
  43     </Dialog>
  44   );
  45 };
  46
  47 type CssRules = "button" | "lastButton" | "dialogContent" | "textField" | "dialog";
  48
  49 const styles: StyleRulesCallback<CssRules> = theme => ({
  50   button: {
  51     marginLeft: theme.spacing.unit
  52   },
  53   lastButton: {
  54     marginLeft: theme.spacing.unit,
  55     marginRight: "20px",
  56   },
  57   dialogContent: {
  58     marginTop: "20px",
  59   },
  60   textField: {
  61     marginBottom: "32px",
  62   },
  63   dialog: {
  64     minWidth: "550px",
  65     minHeight: "320px"
  66   }
  67 });
  68
  69 export default withStyles(styles)(DialogProjectCreate);