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 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" | "form" | "formContainer" | "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: "0",
  20     },
  21     form: {
  22         display: 'flex',
  23         overflowY: 'auto',
  24         flexDirection: 'column',
  25         flex: '0 1 auto',
  26     },
  27     formContainer: {
  28         display: "flex",
  29         flexDirection: "column",
  30         paddingBottom: "0",
  31     },
  32     dialogTitle: {
  33         paddingTop: theme.spacing.unit,
  34         paddingBottom: theme.spacing.unit,
  35     },
  36     progressIndicator: {
  37         position: "absolute",
  38         minWidth: "20px",
  39     },
  40     dialogActions: {
  41         marginBottom: theme.spacing.unit,
  42         marginRight: theme.spacing.unit * 3,
  43     }
  44 });
  45
  46 interface DialogProjectDataProps {
  47     cancelLabel?: string;
  48     dialogTitle: string;
  49     formFields: React.ComponentType<InjectedFormProps<any> & WithDialogProps<any>>;
  50     submitLabel?: string;
  51     cancelCallback?: Function;
  52     enableWhenPristine?: boolean;
  53     doNotDisableCancel?: boolean;
  54 }
  55
  56 type DialogProjectProps = DialogProjectDataProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>;
  57
  58 export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
  59     <Dialog
  60         open={props.open}
  61         onClose={props.closeDialog}
  62         disableBackdropClick
  63         disableEscapeKeyDown={props.submitting}
  64         fullWidth
  65         maxWidth='md'>
  66         <form data-cy='form-dialog' className={props.classes.form}>
  67             <DialogTitle className={props.classes.dialogTitle}>
  68                 {props.dialogTitle}
  69             </DialogTitle>
  70             <DialogContent className={props.classes.formContainer}>
  71                 <props.formFields {...props} />
  72             </DialogContent>
  73             <DialogActions className={props.classes.dialogActions}>
  74                 <Button
  75                     data-cy='form-cancel-btn'
  76                     onClick={() => {
  77                         props.closeDialog();
  78
  79                         if (props.cancelCallback) {
  80                             props.cancelCallback();
  81                             props.reset();
  82                             props.initialize({});
  83                         }
  84                     }}
  85                     className={props.classes.button}
  86                     color="primary"
  87                     disabled={props.doNotDisableCancel ? false : props.submitting}>
  88                     {props.cancelLabel || 'Cancel'}
  89                 </Button>
  90                 <Button
  91                     data-cy='form-submit-btn'
  92                     type="submit"
  93                     onClick={props.handleSubmit}
  94                     className={props.classes.lastButton}
  95                     color="primary"
  96                     disabled={props.invalid || props.submitting || (props.pristine && !props.enableWhenPristine)}
  97                     variant="contained">
  98                     {props.submitLabel || 'Submit'}
  99                     {props.submitting && <CircularProgress size={20} className={props.classes.progressIndicator} />}
 100                 </Button>
 101             </DialogActions>
 102         </form>
 103     </Dialog>
 104 );