90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import { Modal } from "antd";
|
|
import TextArea from "antd/es/input/TextArea";
|
|
import { useFormikContext } from "formik";
|
|
import React, { useState } from "react";
|
|
import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX";
|
|
import { useTranslation } from "react-i18next";
|
|
import { toast } from "react-toastify";
|
|
|
|
const AddLaTexModal = ({
|
|
name,
|
|
setLatex,
|
|
Latex,
|
|
setIsModalOpen,
|
|
isModalOpen,
|
|
setCurrentValue,
|
|
}: {
|
|
name: string;
|
|
setLatex: (value: string) => void;
|
|
Latex: string;
|
|
setIsModalOpen: (value: boolean) => void;
|
|
isModalOpen: boolean;
|
|
setCurrentValue: (value: string) => void;
|
|
}) => {
|
|
const { values, setFieldValue, getFieldProps } = useFormikContext<any>();
|
|
|
|
const currentValue = getFieldProps(name).value;
|
|
const handleOk = () => {
|
|
const oldValue = currentValue ?? "";
|
|
const newLatex = convertMathMLToLaTeX(Latex);
|
|
console.log(oldValue);
|
|
|
|
if (newLatex) {
|
|
setFieldValue(name, oldValue + " $$ " + newLatex + " $$ ");
|
|
setCurrentValue(oldValue + " $$ " + newLatex + " $$ ");
|
|
setLatex("");
|
|
setIsModalOpen(false);
|
|
} else {
|
|
setFieldValue(name, oldValue + " $$ " + Latex + " $$ ");
|
|
setCurrentValue(oldValue + " $$ " + Latex + " $$ ");
|
|
setLatex("");
|
|
setIsModalOpen(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setIsModalOpen(false);
|
|
setLatex("");
|
|
};
|
|
|
|
const handleChangeInputLatex = (
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
|
) => {
|
|
const newValue = e.target.value;
|
|
setLatex(newValue);
|
|
};
|
|
|
|
const [t] = useTranslation();
|
|
return (
|
|
<Modal
|
|
footer={false}
|
|
open={isModalOpen}
|
|
onOk={handleOk}
|
|
onCancel={handleCancel}
|
|
>
|
|
<div className="latexModal">
|
|
<label className="mb-3"> {t("header.past_your_MMl_text")} </label>
|
|
<TextArea
|
|
size="large"
|
|
showCount
|
|
maxLength={5000}
|
|
autoSize={{ minRows: 4, maxRows: 10 }}
|
|
style={{ height: "400px" }}
|
|
onChange={handleChangeInputLatex}
|
|
value={Latex}
|
|
/>
|
|
<div className="buttons">
|
|
<div className="back_button pointer" onClick={handleCancel}>
|
|
{t("practical.cancel")}
|
|
</div>
|
|
<div className="add_button" onClick={handleOk}>
|
|
{t(`practical.${"add"}`)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default AddLaTexModal;
|