102 lines
2.9 KiB
JavaScript
102 lines
2.9 KiB
JavaScript
import { useEffect, useRef, useState } from "react";
|
|
import styles from "../../styles/room/input.module.scss";
|
|
import { parseClassName } from "../../utils/utils.js";
|
|
import Input from "../Input.jsx";
|
|
import { AiOutlineCheck, AiOutlineClose } from "react-icons/ai";
|
|
|
|
export default function CorrectionInput({
|
|
inputData,
|
|
idInput,
|
|
idExo,
|
|
idCalcul,
|
|
correctionMenu,
|
|
setCorrectionMenu,
|
|
}) {
|
|
const [result, setResult] = useState({
|
|
correction: inputData.correction,
|
|
isCorrect: inputData.isCorrect,
|
|
});
|
|
const [fade, setFade] = useState(false);
|
|
useEffect(() => {
|
|
if (correctionMenu) {
|
|
setFade(true)
|
|
} else {
|
|
setFade(false);
|
|
}
|
|
}, [correctionMenu]);
|
|
return (
|
|
<div className={styles['correctionInput-main-container']}>
|
|
{correctionMenu && (
|
|
<div
|
|
className={styles["correction-menu"]}
|
|
style={{ opacity: !fade ? 0 : 1 }}
|
|
>
|
|
<Input
|
|
placeholder="Correction"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
type="text"
|
|
value={result.correction}
|
|
onChange={(e) => {
|
|
setResult({
|
|
correction: e.target.value,
|
|
isCorrect: inputData.value == e.target.value,
|
|
});
|
|
}}
|
|
/>
|
|
<div className={styles["icon-container"]}>
|
|
<AiOutlineCheck
|
|
title="Marquer comme juste"
|
|
className={parseClassName([
|
|
styles["icon"],
|
|
styles["icon-valid"],
|
|
!result.isCorrect ? styles["unactive"] : undefined,
|
|
])}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setResult({ ...result, isCorrect: true });
|
|
}}
|
|
/>
|
|
<AiOutlineClose
|
|
title="Marquer comme erroné"
|
|
className={parseClassName([
|
|
styles["icon"],
|
|
styles["icon-invalid"],
|
|
result.isCorrect ? styles["unactive"] : undefined,
|
|
])}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
|
|
setResult({ ...result, isCorrect: false });
|
|
}}
|
|
/>{" "}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div
|
|
/* ref={ref} */
|
|
className={parseClassName([
|
|
styles["input"],
|
|
result.isCorrect ? styles["valid"] : styles["invalid"],
|
|
,
|
|
result.isCorrect == null ? styles["withoutCorrection"] : undefined,
|
|
])}
|
|
data-idexo={idExo}
|
|
data-idinput={idInput}
|
|
data-idcalcul={idCalcul}
|
|
data-iscorrect={result.isCorrect}
|
|
data-correction={result.correction}
|
|
id="correctionInput"
|
|
style={{ cursor: "pointer" }}
|
|
onClick={setCorrectionMenu}
|
|
>
|
|
{inputData.value}{" "}
|
|
{result.isCorrect == false &&
|
|
result.correction != "" &&
|
|
`-> ${result.correction}`}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|