finish step one
This commit is contained in:
kuwsh1n
parent
4e1ab987ca
commit
5871ed6cd0
@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.main {
|
||||
input {}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.main {
|
||||
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
.main {
|
||||
|
||||
}
|
||||
@ -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 (
|
||||
<div class="modal fade modal-lg" className={classes.myModal} id="previewModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
|
||||
<div class="modal-dialog" className={classes.myModal__dialog}>
|
||||
@ -19,7 +22,7 @@ const PreviewModal = ({newForm, listTypeAnswer}) => {
|
||||
</div>
|
||||
<div className={classes.myModal__dialog__content__body__item__answer}>
|
||||
{
|
||||
listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({text: '55555'})
|
||||
listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({postfix: i, answers: item.optionAnswer})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
import React, { useState } from "react";
|
||||
import classes from "../../assets/styles/components/typeAnswer/dropDownList.module.scss"
|
||||
|
||||
const DropDownList = (props) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
{/* <select value={value} onChange={e => setValue(e.target.value)}>
|
||||
{props.answers.map((item, i) =>
|
||||
<option value={item.id} key={i}>{item.text}</option>
|
||||
)}
|
||||
</select> */}
|
||||
<select>
|
||||
{props.answers.map((item, i) =>
|
||||
<option value={item.id} key={i}>{item.text}</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DropDownList;
|
||||
@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import classes from "../../assets/styles/components/typeAnswer/inputDate.module.scss"
|
||||
|
||||
const InputDate = (props) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<input type="datetime-local" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InputDate;
|
||||
@ -0,0 +1,20 @@
|
||||
import React, { useState } from "react";
|
||||
import classes from "../../assets/styles/components/typeAnswer/inputFile.module.scss"
|
||||
|
||||
const InputFile = (props) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<input
|
||||
// id={`file_${props.postfix}`}
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*,image/jpeg,video/mp4,video/x-m4v,video/*"
|
||||
className={classes.myModal__dialog__content__body__answer__file}
|
||||
// value={file}
|
||||
// onChange={event => setFile(event.target.value)}
|
||||
></input>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InputFile;
|
||||
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
import classes from "../../assets/styles/components/typeAnswer/inputMultiple.module.scss"
|
||||
|
||||
const InputMultipleRadio = (props) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
{props.answers.map((item, i) =>
|
||||
<div class="form-check" key={i}>
|
||||
<input class="form-check-input" type="checkbox" name={`inputMultiple_${props.postfix}`} id={`inputMultiple_${props.postfix}`}/>
|
||||
<label class="form-check-label" for={`inputMultiple_${props.postfix}`}>{item.text}</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InputMultipleRadio;
|
||||
@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import classes from "../../assets/styles/components/typeAnswer/inputRadio.module.scss"
|
||||
|
||||
const InputRadio = (props) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
{props.answers.map((item, i) =>
|
||||
<div class="form-check" key={i}>
|
||||
<input class="form-check-input" type="radio" name={`inputRadio_${props.postfix}`} id={`choice_${item.id}`}/>
|
||||
<label class="form-check-label" for={`inputRadio_${props.postfix}`}>{item.text}</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InputRadio;
|
||||
@ -4,7 +4,7 @@ import classes from "../../assets/styles/components/typeAnswer/inputText.module.
|
||||
const InputText = (props) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<input type="text" placeholder={"Ответ"}/>
|
||||
<input type="text" placeholder={"Ответ..."}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import classes from "../../assets/styles/components/typeAnswer/textArea.module.scss"
|
||||
|
||||
const TextArea = (props) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<textarea placeholder={"Ответ..."}></textarea>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TextArea;
|
||||
@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import classes from "../../assets/styles/components/typeAnswer/yesNo.module.scss"
|
||||
|
||||
const YesNo = (props) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name={`YesOrNo_${props.postfix}`} id="choiceYes"/>
|
||||
<label class="form-check-label" for="choiceYes">Да</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name={`YesOrNo_${props.postfix}`} id="choiceNo"/>
|
||||
<label class="form-check-label" for="choiceNo">Нет</label>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default YesNo;
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user