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