From 5871ed6cd017e9927dd03a9d9769af65bff20dc9 Mon Sep 17 00:00:00 2001 From: kuwsh1n Date: Mon, 4 Mar 2024 12:17:17 +0300 Subject: [PATCH] finish step one --- .../typeAnswer/dropDownList.module.scss | 12 +++++++++++ .../typeAnswer/inputDate.module.scss | 9 ++++++++ .../typeAnswer/inputFile.module.scss | 3 +++ .../typeAnswer/inputMultiple.module.scss | 3 +++ .../typeAnswer/textArea.module.scss | 14 +++++++++++++ .../components/typeAnswer/yesNo.module.scss | 3 +++ src/components/PreviewModal.jsx | 5 ++++- src/components/typeAnswer/DropDownList.jsx | 21 +++++++++++++++++++ src/components/typeAnswer/InputDate.jsx | 12 +++++++++++ src/components/typeAnswer/InputFile.jsx | 20 ++++++++++++++++++ .../typeAnswer/InputMultipleRadio.jsx | 17 +++++++++++++++ src/components/typeAnswer/InputRadio.jsx | 18 ++++++++++++++++ src/components/typeAnswer/InputText.jsx | 2 +- src/components/typeAnswer/TextArea.jsx | 12 +++++++++++ src/components/typeAnswer/YesNo.jsx | 19 +++++++++++++++++ src/pages/NewForm.jsx | 21 ++++++++++++------- 16 files changed, 182 insertions(+), 9 deletions(-) diff --git a/src/assets/styles/components/typeAnswer/dropDownList.module.scss b/src/assets/styles/components/typeAnswer/dropDownList.module.scss index e69de29..5321fec 100644 --- a/src/assets/styles/components/typeAnswer/dropDownList.module.scss +++ b/src/assets/styles/components/typeAnswer/dropDownList.module.scss @@ -0,0 +1,12 @@ +.main { + select { + font-size: 15px; + font-family: "Montserrat", sans-serif; + border: 1px solid rgb(200, 200, 200); + padding: 5px; + cursor: pointer; + option { + + } + } +} \ No newline at end of file diff --git a/src/assets/styles/components/typeAnswer/inputDate.module.scss b/src/assets/styles/components/typeAnswer/inputDate.module.scss index e69de29..be35b41 100644 --- a/src/assets/styles/components/typeAnswer/inputDate.module.scss +++ b/src/assets/styles/components/typeAnswer/inputDate.module.scss @@ -0,0 +1,9 @@ +.main { + input { + display: block; + font-size: 15px; + font-family: "Montserrat", sans-serif; + border: 1px solid rgb(200, 200, 200); + padding: 1%; + } +} \ No newline at end of file diff --git a/src/assets/styles/components/typeAnswer/inputFile.module.scss b/src/assets/styles/components/typeAnswer/inputFile.module.scss index e69de29..f315f81 100644 --- a/src/assets/styles/components/typeAnswer/inputFile.module.scss +++ b/src/assets/styles/components/typeAnswer/inputFile.module.scss @@ -0,0 +1,3 @@ +.main { + input {} +} \ No newline at end of file diff --git a/src/assets/styles/components/typeAnswer/inputMultiple.module.scss b/src/assets/styles/components/typeAnswer/inputMultiple.module.scss index e69de29..5815247 100644 --- a/src/assets/styles/components/typeAnswer/inputMultiple.module.scss +++ b/src/assets/styles/components/typeAnswer/inputMultiple.module.scss @@ -0,0 +1,3 @@ +.main { + +} \ No newline at end of file diff --git a/src/assets/styles/components/typeAnswer/textArea.module.scss b/src/assets/styles/components/typeAnswer/textArea.module.scss index e69de29..f553d9e 100644 --- a/src/assets/styles/components/typeAnswer/textArea.module.scss +++ b/src/assets/styles/components/typeAnswer/textArea.module.scss @@ -0,0 +1,14 @@ +.main { + textarea { + width: 100%; + font-size: 15px; + font-family: "Montserrat", sans-serif; + border: 1px solid rgb(200, 200, 200); + color: rgb(50, 50, 50); + padding: 1%; + height: 100px; + &::placeholder { + color: rgb(200, 200, 200); + } + } +} \ No newline at end of file diff --git a/src/assets/styles/components/typeAnswer/yesNo.module.scss b/src/assets/styles/components/typeAnswer/yesNo.module.scss index e69de29..d5631ee 100644 --- a/src/assets/styles/components/typeAnswer/yesNo.module.scss +++ b/src/assets/styles/components/typeAnswer/yesNo.module.scss @@ -0,0 +1,3 @@ +.main { + +} \ No newline at end of file diff --git a/src/components/PreviewModal.jsx b/src/components/PreviewModal.jsx index 00ad6f1..41c0a31 100644 --- a/src/components/PreviewModal.jsx +++ b/src/components/PreviewModal.jsx @@ -2,6 +2,9 @@ import React from "react"; import classes from "../assets/styles/components/previewModal.module.scss"; const PreviewModal = ({newForm, listTypeAnswer}) => { + // const [file, setFile] = useState(''); + // const [value, setValue] = useState(''); + return ( diff --git a/src/components/typeAnswer/DropDownList.jsx b/src/components/typeAnswer/DropDownList.jsx index e69de29..f45edbd 100644 --- a/src/components/typeAnswer/DropDownList.jsx +++ b/src/components/typeAnswer/DropDownList.jsx @@ -0,0 +1,21 @@ +import React, { useState } from "react"; +import classes from "../../assets/styles/components/typeAnswer/dropDownList.module.scss" + +const DropDownList = (props) => { + return ( +
+ {/* */} + +
+ ) +} + +export default DropDownList; \ No newline at end of file diff --git a/src/components/typeAnswer/InputDate.jsx b/src/components/typeAnswer/InputDate.jsx index e69de29..458f9b5 100644 --- a/src/components/typeAnswer/InputDate.jsx +++ b/src/components/typeAnswer/InputDate.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import classes from "../../assets/styles/components/typeAnswer/inputDate.module.scss" + +const InputDate = (props) => { + return ( +
+ +
+ ) +} + +export default InputDate; \ No newline at end of file diff --git a/src/components/typeAnswer/InputFile.jsx b/src/components/typeAnswer/InputFile.jsx index e69de29..d50449b 100644 --- a/src/components/typeAnswer/InputFile.jsx +++ b/src/components/typeAnswer/InputFile.jsx @@ -0,0 +1,20 @@ +import React, { useState } from "react"; +import classes from "../../assets/styles/components/typeAnswer/inputFile.module.scss" + +const InputFile = (props) => { + return ( +
+ setFile(event.target.value)} + > +
+ ) +} + +export default InputFile; \ No newline at end of file diff --git a/src/components/typeAnswer/InputMultipleRadio.jsx b/src/components/typeAnswer/InputMultipleRadio.jsx index e69de29..e561e07 100644 --- a/src/components/typeAnswer/InputMultipleRadio.jsx +++ b/src/components/typeAnswer/InputMultipleRadio.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import classes from "../../assets/styles/components/typeAnswer/inputMultiple.module.scss" + +const InputMultipleRadio = (props) => { + return ( +
+ {props.answers.map((item, i) => +
+ + +
+ )} +
+ ) +} + +export default InputMultipleRadio; \ No newline at end of file diff --git a/src/components/typeAnswer/InputRadio.jsx b/src/components/typeAnswer/InputRadio.jsx index e69de29..df58c86 100644 --- a/src/components/typeAnswer/InputRadio.jsx +++ b/src/components/typeAnswer/InputRadio.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import classes from "../../assets/styles/components/typeAnswer/inputRadio.module.scss" + +const InputRadio = (props) => { + return ( +
+ {props.answers.map((item, i) => +
+ + +
+ )} + +
+ ) +} + +export default InputRadio; \ No newline at end of file diff --git a/src/components/typeAnswer/InputText.jsx b/src/components/typeAnswer/InputText.jsx index fb68e07..f02a7ea 100644 --- a/src/components/typeAnswer/InputText.jsx +++ b/src/components/typeAnswer/InputText.jsx @@ -4,7 +4,7 @@ import classes from "../../assets/styles/components/typeAnswer/inputText.module. const InputText = (props) => { return (
- +
) } diff --git a/src/components/typeAnswer/TextArea.jsx b/src/components/typeAnswer/TextArea.jsx index e69de29..95dfa7f 100644 --- a/src/components/typeAnswer/TextArea.jsx +++ b/src/components/typeAnswer/TextArea.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import classes from "../../assets/styles/components/typeAnswer/textArea.module.scss" + +const TextArea = (props) => { + return ( +
+ +
+ ) +} + +export default TextArea; \ No newline at end of file diff --git a/src/components/typeAnswer/YesNo.jsx b/src/components/typeAnswer/YesNo.jsx index e69de29..d64679f 100644 --- a/src/components/typeAnswer/YesNo.jsx +++ b/src/components/typeAnswer/YesNo.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import classes from "../../assets/styles/components/typeAnswer/yesNo.module.scss" + +const YesNo = (props) => { + return ( +
+
+ + +
+
+ + +
+
+ ) +} + +export default YesNo; \ No newline at end of file diff --git a/src/pages/NewForm.jsx b/src/pages/NewForm.jsx index 9d93363..a01977b 100644 --- a/src/pages/NewForm.jsx +++ b/src/pages/NewForm.jsx @@ -6,6 +6,13 @@ import AnswerModal from "../components/AnswerModal.jsx"; import PreviewModal from "../components/PreviewModal.jsx" import { FormsData } from "../context"; import InputText from "../components/typeAnswer/InputText.jsx" +import TextArea from "../components/typeAnswer/TextArea.jsx"; +import YesNo from "../components/typeAnswer/YesNo.jsx" +import InputDate from "../components/typeAnswer/InputDate.jsx"; +import InputMultipleRadio from "../components/typeAnswer/InputMultipleRadio.jsx"; +import InputRadio from "../components/typeAnswer/InputRadio.jsx"; +import DropDownList from "../components/typeAnswer/DropDownList.jsx"; +import InputFile from "../components/typeAnswer/InputFile.jsx"; const NewForm = () => { const navigate = useNavigate(); @@ -33,13 +40,13 @@ const NewForm = () => { const [listTypeAnswer, setListTypeAnswer] = useState([ {id: 1, text: 'Краткий ответ', typeTag: InputText}, - {id: 2, text: 'Расширенный ответ', typeTag: InputText}, - {id: 3, text: 'Выбор из вариантов', typeTag: InputText}, - {id: 4, text: 'Множественный выбор', typeTag: InputText}, - {id: 5, text: 'Выпадающий список', typeTag: InputText}, - {id: 6, text: 'Да/Нет', typeTag: InputText}, - {id: 7, text: 'Файл', typeTag: InputText}, - {id: 8, text: 'Дата', typeTag: InputText} + {id: 2, text: 'Расширенный ответ', typeTag: TextArea}, + {id: 3, text: 'Выбор из вариантов', typeTag: InputRadio}, + {id: 4, text: 'Множественный выбор', typeTag: InputMultipleRadio}, + {id: 5, text: 'Выпадающий список', typeTag: DropDownList}, + {id: 6, text: 'Да/Нет', typeTag: YesNo}, + {id: 7, text: 'Файл', typeTag: InputFile}, + {id: 8, text: 'Дата', typeTag: InputDate} ]); function removeAnswerByForm(id) {