src/components/form-dialog/form-dialog.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 { InjectedFormProps } from 'redux-form';
   7 import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core/';
   8 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
   9 import { WithDialogProps } from '~/store/dialog/with-dialog';
  10
  11 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "dialog" | "dialogTitle" | "progressIndicator" | "dialogActions";
  12
  13 const styles: StyleRulesCallback<CssRules> = theme => ({
  14     button: {
  15         marginLeft: theme.spacing.unit
  16     },
  17     lastButton: {
  18         marginLeft: theme.spacing.unit,
  19         marginRight: "20px",
  20     },
  21     formContainer: {
  22         display: "flex",
  23         flexDirection: "column",
  24         marginTop: "20px",
  25     },
  26     dialogTitle: {
  27         paddingBottom: "0"
  28     },
  29     textField: {
  30         marginTop: "32px",
  31     },
  32     dialog: {
  33         minWidth: "600px",
  34         minHeight: "320px"
  35     },
  36     progressIndicator: {
  37         position: "absolute",
  38         minWidth: "20px",
  39     },
  40     dialogActions: {
  41         marginBottom: "24px"
  42     }
  43 });
  44
  45 interface DialogProjectProps {
  46     cancelLabel?: string;
  47     dialogTitle: string;
  48     formFields: React.ComponentType<InjectedFormProps<any>>;
  49     submitLabel?: string;
  50 }
  51
  52 export const FormDialog = withStyles(styles)((props: DialogProjectProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>) =>
  53     <Dialog
  54         open={props.open}
  55         onClose={props.closeDialog}
  56         disableBackdropClick={props.submitting}
  57         disableEscapeKeyDown={props.submitting}>
  58         <div className={props.classes.dialog}>
  59             <form>
  60                 <DialogTitle className={props.classes.dialogTitle}>
  61                     {props.dialogTitle}
  62                 </DialogTitle>
  63                 <DialogContent className={props.classes.formContainer}>
  64                     <props.formFields {...props} />
  65                 </DialogContent>
  66                 <DialogActions className={props.classes.dialogActions}>
  67                     <Button
  68                         onClick={props.closeDialog}
  69                         className={props.classes.button}
  70                         color="primary"
  71                         disabled={props.submitting}>
  72                         {props.cancelLabel || 'Cancel'}
  73                     </Button>
  74                     <Button
  75                         onClick={props.handleSubmit}
  76                         className={props.classes.lastButton}
  77                         color="primary"
  78                         disabled={props.invalid || props.submitting || props.pristine}
  79                         variant="contained">
  80                         {props.submitLabel || 'Submit'}
  81                         {props.submitting && <CircularProgress size={20} className={props.classes.progressIndicator} />}
  82                     </Button>
  83                 </DialogActions>
  84             </form>
  85         </div>
  86     </Dialog>
  87 );
  88
  89