Karimaldeen/Quiz_dashboard
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix question

Browse Source
This commit is contained in:
karimaldeen 2024-09-21 15:13:59 +03:00
parent cda04660bf
commit fa8f705a75
9 changed files with 140 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@ -30,6 +30,7 @@
"react-dom": "^18.3.1",
"react-i18next": "^13.5.0",
"react-icons": "^4.12.0",
"react-intersection-observer": "^9.13.1",
"react-katex": "^3.0.1",
"react-latex": "^2.0.0",
"react-latex-next": "^3.0.0",
@ -8928,6 +8929,20 @@
"react": "*"
}
},
"node_modules/react-intersection-observer": {
"version": "9.13.1",
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
"integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -17330,6 +17345,12 @@
"integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
"requires": {}
},
"react-intersection-observer": {
"version": "9.13.1",
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
"integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
"requires": {}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

1
package.json
View File

@ -25,6 +25,7 @@
"react-dom": "^18.3.1",
"react-i18next": "^13.5.0",
"react-icons": "^4.12.0",
"react-intersection-observer": "^9.13.1",
"react-katex": "^3.0.1",
"react-latex": "^2.0.0",
"react-latex-next": "^3.0.0",

14
src/Components/LatextInput/LaTeXInput.tsx
View File

@ -22,12 +22,6 @@ const LaTeXInput = ({name,label,...props}:ILaTeXInput) => {
const { ShowLatexOption } = useObjectToEdit();
const [showPreview, setShowPreview] = useState(false) ;
const value = getFieldProps(name)?.value
const handleChangeInput =
(
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
setFieldValue(name,e.target.value);
};
const Preview = parseTextAndLatex(value ?? "") ;
@ -54,6 +48,12 @@ const LaTeXInput = ({name,label,...props}:ILaTeXInput) => {
setLatex(item)
setIsEditModalOpen(true)
}
const [curCentValue, setCurrentValue] = useState(value)
const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFieldValue(name, e.target.value);
setCurrentValue(e.target.value)
};
return (
<div className='LaTeXInput'>
@ -69,7 +69,7 @@ const LaTeXInput = ({name,label,...props}:ILaTeXInput) => {
autoSize={{ minRows: 6, maxRows: 10 }}
style={{height:"400px"}}
onChange={handleChangeInput}
value={value}
value={curCentValue}
{...props}
/>

20
src/Components/LatextInput/LaTeXInputMemo.tsx
View File

@ -21,13 +21,7 @@ const LaTeXInputMemo: React.FC<any> = React.memo(({ field ,form, label, ...prop
const { setFieldValue } = form;
const { ShowLatexOption } = useObjectToEdit();
const [showPreview, setShowPreview] = useState(false);
const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFieldValue(name, e.target.value);
};
console.log(name,"name");
const [showPreview, setShowPreview] = useState(false);
const Preview = parseTextAndLatex(value ?? "");
const onPreviewChange: CheckboxProps['onChange'] = (e) => {
@ -50,6 +44,15 @@ const LaTeXInputMemo: React.FC<any> = React.memo(({ field ,form, label, ...prop
setIsEditModalOpen(true);
};
const [curCentValue, setCurrentValue] = useState(value)
const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setCurrentValue(e.target.value)
};
const onBlur = ()=>{
setFieldValue(name, curCentValue);
}
return (
<div className='LaTeXInput'>
<label htmlFor={name} className="text">
@ -64,7 +67,8 @@ const LaTeXInputMemo: React.FC<any> = React.memo(({ field ,form, label, ...prop
autoSize={{ minRows: 6, maxRows: 10 }}
style={{ height: "400px" }}
onChange={handleChangeInput}
value={value}
value={curCentValue}
onBlur={onBlur}
{...props}
/>

4
src/Pages/Admin/question/Model/Malty/components/Question.tsx
View File

@ -7,7 +7,7 @@ import ValidationField from "../../../../../../Components/ValidationField/Valida
import MaltySelectTag from "../Tags/MaltySelectTag";
import { toast } from "react-toastify";
export const Question: React.FC<any> = React.memo(({ index, style, data }) => {
export const Question: React.FC<any> = React.memo(({ index, data }) => {
const { values, setFieldValue, ShowHint, t } = data;
const handleAddChoice = useCallback((
@ -30,7 +30,7 @@ export const Question: React.FC<any> = React.memo(({ index, style, data }) => {
}, [setFieldValue, values, t]);
return (
<div style={style}>
<div >
<div className="exercise_form QuestionFIeld">
<QuestionFIeld setFieldValue={setFieldValue} values={values} key={index} index={index} />
</div>

21
src/Pages/Admin/question/Model/Malty/components/Questions.tsx
View File

@ -25,7 +25,8 @@ const Questions: React.FC<QuestionsProps> = React.memo(({ setFieldValue, values
if (question.answers?.length < 5) height += 40; // "Add new choice" button
if (ShowHint) height += 80; // Hint field
height += 50; // MaltySelectTag
console.log(height);
return height;
}, [questions, ShowHint]);
@ -43,18 +44,26 @@ const Questions: React.FC<QuestionsProps> = React.memo(({ setFieldValue, values
}, [questions, ShowHint]);
return (
<List
<>
{/* <List
ref={listRef}
height={window.innerHeight - 20} // Adjust based on your layout
height={window.innerHeight - 450} // Adjust based on your layout
itemCount={questions?.length}
itemSize={getItemSize}
width="100%"
itemData={itemData}
direction='rtl'
className=' '
>
className='ListQuestions'
>
{Question}
</List>
</List> */}
{questions?.map((item:any,index:number)=>{
return (
<Question key={index} index={index} data={{ values, setFieldValue, ShowHint, t }} />
)
})}
</>
);
}, (prevProps, nextProps) => prevProps?.values?.Questions === nextProps?.values?.Questions);

18
src/Pages/Home/Dummy.tsx
View File

@ -1,11 +1,29 @@
import { Formik,Form, Field } from "formik";
import React from "react";
import { useTranslation } from "react-i18next";
import LaTeXInputMemo from "./LaTeXInputMemo";
const Dummy = () => {
const [t] = useTranslation();
return (
<div className="DummyHomePage">
<Formik initialValues={{}} onSubmit={()=>{}}>
<Form>
{Array.from({length:1000}).map((item:any,index)=>{
return (
<div key={index}>
<Field
name={`content${index}`}
component={LaTeXInputMemo}
label={t("input.answer_content")}
/>
</div>
)
})}
</Form>
</Formik>
</div>
);

63
src/Pages/Home/LaTeXInputMemo.tsx Normal file
View File

@ -0,0 +1,63 @@
import TextArea from 'antd/es/input/TextArea';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
const LaTeXInputMemo: React.FC<any> = React.memo(({ field ,form, label, ...props }) => {
const { name ,value} = field;
const { setFieldValue } = form;
const [curCentValue, setCurrentValue] = useState(value)
const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFieldValue(name, e.target.value);
setCurrentValue(e.target.value)
};
console.log(name,"name");
const [t] = useTranslation();
return (
<div className='LaTeXInput'>
<label htmlFor={name} className="text">
{t(label || name)}
</label>
<div className='LaTeXInputArea'>
<TextArea
size="large"
showCount
maxLength={1000}
autoSize={{ minRows: 6, maxRows: 10 }}
style={{ height: "400px" }}
onChange={handleChangeInput}
value={curCentValue}
{...props}
/>
</div>
</div>
);
}, (
prevProps: any,
nextProps: any
): boolean => {
const prevError = prevProps.form.errors[prevProps.field.name];
const nextError = nextProps.form.errors[nextProps.field.name];
const prevTouched = prevProps.form.touched[prevProps.field.name];
const nextTouched = nextProps.form.touched[nextProps.field.name];
const prevValue = prevProps.field.value;
const nextValue = nextProps.field.value;
return (
prevValue === nextValue
&&
prevError === nextError &&
prevTouched === nextTouched
)
});
export default LaTeXInputMemo;

2
src/Styles/Pages/exercise.scss
View File

@ -358,5 +358,5 @@
.ListQuestions{
@include Scrollbar();
margin-bottom: 30px;
}