diff --git a/src/App.js b/src/App.js index 54f41e43accd81bde630eebf683d848367f43767..46e9d3c65e146a98813d2771c4260c4e9fc8ce64 100644 --- a/src/App.js +++ b/src/App.js @@ -7,11 +7,12 @@ 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 CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import FormFieldText from './components/FormFieldText'; import FormFieldSelect from './components/FormFieldSelect'; import FormFieldRadio from './components/FormFieldRadio'; +import FormFieldCheckbox from './components/FormFieldCheckbox'; const useStyles = makeStyles(theme => ({ menu: { @@ -44,6 +45,11 @@ function App() { console.log(form); } + function addToFormCheckbox() { + setForm([...form, {type: "checkbox", question: "", required: false, options: [""]}]); + console.log(form); + } + function addSelectOption(index) { form[index].options.push(""); setForm([...form]); @@ -106,6 +112,11 @@ function App() { deleteFromForm={deleteFromForm} addSelectOption={addSelectOption} removeSelectOption={removeSelectOption} setSelectOption={setSelectOption} setTextField={setTextField} setRequiredField={setRequiredField} /> + else if(x.type === "checkbox") + return <FormFieldCheckbox question={x.question} options={x.options} idq={index} + deleteFromForm={deleteFromForm} addSelectOption={addSelectOption} + removeSelectOption={removeSelectOption} setSelectOption={setSelectOption} + setTextField={setTextField} setRequiredField={setRequiredField} /> }) } @@ -130,6 +141,9 @@ function App() { <IconButton aria-label="add radio" onClick={addToFormRadio}> <RadioButtonCheckedIcon /> </IconButton> + <IconButton aria-label="add checkbox" onClick={addToFormCheckbox}> + <CheckBoxOutlineBlankIcon /> + </IconButton> </Grid> </Grid> </Paper>