From 166e54d2d61939aaa6c811250e4c7de5f0651ff5 Mon Sep 17 00:00:00 2001
From: pdg16 <pdg16@inf.ufpr.br>
Date: Fri, 17 Jan 2020 11:11:13 -0300
Subject: [PATCH] add select field option
---
src/App.js | 47 +++++++++++++++++++++++++++++++++++++++--------
1 file changed, 39 insertions(+), 8 deletions(-)
diff --git a/src/App.js b/src/App.js
index db00a15..0430743 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import TextField from '@material-ui/core/TextField';
import AddIcon from '@material-ui/icons/Add';
import IconButton from '@material-ui/core/IconButton';
import ReorderIcon from '@material-ui/icons/Reorder';
+import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
import FormFieldText from './components/FormFieldText'
@@ -15,7 +16,7 @@ import FormFieldSelect from './components/FormFieldSelect'
const useStyles = makeStyles(theme => ({
menu: {
width: theme.spacing(6),
- height: theme.spacing(15),
+ minheight: theme.spacing(15),
position: 'fixed',
top: theme.spacing(10),
left: '90%',
@@ -29,12 +30,22 @@ function App() {
const [form, setForm] = useState([]);
function addToFormQuestion() {
- setForm([...form, {type: "question", question: ""}]);
+ setForm([...form, {type: "question", required: false, question: ""}]);
console.log(form);
}
function addToFormSelect() {
- setForm([...form, {type: "select", question: "", options: []}]);
+ setForm([...form, {type: "select", question: "", required: false, options: [""]}]);
+ console.log(form);
+ }
+
+ function addToFormRadio() {
+
+ }
+
+ function addSelectOption(index) {
+ form[index].options.push("");
+ setForm([...form]);
console.log(form);
}
@@ -45,18 +56,30 @@ function App() {
setForm([...form]);
}
+ function removeSelectOption(index, idopt) {
+ form[index].options.splice(idopt, 1);
+ setForm([...form]);
+ console.log(form);
+ }
+
function setTextField(value, index) {
form[index].question = value;
setForm([...form]);
console.log(form);
}
-
- function setSelectField(value, index) {
+
+ function setSelectOption(value, index, idopt) {
+ form[index].options[idopt] = value;
+ setForm([...form]);
console.log(form);
}
+ function setRequiredField(index) {
+ form[index].required = !form[index].required;
+ setForm([...form]);
+ console.log(form);
+ }
-
return (
<div>
<Grid
@@ -69,9 +92,14 @@ function App() {
{
form.map((x, index) => {
if(x.type === "question")
- return <FormFieldText question={x.question} idq={index} deleteFromForm={deleteFromForm} setTextField={setTextField}/>
+ return <FormFieldText question={x.question} idq={index}
+ deleteFromForm={deleteFromForm} setTextField={setTextField}
+ setRequiredField={setRequiredField}/>
else if(x.type === "select")
- return <FormFieldSelect question={x.question} idq={index} deleteFromForm={deleteFromForm} setTextField={setSelectField}/>
+ return <FormFieldSelect question={x.question} options={x.options} idq={index}
+ deleteFromForm={deleteFromForm} addSelectOption={addSelectOption}
+ removeSelectOption={removeSelectOption} setSelectOption={setSelectOption}
+ setTextField={setTextField} setRequiredField={setRequiredField} />
})
}
@@ -93,6 +121,9 @@ function App() {
<IconButton aria-label="add select" onClick={addToFormSelect}>
<ReorderIcon />
</IconButton>
+ <IconButton aria-label="add radio" onClick={addToFormRadio}>
+ <RadioButtonCheckedIcon />
+ </IconButton>
</Grid>
</Grid>
</Paper>
--
GitLab