97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
import { Row } from "reactstrap";
|
|
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
|
import { Field, useFormikContext } from "formik";
|
|
import { FaCirclePlus } from "react-icons/fa6";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
|
|
import { useEffect } from "react";
|
|
import Choices from "./Field/Choices";
|
|
import SelectTag from "../../../../Components/CustomFields/SelectTag";
|
|
import useKeyCombination from "../../../../Hooks/useKeyCombination";
|
|
import { CombinationKeyEnum } from "../../../../enums/CombinationKeyEnum";
|
|
import { toast } from "react-toastify";
|
|
import LaTeXInputMemo from "../../../../Components/LatextInput/LaTeXInputMemo";
|
|
import ImageBoxFieldMemo from "../../../../Components/CustomFields/ImageBoxField/ImageBoxFieldMemo";
|
|
import useUnsavedChangesWarning from "../../../../Hooks/useUnsavedChangesWarning";
|
|
|
|
const Form = () => {
|
|
const [t] = useTranslation();
|
|
const formik = useFormikContext<any>();
|
|
const { setSuccess, Success, ShowHint } = useObjectToEdit();
|
|
|
|
const handleAddChoice = (fromKeyCombination: boolean = false) => {
|
|
formik.setFieldValue("answers", [
|
|
...(formik?.values?.answers ?? []),
|
|
{
|
|
content: null,
|
|
content_image: null,
|
|
isCorrect: 0,
|
|
},
|
|
]);
|
|
|
|
if (fromKeyCombination) {
|
|
toast.success(t("header.new_choice_have_been_added"));
|
|
}
|
|
};
|
|
|
|
////////////// hooks
|
|
|
|
useKeyCombination(
|
|
{ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.CHOICE },
|
|
() => {
|
|
handleAddChoice(true);
|
|
},
|
|
);
|
|
|
|
useUnsavedChangesWarning(formik.dirty);
|
|
|
|
useEffect(() => {
|
|
if (Success) {
|
|
formik.resetForm();
|
|
setSuccess(false);
|
|
}
|
|
}, [Success]);
|
|
|
|
return (
|
|
<Row className="w-100 exercise_form_container">
|
|
<div className="exercise_form">
|
|
<Field
|
|
name="content"
|
|
component={LaTeXInputMemo}
|
|
label={t("input.answer_content")}
|
|
/>
|
|
<Field component={ImageBoxFieldMemo} name="content_image" />
|
|
</div>
|
|
|
|
<Choices />
|
|
{(formik?.values?.answers === null ||
|
|
formik?.values?.answers === undefined ||
|
|
formik?.values?.answers?.length < 5) && (
|
|
<p className="add_new_button">
|
|
<FaCirclePlus onClick={() => handleAddChoice()} size={23} />{" "}
|
|
{t("header.add_new_choice")}
|
|
</p>
|
|
)}
|
|
|
|
<div className="exercise_form_width">
|
|
{ShowHint && (
|
|
<Field
|
|
component={LaTeXInputMemo}
|
|
className=" "
|
|
placeholder="_"
|
|
name="hint"
|
|
label={t("input.hint_question")}
|
|
type="TextArea"
|
|
style={{ width: "100%", height: 60, resize: "none" }}
|
|
showCount={false}
|
|
autoSize={{ minRows: 2, maxRows: 10 }}
|
|
/>
|
|
)}
|
|
<SelectTag />
|
|
</div>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default Form;
|