Skip to content
Snippets Groups Projects
Commit 9cc590de authored by pdg16's avatar pdg16
Browse files

create select field component

parent 37e71300
No related branches found
No related tags found
3 merge requests!58Version 1.1,!54Issue #53: Fix password info,!15Issue/4
......@@ -7,12 +7,19 @@ 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 FieldFooterOptions from './FieldFooterOptions';
const useStyles = makeStyles(theme => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
height: theme.spacing(16),
minheight: theme.spacing(16),
margin: theme.spacing(2)
},
questionsGrid: {
......@@ -20,6 +27,8 @@ const useStyles = makeStyles(theme => ({
},
}));
function FormFieldSelect(props) {
const classes = useStyles();
......@@ -27,25 +36,50 @@ function FormFieldSelect(props) {
<Paper className={classes.paper}>
<Grid container>
<Grid item xs={12} className={classes.questionsGrid}>
<TextField value={props.question} label="sua pergunta" onChange={e => props.setTextField(e.target.value, props.idq)}/>
<TextField value={props.question} label="sua pergunta"
onChange={e => props.setTextField(e.target.value, props.idq)}/>
</Grid>
<Grid item xs={11} className={classes.questionsGrid}>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
// value={age}
// onChange={handleChange}
<Grid item container
direction="column"
justify="flex-start"
alignItems="flex-start" xs={5} className={classes.questionsGrid}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
{
props.options.map((x, index) => {
return <Grid container>
<Grid item xs={11}>
<TextField label={"opção "+index} value={x} fullWidth
onChange={e => props.setSelectOption(e.target.value, props.idq, index)} />
</Grid>
<Grid item xs={1}>
<IconButton aria-label="delete" onClick={() => { props.deleteFromForm(props.idq) } }>
<DeleteOutlinedIcon />
<IconButton aria-label="remove option"
onClick={() => { props.removeSelectOption(props.idq, index) } }>
<CloseIcon />
</IconButton>
</Grid>
</Grid>
})
}
</Grid>
<Grid item container
direction="column"
justify="flex-start"
alignItems="flex-start"
xs={4}
>
<IconButton aria-label="add option" onClick={() => { props.addSelectOption(props.idq) } }>
<AddCircleIcon />
</IconButton>
</Grid>
<Grid item container
direction="row"
justify="flex-end"
alignItems="flex-end"
xs={3}
>
<FieldFooterOptions deleteFromForm={props.deleteFromForm} idq={props.idq}
setRequiredField={props.setRequiredField}/>
</Grid>
</Grid>
</Paper>
);
......@@ -53,15 +87,3 @@ function FormFieldSelect(props) {
}
export default FormFieldSelect;
\ No newline at end of file
{/* <InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select> */}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment