diff --git a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx index a3a332d..7dffed7 100644 --- a/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx +++ b/SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx @@ -1,4 +1,4 @@ -import React, {useState} from "react"; +import React, {useState, useRef, useEffect} from "react"; import AnswerOption from '../AnswerOption/AnswerOption'; import AddAnswerButton from "../AddAnswerButton/AddAnswerButton.tsx"; import TypeDropdown from "../TypeDropdown/TypeDropdown.tsx"; @@ -8,13 +8,18 @@ import styles from './QuestionItem.module.css' interface QuestionItemProps { indexQuestion: number; initialTextQuestion?: string; + valueQuestion: string; + onChangeQuestion: (valueQuestion: string) => void; } -const QuestionItem: React.FC = ({indexQuestion, initialTextQuestion = `Вопрос ${indexQuestion}`}) => { +const QuestionItem: React.FC = ({indexQuestion, initialTextQuestion = `Вопрос ${indexQuestion}`, + valueQuestion, onChangeQuestion}) => { const [selectedType, setSelectedType] = useState<'single' | 'multiply'>('single'); - const [answerOption, setAnswerOption] = useState(['']); const [textQuestion, setTextQuestion] = useState(initialTextQuestion); + const [isEditingQuestion, setIsEditingQuestion] = useState(false); + + const textareaQuestionRef = useRef(null); const handleTypeChange = (type: 'single' | 'multiply') => { setSelectedType(type); @@ -24,25 +29,64 @@ const QuestionItem: React.FC = ({indexQuestion, initialTextQu setAnswerOption([...answerOption, '']); }; + const handleQuestionClick = () => { + setIsEditingQuestion(true); + } + + const handleTextareaQuestionChange = (event: React.ChangeEvent) => { + setTextQuestion(event.target.value); + } + + const handleSaveQuestion = () => { + setIsEditingQuestion(false); + onChangeQuestion(textQuestion); + } + + const handleQuestionKeyDown = (keyDownEvent: React.KeyboardEvent) => { + if (keyDownEvent.key === 'Enter') { + keyDownEvent.preventDefault(); + handleSaveQuestion() + } + } + + const handleQuestionBlur = () => { + handleSaveQuestion() + } + + useEffect(() => { + if (isEditingQuestion && textareaQuestionRef.current) { + textareaQuestionRef.current.focus(); + } + }, [isEditingQuestion]); + const handleAnswerChange = (index: number, value: string) => { const newAnswerOption = [...answerOption]; newAnswerOption[index] = value; setAnswerOption(newAnswerOption); } - const handleQuestionChange = (event: React.ChangeEvent) => { - setTextQuestion(event.target.value); - }; + useEffect(() => { + setTextQuestion(valueQuestion); + }, [valueQuestion]); return (
-

+ {isEditingQuestion ? (