1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { reduxForm, Field } from 'redux-form';
7 import { compose } from 'redux';
8 import TextField from '@material-ui/core/TextField';
9 import Dialog from '@material-ui/core/Dialog';
10 import DialogActions from '@material-ui/core/DialogActions';
11 import DialogContent from '@material-ui/core/DialogContent';
12 import DialogTitle from '@material-ui/core/DialogTitle';
13 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
15 import { NAME, DESCRIPTION } from '../../validators/create-project/create-project-validator';
17 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "dialog" | "dialogTitle" | "createProgress" | "dialogActions";
19 const styles: StyleRulesCallback<CssRules> = theme => ({
21 marginLeft: theme.spacing.unit
24 marginLeft: theme.spacing.unit,
29 flexDirection: "column",
51 interface DialogProjectProps {
53 handleClose: () => void;
54 onSubmit: (data: { name: string, description: string }) => void;
59 interface TextFieldProps {
61 floatinglabeltext: string;
67 class DialogProjectCreate extends React.Component<DialogProjectProps & WithStyles<CssRules>> {
69 const { classes, open, handleClose, handleSubmit, onSubmit, submitting } = this.props;
75 disableBackdropClick={true}
76 disableEscapeKeyDown={true}>
77 <div className={classes.dialog}>
78 <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
79 <DialogTitle id="form-dialog-title" className={classes.dialogTitle}>Create a project</DialogTitle>
80 <DialogContent className={classes.formContainer}>
82 component={this.renderTextField}
83 floatinglabeltext="Project Name"
85 className={classes.textField}
86 label="Project Name" />
87 <Field name="description"
88 component={this.renderTextField}
89 floatinglabeltext="Description - optional"
90 validate={DESCRIPTION}
91 className={classes.textField}
92 label="Description - optional" />
94 <DialogActions className={classes.dialogActions}>
95 <Button onClick={handleClose} className={classes.button} color="primary" disabled={submitting}>CANCEL</Button>
97 className={classes.lastButton}
103 {submitting && <CircularProgress size={20} className={classes.createProgress} />}
111 renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
113 helperText={touched && error}
115 className={this.props.classes.textField}
116 error={touched && !!error}
124 export default compose(
125 reduxForm({ form: 'projectCreateDialog' }),
127 )(DialogProjectCreate);