components

SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx

@@ -0,0 +1,87 @@
+import React, {useState} from "react";
+import styles from './SurveyInfo.module.css'
+
+interface SurveyInfoProps {}
+
+const SurveyInfo: React.FC<SurveyInfoProps> = () => {
+    const [descriptionSurvey, setDescriptionSurvey] = useState('');
+    const [titleSurvey, setTitleSurvey] = useState('Название опроса');
+    const [showDescriptionField, setShowDescriptionField] = useState(false);
+    const [showNewTitleField, setShowNewTitleField] = useState(false);
+
+
+    const handleDescriptionChange = (descripEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setDescriptionSurvey(descripEvent.target.value);
+    }
+
+    const handleNewTitleChange = (titleEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setTitleSurvey(titleEvent.target.value);
+    }
+
+    const handleAddNewTitleClick = () => {
+        setShowNewTitleField(true);
+    }
+
+    const handleAddDescriptionClick = () => {
+        setShowDescriptionField(true);
+    }
+
+    const handleTitleKeyDown = (titleClickEnter: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (titleClickEnter.key === 'Enter'){
+            titleClickEnter.preventDefault();
+            setShowNewTitleField(false);
+        }
+    }
+
+    const handleDescriptionKeyDown = (descripClickEnter: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (descripClickEnter.key === 'Enter'){
+            descripClickEnter.preventDefault();
+            setShowDescriptionField(false);
+        }
+    }
+
+    const handleParagraphClick = () => {
+        setShowDescriptionField(true);
+    }
+
+    return (
+        <div className={styles.blockInfo}>
+            <div className={styles.info}>
+                {
+                    showNewTitleField ? (
+                        <h1 className={styles.titleSurvey}>
+                            <textarea className={styles.textareaTitle}
+                                value={titleSurvey}
+                                onChange={handleNewTitleChange}
+                                onKeyDown={handleTitleKeyDown}
+                            />
+                        </h1>
+                    ) : (
+                        <h1  className={styles.titleSurvey} onClick={handleAddNewTitleClick}>{titleSurvey}</h1>
+                    )
+                }
+
+                {descriptionSurvey && !showDescriptionField ? (
+                    <p className={styles.description} onClick={handleParagraphClick}>{descriptionSurvey}</p>
+                ) : showDescriptionField ? (
+                    <p className={styles.description}>
+                        <textarea className={styles.textareaDescrip}
+                            value={descriptionSurvey}
+                            onChange={handleDescriptionChange}
+                            onKeyDown={handleDescriptionKeyDown}
+                        />
+                    </p>
+                ) : (
+                    <button
+                        className={styles.descripButton}
+                        onClick={handleAddDescriptionClick}>
+                        <span className={styles.textButton}>Добавить описание</span>
+                        <img className={styles.descButtonImg} src='../../../public/add_circle.svg'/>
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default SurveyInfo;