80 lines
2.2 KiB
TypeScript
80 lines
2.2 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} = useFormikContext<any>()
|
|
|
|
|
|
const handleOk = () => {
|
|
const oldValue = values?.[name] ?? "";
|
|
const newLatex = convertMathMLToLaTeX(Latex);
|
|
|
|
if(newLatex){
|
|
setFieldValue(name, oldValue + " $$ " +newLatex +" $$ ");
|
|
setCurrentValue(oldValue + " $$ " +newLatex +" $$ ")
|
|
setLatex("")
|
|
setIsModalOpen(false);
|
|
}else{
|
|
setLatex("")
|
|
toast.error(t("validation.that_is_not_a_valid_mml"))
|
|
}
|
|
};
|
|
|
|
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={1000}
|
|
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 |