78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import { Choice } from "../../../../../../types/Item";
|
|
import QuestionFIeld from "../QuestionFIeld/QuestionFIeld";
|
|
import Choices from "../ChoiceField/Choices";
|
|
import { FaCirclePlus } from "react-icons/fa6";
|
|
import ValidationField from "../../../../../../Components/ValidationField/ValidationField";
|
|
import MaltySelectTag from "../Tags/MaltySelectTag";
|
|
import { toast } from "react-toastify";
|
|
import SelectTagV2 from "../../../../../../Components/CustomFields/SelectTagV2";
|
|
import LaTeXInputMemo from "../../../../../../Components/LatextInput/LaTeXInputMemo";
|
|
import { Field } from "formik";
|
|
|
|
export const Question: React.FC<any> = React.memo(({ index, data }) => {
|
|
const { values, setFieldValue, ShowHint, t } = data;
|
|
|
|
const handleAddChoice = useCallback(
|
|
(parent_index: number, fromKeyCombination: boolean = false) => {
|
|
setFieldValue(`Questions.[${parent_index}].answers`, [
|
|
...(values?.Questions?.[parent_index]?.answers as Choice[]),
|
|
{
|
|
answer: null,
|
|
content_image: null,
|
|
content: null,
|
|
isCorrect: 0,
|
|
},
|
|
]);
|
|
|
|
if (fromKeyCombination) {
|
|
toast.success(t("header.new_choice_have_been_added"));
|
|
}
|
|
},
|
|
[setFieldValue, values, t],
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<div className="exercise_form QuestionFIeld">
|
|
<QuestionFIeld
|
|
setFieldValue={setFieldValue}
|
|
values={values}
|
|
key={index}
|
|
index={index}
|
|
/>
|
|
</div>
|
|
|
|
<Choices
|
|
setFieldValue={setFieldValue}
|
|
values={values}
|
|
parent_index={index}
|
|
/>
|
|
|
|
{values?.Questions?.[index]?.answers?.length < 5 && (
|
|
<p className="add_new_button">
|
|
<FaCirclePlus onClick={() => handleAddChoice(index)} size={23} />{" "}
|
|
{t("header.add_new_choice")}
|
|
</p>
|
|
)}
|
|
|
|
<div className="exercise_form_width">
|
|
{ShowHint && (
|
|
<Field
|
|
component={LaTeXInputMemo}
|
|
className=" "
|
|
placeholder="_"
|
|
name={`Questions[${index}].hint`}
|
|
label={t("input.hint_question")}
|
|
type="TextArea"
|
|
style={{ width: "100%", height: 60, resize: "none" }}
|
|
showCount={false}
|
|
autoSize={{ minRows: 2, maxRows: 10 }}
|
|
/>
|
|
)}
|
|
<MaltySelectTag parent_index={index} />
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|