schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

error validation

Browse Source
This commit is contained in:
Delucse
2020-09-19 09:38:38 +02:00
parent b20bde4e83
commit 111b924988
10 changed files with 268 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorial/Builder/Textfield.js
+44 -20
View File
@@ -1,45 +1,62 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { tutorialTitle, changeContent } from '../../../actions/tutorialBuilderActions';
import { tutorialTitle, changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
const styles = theme => ({
multiline: {
padding: '18.5px 14px 18.5px 24px'
},
errorColor: {
color: theme.palette.error.dark
}
});
class Textfield extends Component {
// handleChange = (e) => {
// var value = e.target.value;
// if(value.replace(/\s/g,'') !== ''){
// this.setState({[e.target.name]: value, error: false});
// }
// else {
// this.setState({[e.target.name]: value, error: true});
// }
// };
handleChange = (e) => {
var value = e.target.value;
if(this.props.property === 'title'){
this.props.tutorialTitle(value);
}
else {
this.props.changeContent(this.props.index, this.props.property, value);
}
if(value.replace(/\s/g,'') === ''){
this.props.setError(this.props.index, this.props.property);
}
else{
this.props.deleteError(this.props.index, this.props.property);
}
};
render() {
return (
<FormControl variant="outlined" fullWidth style={{marginBottom: '10px'}}>
<InputLabel htmlFor={this.props.property}>{this.props.label}</InputLabel>
<OutlinedInput
style={this.props.multiline ? {borderRadius: '25px', padding: '18.5px 14px 18.5px 24px'} : {borderRadius: '25px', padding: '0 0 0 10px'}}
/* error={this.state.error}*/
style={{borderRadius: '25px'}}
classes={{multiline: this.props.classes.multiline}}
error={this.props.index !== undefined ? this.props.error.steps[this.props.index][this.props.property] : this.props.error[this.props.property]}
value={this.props.value}
label={this.props.label}
id={this.props.property}
multiline={this.props.multiline}
rows={2}
rowsMax={10}
onChange={(e) => {this.props.property === 'title' ?
this.props.tutorialTitle(e.target.value)
: this.props.changeContent(this.props.index, this.props.property, e.target.value)
}}
onChange={(e) => this.handleChange(e)}
/>
{/* {this.state.error ? <FormHelperText style={{color: 'red'}}>Gib einen Titel für das Tutorial ein.</FormHelperText> : null}*/}
{this.props.index !== undefined ?
this.props.error.steps[this.props.index][this.props.property] ? <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText>
: null
: this.props.error[this.props.property] ? <FormHelperText className={this.props.classes.errorColor}>Gib einen Titel für das Tutorial ein.</FormHelperText>
: null}
</FormControl>
);
};
@@ -47,7 +64,14 @@ class Textfield extends Component {
Textfield.propTypes = {
tutorialTitle: PropTypes.func.isRequired,
changeContent: PropTypes.func.isRequired
changeContent: PropTypes.func.isRequired,
error: PropTypes.object.isRequired,
change: PropTypes.number.isRequired
};
export default connect(null, { tutorialTitle, changeContent })(Textfield);
const mapStateToProps = state => ({
error: state.builder.error,
change: state.builder.change
});
export default connect(mapStateToProps, { tutorialTitle, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));