answer components

src/components/fieldsAnswerForm/FieldFooterOptions.js

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@material-ui/icons/Close';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+function FieldFooterOptions(props) {
+
+	return (
+			<>
+			<FormControlLabel
+				control={
+				<Switch
+					onChange={e => props.setRequiredField(props.idq) }
+					value="required"
+					color="primary"
+					checked={props.required}
+				/>
+				}
+				label="Obrigatória"
+			/>
+			<IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }>
+				<DeleteOutlinedIcon />
+			</IconButton>
+			</>
+	);
+
+
+}
+
+
+export default FieldFooterOptions;
\ No newline at end of file

src/components/fieldsAnswerForm/FormFieldCheckbox.js

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@material-ui/icons/Close';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Typography from '@material-ui/core/Typography';
+import Checkbox from '@material-ui/core/Checkbox';
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    padding: theme.spacing(3),
+    width: theme.spacing(100),
+    minheight: theme.spacing(16),
+    margin: theme.spacing(2)
+  },
+  questionsGrid: {
+    marginBottom: '20px'
+  },
+}));
+
+
+
+function FormFieldCheckbox(props) {
+  const classes = useStyles();
+
+  const options = props.options.map(function(x) {
+    return <span>{x.value} <Checkbox /></span>;
+  });
+
+  return (
+    <Paper className={classes.paper}>
+      <Grid container>
+        <Grid item xs={12} className={classes.questionsGrid}>
+          <Typography variant="h6" gutterBottom>
+            {props.question}
+          </Typography>
+        </Grid>
+        <Grid item container
+          direction="column"
+          justify="flex-start"
+          alignItems="flex-start" xs={5} className={classes.questionsGrid}
+        >
+          {options}
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+
+}
+
+export default FormFieldCheckbox;
\ No newline at end of file

src/components/fieldsAnswerForm/FormFieldRadio.js

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@material-ui/icons/Close';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Typography from '@material-ui/core/Typography';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    padding: theme.spacing(3),
+    width: theme.spacing(100),
+    minheight: theme.spacing(16),
+    margin: theme.spacing(2)
+  },
+  questionsGrid: {
+    marginBottom: '20px'
+  },
+}));
+
+
+
+function FormFieldRadio(props) {
+  const classes = useStyles();
+
+  const options = props.options.map(function(x) {
+    return <span>{x.value} <Radio /></span>;
+  });
+
+  return (
+    <Paper className={classes.paper}>
+      <Grid container>
+        <Grid item xs={12} className={classes.questionsGrid}>
+          <Typography variant="h6" gutterBottom>
+            {props.question}
+          </Typography>
+        </Grid>
+        <Grid item container
+          direction="column"
+          justify="flex-start"
+          alignItems="flex-start" xs={5} className={classes.questionsGrid}
+        >
+          <RadioGroup>
+            {options}
+          </RadioGroup>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+
+}
+
+export default FormFieldRadio;
\ No newline at end of file

src/components/fieldsAnswerForm/FormFieldSelect.js

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import CloseIcon from '@material-ui/icons/Close';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Typography from '@material-ui/core/Typography';
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    padding: theme.spacing(3),
+    width: theme.spacing(100),
+    minheight: theme.spacing(16),
+    margin: theme.spacing(2)
+  },
+  questionsGrid: {
+    marginBottom: '20px'
+  },
+}));
+
+
+
+function FormFieldSelect(props) {
+  const classes = useStyles();
+
+  const options = props.options.map(function(x) {
+    return <MenuItem value={x.value}>{x.value}</MenuItem>;
+  });
+
+  return (
+    <Paper className={classes.paper}>
+      <Grid container>
+        <Grid item xs={12} className={classes.questionsGrid}>
+          <Typography variant="h6" gutterBottom>
+            {props.question}
+          </Typography>
+        </Grid>
+        <Grid item container
+          direction="column"
+          justify="flex-start"
+          alignItems="flex-start" xs={5} className={classes.questionsGrid}
+        >
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            // onChange={handleChange}
+          >
+            {options}
+          </Select>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+
+}
+
+export default FormFieldSelect;
\ No newline at end of file

src/components/fieldsAnswerForm/FormFieldText.js

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    padding: theme.spacing(3),
+    width: theme.spacing(100),
+    height: theme.spacing(16),
+    margin: theme.spacing(2)
+  },
+  questionsGrid: {
+    marginBottom: '20px'
+  },
+}));
+
+function FormFieldText(props) {
+  const classes = useStyles();
+
+  return (
+    <Paper className={classes.paper}>
+      <Grid container>
+        <Grid item xs={12} className={classes.questionsGrid}>
+          <Typography variant="h6" gutterBottom>
+            {props.question}
+          </Typography>
+        </Grid>
+        <Grid item xs={9} className={classes.questionsGrid}>
+          <TextField
+            disabled
+            id="outlined-disabled"
+            label=""
+            defaultValue="Resposta curta"
+          />
+        </Grid>
+        <Grid item container
+          direction="row"
+          justify="flex-end"
+          alignItems="flex-end"
+          xs={3}
+        >
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+
+}
+
+export default FormFieldText;
\ No newline at end of file

src/components/fieldsAnswerForm/FormFieldTitle.js

+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+
+import FieldFooterOptions from './FieldFooterOptions';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    padding: theme.spacing(3),
+    width: theme.spacing(100),
+    height: theme.spacing(16),
+    margin: theme.spacing(2)
+  },
+  questionsGrid: {
+		marginBottom: '20px'
+	},
+	title: {
+		fontSize: 'xx-large'
+	},
+	description: {
+		fontSize: 'x-large'
+	},
+}));
+
+function FormFieldText(props) {
+  const classes = useStyles();
+
+  return (
+    <Paper className={classes.paper}>
+      <Grid container>
+        <Grid item xs={12} className={classes.questionsGrid}>
+          <Typography variant="h3" gutterBottom>
+            {props.title}
+          </Typography>
+        </Grid>
+        <Grid item xs={9} className={classes.questionsGrid}>
+          <Typography variant="h4" gutterBottom>
+            {props.description}
+          </Typography>
+        </Grid>
+        <Grid item container
+          direction="row"
+          justify="flex-end"
+          alignItems="flex-end"
+          xs={3}
+        >
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+
+}
+
+export default FormFieldText;
\ No newline at end of file