1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
11 type CssRules = "button" | "lastButton" | "formContainer" | "dialogTitle" | "progressIndicator" | "dialogActions";
13 const styles: StyleRulesCallback<CssRules> = theme => ({
15 marginLeft: theme.spacing.unit
18 marginLeft: theme.spacing.unit,
23 flexDirection: "column",
27 paddingTop: theme.spacing.unit,
28 paddingBottom: theme.spacing.unit,
35 marginBottom: theme.spacing.unit,
36 marginRight: theme.spacing.unit * 3,
40 interface DialogProjectDataProps {
43 formFields: React.ComponentType<InjectedFormProps<any> & WithDialogProps<any>>;
45 cancelCallback?: Function;
46 enableWhenPristine?: boolean;
47 doNotDisableCancel?: boolean;
50 type DialogProjectProps = DialogProjectDataProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>;
52 export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
55 onClose={props.closeDialog}
57 disableEscapeKeyDown={props.submitting}
60 <form data-cy='form-dialog'>
61 <DialogTitle className={props.classes.dialogTitle}>
64 <DialogContent className={props.classes.formContainer}>
65 <props.formFields {...props} />
67 <DialogActions className={props.classes.dialogActions}>
69 data-cy='form-cancel-btn'
73 if (props.cancelCallback) {
74 props.cancelCallback();
79 className={props.classes.button}
81 disabled={props.doNotDisableCancel ? false : props.submitting}>
82 {props.cancelLabel || 'Cancel'}
85 data-cy='form-submit-btn'
87 onClick={props.handleSubmit}
88 className={props.classes.lastButton}
90 disabled={props.invalid || props.submitting || (props.pristine && !props.enableWhenPristine)}
92 {props.submitLabel || 'Submit'}
93 {props.submitting && <CircularProgress size={20} className={props.classes.progressIndicator} />}