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 interface DialogProjectProps {
19 handleClose: () => void;
20 onSubmit: (data: { name: string, description: string }) => void;
25 interface TextFieldProps {
27 floatinglabeltext: string;
33 class DialogProjectCreate extends React.Component<DialogProjectProps & WithStyles<CssRules>> {
35 const { classes, open, handleClose, handleSubmit, onSubmit, submitting } = this.props;
41 disableBackdropClick={true}
42 disableEscapeKeyDown={true}>
43 <div className={classes.dialog}>
44 <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
45 <DialogTitle id="form-dialog-title" className={classes.dialogTitle}>Create a project</DialogTitle>
46 <DialogContent className={classes.formContainer}>
48 component={this.renderTextField}
49 floatinglabeltext="Project Name"
51 className={classes.textField}
52 label="Project Name" />
53 <Field name="description"
54 component={this.renderTextField}
55 floatinglabeltext="Description - optional"
56 validate={DESCRIPTION}
57 className={classes.textField}
58 label="Description - optional" />
60 <DialogActions className={classes.dialogActions}>
61 <Button onClick={handleClose} className={classes.button} color="primary" disabled={submitting}>CANCEL</Button>
63 className={classes.lastButton}
69 {submitting && <CircularProgress size={20} className={classes.createProgress} />}
77 renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
79 helperText={touched && error}
81 className={this.props.classes.textField}
82 error={touched && !!error}
90 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "dialog" | "dialogTitle" | "createProgress" | "dialogActions";
92 const styles: StyleRulesCallback<CssRules> = theme => ({
94 marginLeft: theme.spacing.unit
97 marginLeft: theme.spacing.unit,
102 flexDirection: "column",
116 position: "absolute",
125 export default compose(
126 reduxForm({ form: 'projectCreateDialog' }),
128 )(DialogProjectCreate);