73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
|
|
import React, { useState } from "react";
|
|
import { FormLabel } from "@material-ui/core";
|
|
import TextField from "@material-ui/core/TextField";
|
|
import ButtonWithSpinner from "./ButtonWithSpinner";
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
button: {
|
|
marginLeft: "auto",
|
|
marginRight: 0,
|
|
marginTop: 0,
|
|
marginBottom: 0,
|
|
},
|
|
root: {
|
|
marginTop: theme.spacing(2),
|
|
marginBottom: theme.spacing(2),
|
|
},
|
|
detailedAnswerActions: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "flex-end",
|
|
},
|
|
})
|
|
);
|
|
|
|
interface EditAnswerTextSectionProps {
|
|
remoteText: string;
|
|
loading?: boolean;
|
|
|
|
onSaveClick(text: string): void;
|
|
}
|
|
|
|
export default function EditAnswerText(props: EditAnswerTextSectionProps) {
|
|
const classes = useStyles();
|
|
const [answerText, setAnswerText] = useState<string>(props.remoteText);
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<FormLabel>Detaillierte Antwort</FormLabel>
|
|
<TextField
|
|
multiline
|
|
rows={4}
|
|
id="description"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={answerText}
|
|
onChange={(e) => {
|
|
e.preventDefault();
|
|
setAnswerText(e.target.value);
|
|
}}
|
|
/>
|
|
<div className={classes.detailedAnswerActions}>
|
|
<ButtonWithSpinner
|
|
color="default"
|
|
className={classes.button}
|
|
onClick={() => setAnswerText(props.remoteText)}
|
|
loading={props.loading}
|
|
>
|
|
Zurücksetzen
|
|
</ButtonWithSpinner>
|
|
<ButtonWithSpinner
|
|
loading={props.loading}
|
|
className={classes.button}
|
|
onClick={() => props.onSaveClick(answerText)}
|
|
>
|
|
Speichern
|
|
</ButtonWithSpinner>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|