components

SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx

@@ -0,0 +1,72 @@
+import React, {useState, useRef, useEffect} from "react";
+import styles from'./AnswerOption.module.css';
+
+interface AnswerOptionProps{
+    src: string;
+    index: number;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+const AnswerOption: React.FC<AnswerOptionProps> = ({src, index, value, onChange}) => {
+    const [currentValue, setCurrentValue] = useState(value);
+    const [isEditing, setIsEditing] = useState(false); //редактируется ли сейчас
+
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+
+    const handleSpanClick = () => {
+        setIsEditing(true);
+    }
+
+    const handleTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setCurrentValue(event.target.value);
+    };
+
+    const handleSave = () => {
+        setIsEditing(false);
+        onChange(currentValue); // Отправляем измененное значение родителю
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (event.key === "Enter") {
+            event.preventDefault(); // Предотвращаем перенос строки в textarea
+            handleSave();
+        }
+    };
+
+    const handleBlur = () => {
+        handleSave();
+    };
+
+    useEffect(() => {
+        if (isEditing && textAreaRef.current) {
+            textAreaRef.current.focus();
+        }
+    }, [isEditing]);
+
+    return (
+        <div className={styles.answer}>
+            <img className={styles.answerIcon} src={src} alt="" />
+            {isEditing ? (
+                <textarea className={styles.answerInput}
+                    ref={textAreaRef}
+                    value={currentValue}
+                    onChange={handleTextareaChange}
+                    onKeyDown={handleKeyDown}
+                    onBlur={handleBlur}
+                    placeholder={`Ответ ${index}`}
+                />
+            ) : (
+                <span className={styles.textAnswer} onClick={handleSpanClick}>
+          {currentValue || `Ответ ${index}`}
+        </span>
+            )}
+        </div>
+    );
+};
+
+export default AnswerOption;