123 lines
3.4 KiB
JavaScript
123 lines
3.4 KiB
JavaScript
import React, { Component } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { connect } from "react-redux";
|
|
import {
|
|
tutorialTitle,
|
|
jsonString,
|
|
changeContent,
|
|
setError,
|
|
deleteError,
|
|
} from "../../../actions/tutorialBuilderActions";
|
|
|
|
import withStyles from '@mui/styles/withStyles';
|
|
import OutlinedInput from "@mui/material/OutlinedInput";
|
|
import InputLabel from "@mui/material/InputLabel";
|
|
import FormControl from "@mui/material/FormControl";
|
|
import FormHelperText from "@mui/material/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 {
|
|
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 {
|
|
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,
|
|
jsonString: PropTypes.func.isRequired,
|
|
changeContent: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default connect(null, {
|
|
tutorialTitle,
|
|
jsonString,
|
|
changeContent,
|
|
setError,
|
|
deleteError,
|
|
})(withStyles(styles, { withTheme: true })(Textfield));
|