89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import { Row } from "reactstrap";
|
|
import ValidationField from "../../../../Components/ValidationField/ValidationField";
|
|
import { useFormikContext } from "formik";
|
|
import { FaCirclePlus } from "react-icons/fa6";
|
|
import { Choice } from "../../../../types/Item";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
|
|
import { useEffect } from "react";
|
|
import Choices from "./Field/Choices";
|
|
import ImageBoxField from "../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
|
|
import SelectTag from "../../../../Components/CustomFields/SelectTag";
|
|
import useKeyCombination from "../../../../Hooks/useKeyCombination";
|
|
import { CombinationKeyEnum } from "../../../../enums/CombinationKeyEnum";
|
|
import { toast } from "react-toastify";
|
|
|
|
const Form = () => {
|
|
const [t] = useTranslation();
|
|
const formik = useFormikContext<any>();
|
|
const { setSuccess, Success } = 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"));
|
|
}
|
|
};
|
|
|
|
useKeyCombination(
|
|
{ ctrlKey: true, shiftKey: true, code: CombinationKeyEnum.CHOICE },
|
|
() => {
|
|
handleAddChoice(true);
|
|
},
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (Success) {
|
|
formik.resetForm()
|
|
setSuccess(false);
|
|
}
|
|
}, [Success]);
|
|
|
|
|
|
return (
|
|
<Row className="w-100 exercise_form_container">
|
|
<div className="exercise_form">
|
|
<ValidationField
|
|
className="textarea_exercise"
|
|
name="content"
|
|
label="answer_content"
|
|
type="TextArea"
|
|
/>
|
|
<ImageBoxField 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">
|
|
<ValidationField
|
|
className=" "
|
|
placeholder="_"
|
|
name="hint"
|
|
label="hint_question"
|
|
type="TextArea"
|
|
style={{ width: "100%" , height: 60,resize:"none" }}
|
|
showCount={false}
|
|
|
|
/>
|
|
<SelectTag />
|
|
</div>
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default Form;
|