98 lines
3.4 KiB
JavaScript
98 lines
3.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';
|
|
|
|
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} !important`
|
|
},
|
|
errorColorShrink: {
|
|
color: `rgba(0, 0, 0, 0.54) !important`
|
|
},
|
|
errorBorder: {
|
|
borderColor: `${theme.palette.error.dark} !important`
|
|
}
|
|
});
|
|
|
|
class Textfield extends Component {
|
|
|
|
componentDidMount(){
|
|
if(this.props.error){
|
|
if(this.props.property !== 'media'){
|
|
this.props.deleteError(this.props.index, this.props.property);
|
|
}
|
|
}
|
|
}
|
|
|
|
handleChange = (e) => {
|
|
var value = e.target.value;
|
|
if(this.props.property === 'title'){
|
|
this.props.tutorialTitle(value);
|
|
}
|
|
else if(this.props.property === 'json'){
|
|
this.props.jsonString(value);
|
|
}
|
|
else if(this.props.property === 'badge'){
|
|
this.props.tutorialBadge(value);
|
|
}
|
|
else {
|
|
this.props.changeContent(value, this.props.index, this.props.property, this.props.property2);
|
|
}
|
|
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}
|
|
classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
|
|
>
|
|
{this.props.label}
|
|
</InputLabel>
|
|
<OutlinedInput
|
|
style={{borderRadius: '25px'}}
|
|
classes={{multiline: this.props.classes.multiline, notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
|
|
error={this.props.error}
|
|
value={this.props.value}
|
|
label={this.props.label}
|
|
id={this.props.property}
|
|
multiline={this.props.multiline}
|
|
rows={2}
|
|
rowsMax={10}
|
|
onChange={(e) => this.handleChange(e)}
|
|
/>
|
|
{this.props.error ?
|
|
this.props.property === 'title' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen Titel für das Tutorial ein.</FormHelperText>
|
|
: this.props.property === 'json' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen JSON-String ein und bestätige diesen mit einem Klick auf den entsprechenden Button</FormHelperText>
|
|
: <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText>
|
|
: null}
|
|
</FormControl>
|
|
);
|
|
};
|
|
}
|
|
|
|
Textfield.propTypes = {
|
|
tutorialTitle: PropTypes.func.isRequired,
|
|
tutorialBadge: PropTypes.func.isRequired,
|
|
jsonString: PropTypes.func.isRequired,
|
|
changeContent: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default connect(null, { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));
|