src/views-components/dialog-create/dialog-collection-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 { reduxForm, Field } from 'redux-form';
   7 import { compose } from 'redux';
   8 import { TextField } from '../../components/text-field/text-field';
   9 import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core/';
  10 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
  11
  12 import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '../../validators/create-project/create-project-validator';
  13
  14 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "createProgress" | "dialogActions";
  15
  16 const styles: StyleRulesCallback<CssRules> = theme => ({
  17     button: {
  18         marginLeft: theme.spacing.unit
  19     },
  20     lastButton: {
  21         marginLeft: theme.spacing.unit,
  22         marginRight: "20px",
  23     },
  24     formContainer: {
  25         display: "flex",
  26         flexDirection: "column",
  27     },
  28     textField: {
  29         marginBottom: theme.spacing.unit * 3
  30     },
  31     createProgress: {
  32         position: "absolute",
  33         minWidth: "20px",
  34         right: "110px"
  35     },
  36     dialogActions: {
  37         marginBottom: theme.spacing.unit * 3
  38     }
  39 });
  40 interface DialogCollectionCreateProps {
  41     open: boolean;
  42     handleClose: () => void;
  43     onSubmit: (data: { name: string, description: string }) => void;
  44     handleSubmit: any;
  45     submitting: boolean;
  46     invalid: boolean;
  47     pristine: boolean;
  48 }
  49
  50 export const DialogCollectionCreate = compose(
  51     reduxForm({ form: 'collectionCreateDialog' }),
  52     withStyles(styles))(
  53         class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & WithStyles<CssRules>> {
  54             render() {
  55                 const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
  56
  57                 return (
  58                     <Dialog
  59                         open={open}
  60                         onClose={handleClose}
  61                         fullWidth={true}
  62                         maxWidth='sm'
  63                         disableBackdropClick={true}
  64                         disableEscapeKeyDown={true}>
  65                         <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
  66                             <DialogTitle id="form-dialog-title">Create a collection</DialogTitle>
  67                             <DialogContent className={classes.formContainer}>
  68                                 <Field name="name"
  69                                     disabled={submitting}
  70                                     component={TextField}
  71                                     validate={COLLECTION_NAME_VALIDATION}
  72                                     className={classes.textField}
  73                                     label="Collection Name" />
  74                                 <Field name="description"
  75                                     disabled={submitting}
  76                                     component={TextField}
  77                                     validate={COLLECTION_DESCRIPTION_VALIDATION}
  78                                     className={classes.textField}
  79                                     label="Description - optional" />
  80                             </DialogContent>
  81                             <DialogActions className={classes.dialogActions}>
  82                                 <Button onClick={handleClose} className={classes.button} color="primary"
  83                                     disabled={submitting}>CANCEL</Button>
  84                                 <Button type="submit"
  85                                     className={classes.lastButton}
  86                                     color="primary"
  87                                     disabled={invalid || submitting || pristine}
  88                                     variant="contained">
  89                                     CREATE A COLLECTION
  90                             </Button>
  91                                 {submitting && <CircularProgress size={20} className={classes.createProgress} />}
  92                             </DialogActions>
  93                         </form>
  94                     </Dialog>
  95                 );
  96             }
  97         }
  98     );