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