80 lines
2.7 KiB
JavaScript
80 lines
2.7 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Button from '@mui/material/Button';
|
||
|
|
import Dialog from '@mui/material/Dialog';
|
||
|
|
import DialogActions from '@mui/material/DialogActions';
|
||
|
|
import DialogContent from '@mui/material/DialogContent';
|
||
|
|
import DialogTitle from '@mui/material/DialogTitle';
|
||
|
|
import InputLabel from '@mui/material/InputLabel';
|
||
|
|
import OutlinedInput from '@mui/material/OutlinedInput';
|
||
|
|
import MenuItem from '@mui/material/MenuItem';
|
||
|
|
import FormControl from '@mui/material/FormControl';
|
||
|
|
import Select from '@mui/material/Select';
|
||
|
|
|
||
|
|
export default function DialogSelect() {
|
||
|
|
const [open, setOpen] = React.useState(false);
|
||
|
|
const [age, setAge] = React.useState('');
|
||
|
|
|
||
|
|
const handleChange = (event) => {
|
||
|
|
setAge(Number(event.target.value) || '');
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleClickOpen = () => {
|
||
|
|
setOpen(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleClose = (event, reason) => {
|
||
|
|
if (reason !== 'backdropClick') {
|
||
|
|
setOpen(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Button onClick={handleClickOpen}>Open select dialog</Button>
|
||
|
|
<Dialog disableEscapeKeyDown open={open} onClose={handleClose}>
|
||
|
|
<DialogTitle>Fill the form</DialogTitle>
|
||
|
|
<DialogContent>
|
||
|
|
<Box component="form" sx={{ display: 'flex', flexWrap: 'wrap' }}>
|
||
|
|
<FormControl sx={{ m: 1, minWidth: 120 }}>
|
||
|
|
<InputLabel htmlFor="demo-dialog-native">Age</InputLabel>
|
||
|
|
<Select
|
||
|
|
native
|
||
|
|
value={age}
|
||
|
|
onChange={handleChange}
|
||
|
|
input={<OutlinedInput label="Age" id="demo-dialog-native" />}
|
||
|
|
>
|
||
|
|
<option aria-label="None" value="" />
|
||
|
|
<option value={10}>Ten</option>
|
||
|
|
<option value={20}>Twenty</option>
|
||
|
|
<option value={30}>Thirty</option>
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
<FormControl sx={{ m: 1, minWidth: 120 }}>
|
||
|
|
<InputLabel id="demo-dialog-select-label">Age</InputLabel>
|
||
|
|
<Select
|
||
|
|
labelId="demo-dialog-select-label"
|
||
|
|
id="demo-dialog-select"
|
||
|
|
value={age}
|
||
|
|
onChange={handleChange}
|
||
|
|
input={<OutlinedInput label="Age" />}
|
||
|
|
>
|
||
|
|
<MenuItem value="">
|
||
|
|
<em>None</em>
|
||
|
|
</MenuItem>
|
||
|
|
<MenuItem value={10}>Ten</MenuItem>
|
||
|
|
<MenuItem value={20}>Twenty</MenuItem>
|
||
|
|
<MenuItem value={30}>Thirty</MenuItem>
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
</Box>
|
||
|
|
</DialogContent>
|
||
|
|
<DialogActions>
|
||
|
|
<Button onClick={handleClose}>Cancel</Button>
|
||
|
|
<Button onClick={handleClose}>Ok</Button>
|
||
|
|
</DialogActions>
|
||
|
|
</Dialog>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|