124 lines
4.2 KiB
JavaScript
124 lines
4.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { tutorialId, setError, deleteError } from '../../../actions/tutorialBuilderActions';
|
|
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import Button from '@material-ui/core/Button';
|
|
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';
|
|
|
|
import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
const styles = theme => ({
|
|
errorColor: {
|
|
color: theme.palette.error.dark
|
|
},
|
|
errorColorShrink: {
|
|
color: `rgba(0, 0, 0, 0.54) !important`
|
|
},
|
|
errorBorder: {
|
|
borderColor: `${theme.palette.error.dark} !important`
|
|
}
|
|
});
|
|
|
|
class Id extends Component {
|
|
|
|
handleChange = (e) => {
|
|
var value =
|
|
|
|
parseInt(e.target.value);
|
|
if (Number.isInteger(value) && value > 0) {
|
|
this.props.tutorialId(value);
|
|
if (this.props.error) {
|
|
this.props.deleteError(undefined, 'id');
|
|
}
|
|
}
|
|
else {
|
|
this.props.tutorialId(value.toString());
|
|
this.props.setError(undefined, 'id');
|
|
}
|
|
};
|
|
|
|
handleCounter = (step) => {
|
|
if (this.props.value + step < 1) {
|
|
this.props.setError(undefined, 'id');
|
|
}
|
|
else if (this.props.error) {
|
|
this.props.deleteError(undefined, 'id');
|
|
}
|
|
if (!this.props.value || !Number.isInteger(this.props.value)) {
|
|
this.props.tutorialId(0 + step);
|
|
}
|
|
else {
|
|
this.props.tutorialId(this.props.value + step);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div style={{ display: 'inline-flex', marginTop: '15px' }}>
|
|
<FormControl variant="outlined" style={{ marginBottom: '10px', width: '250px' }}>
|
|
<InputLabel
|
|
htmlFor="id"
|
|
classes={{ shrink: this.props.error ? this.props.classes.errorColorShrink : null }}
|
|
>
|
|
ID
|
|
</InputLabel>
|
|
<OutlinedInput
|
|
style={{ borderRadius: '25px', padding: '0 0 0 10px', width: '200px' }}
|
|
classes={{ notchedOutline: this.props.error ? this.props.classes.errorBorder : null }}
|
|
error={this.props.error}
|
|
value={this.props.value}
|
|
name='id'
|
|
label='ID'
|
|
id='id'
|
|
onChange={this.handleChange}
|
|
inputProps={{
|
|
style: { marginRight: '10px' }
|
|
}}
|
|
endAdornment={
|
|
<div style={{ display: 'flex' }}>
|
|
<Button
|
|
disabled={this.props.value === 1 || !Number.isInteger(this.props.value)}
|
|
onClick={() => this.handleCounter(-1)}
|
|
variant='contained'
|
|
color='primary'
|
|
style={{ borderRadius: '25px 0 0 25px', height: '56px', boxShadow: '0 0 transparent' }}
|
|
>
|
|
<FontAwesomeIcon icon={faMinus} />
|
|
</Button>
|
|
<Button
|
|
onClick={() => this.handleCounter(1)}
|
|
variant='contained'
|
|
color='primary'
|
|
style={{ borderRadius: '0 25px 25px 0', height: '56px', boxShadow: '0 0 transparent' }}
|
|
>
|
|
<FontAwesomeIcon icon={faPlus} />
|
|
</Button>
|
|
</div>
|
|
}
|
|
/>
|
|
{this.props.error ? <FormHelperText className={this.props.classes.errorColor}>Gib eine positive ganzzahlige Zahl ein.</FormHelperText> : null}
|
|
</FormControl>
|
|
<FormHelperText style={{ marginLeft: '-40px', marginTop: '5px', lineHeight: 'initial', marginBottom: '10px', width: '200px' }}>Beachte, dass die ID eindeutig sein muss. Sie muss sich also zu den anderen Tutorials unterscheiden.</FormHelperText>
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
Id.propTypes = {
|
|
tutorialId: PropTypes.func.isRequired,
|
|
setError: PropTypes.func.isRequired,
|
|
deleteError: PropTypes.func.isRequired
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
change: state.builder.change
|
|
});
|
|
|
|
export default connect(mapStateToProps, { tutorialId, setError, deleteError })(withStyles(styles, { withTheme: true })(Id));
|