import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
-import { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
import Validator from '../../utils/dialog-validator';
interface ProjectCreateProps {
open: boolean;
+ pending: boolean;
handleClose: () => void;
+ onSubmit: (data: { name: string, description: string }) => void;
}
interface DialogState {
state: DialogState = {
name: '',
description: '',
- isNameValid: true,
+ isNameValid: false,
isDescriptionValid: true
};
render() {
- const { name, description } = this.state;
- const { classes, open, handleClose } = this.props;
+ const { name, description, isNameValid, isDescriptionValid } = this.state;
+ const { classes, open, handleClose, pending } = this.props;
return (
<Dialog
error={hasError}
fullWidth />} />
</DialogContent>
- <DialogActions className={classes.dialogActions}>
- <Button onClick={handleClose} className={classes.button} color="primary">CANCEL</Button>
- <Button onClick={handleClose} className={classes.lastButton} color="primary" disabled={!this.state.isNameValid || (!this.state.isDescriptionValid && description.length > 0)} variant="raised">CREATE A PROJECT</Button>
+ <DialogActions>
+ <Button onClick={handleClose} className={classes.button} color="primary" disabled={pending}>CANCEL</Button>
+ <Button onClick={this.handleSubmit}
+ className={classes.lastButton}
+ color="primary"
+ disabled={!isNameValid || (!isDescriptionValid && description.length > 0) || pending}
+ variant="contained">
+ CREATE A PROJECT
+ </Button>
+ {pending && <CircularProgress size={20} className={classes.createProgress} />}
</DialogActions>
</div>
</Dialog>
);
}
+ handleSubmit = () => {
+ this.props.onSubmit({
+ name: this.state.name,
+ description: this.state.description
+ });
+ }
+
handleProjectName(e: any) {
this.setState({
name: e.target.value,
}
}
-type CssRules = "button" | "lastButton" | "dialogContent" | "textField" | "dialog" | "dialogTitle" | "dialogActions";
+type CssRules = "button" | "lastButton" | "dialogContent" | "textField" | "dialog" | "dialogTitle" | "createProgress";
const styles: StyleRulesCallback<CssRules> = theme => ({
button: {
dialogTitle: {
paddingBottom: "0"
},
- dialogActions: {
- marginBottom: "5px"
- },
textField: {
marginTop: "32px",
},
dialog: {
minWidth: "600px",
minHeight: "320px"
+ },
+ createProgress: {
+ position: "absolute",
+ minWidth: "20px",
+ right: "95px"
}
});