CHIEFSOFT\ameye
106 lines
2.4 KiB
JavaScript
106 lines
2.4 KiB
JavaScript
import React from "react";
|
|
import Card from "@mui/material/Card";
|
|
import { Typography } from "@mui/material";
|
|
import { useTheme } from '@mui/material/styles';
|
|
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
import InputLabel from '@mui/material/InputLabel';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import Select from '@mui/material/Select';
|
|
|
|
const ITEM_HEIGHT = 48;
|
|
const ITEM_PADDING_TOP = 8;
|
|
const MenuProps = {
|
|
PaperProps: {
|
|
style: {
|
|
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
|
width: 250,
|
|
},
|
|
},
|
|
};
|
|
|
|
const names = [
|
|
'Oliver Hansen',
|
|
'Van Henry',
|
|
'April Tucker',
|
|
'Ralph Hubbard',
|
|
'Omar Alexander',
|
|
'Carlos Abbott',
|
|
'Miriam Wagner',
|
|
'Bradley Wilkerson',
|
|
'Virginia Andrews',
|
|
'Kelly Snyder',
|
|
];
|
|
|
|
function getStyles(name, personName, theme) {
|
|
return {
|
|
fontWeight:
|
|
personName.indexOf(name) === -1
|
|
? theme.typography.fontWeightRegular
|
|
: theme.typography.fontWeightMedium,
|
|
};
|
|
}
|
|
|
|
export default function MultiSelect() {
|
|
|
|
const theme = useTheme();
|
|
const [personName, setPersonName] = React.useState([]);
|
|
|
|
const handleChange = (event) => {
|
|
const {
|
|
target: { value },
|
|
} = event;
|
|
setPersonName(
|
|
// On autofill we get a stringified value.
|
|
typeof value === 'string' ? value.split(',') : value,
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Card
|
|
sx={{
|
|
boxShadow: "none",
|
|
borderRadius: "10px",
|
|
p: "25px",
|
|
mb: "15px",
|
|
}}
|
|
>
|
|
<Typography
|
|
as="h3"
|
|
sx={{
|
|
fontSize: 18,
|
|
fontWeight: 500,
|
|
mb: '10px'
|
|
}}
|
|
>
|
|
Multi Select
|
|
</Typography>
|
|
|
|
<FormControl sx={{ width: '100%' }}>
|
|
<InputLabel id="demo-multiple-name-label">Name</InputLabel>
|
|
<Select
|
|
labelId="demo-multiple-name-label"
|
|
id="demo-multiple-name"
|
|
multiple
|
|
value={personName}
|
|
onChange={handleChange}
|
|
input={<OutlinedInput label="Name" />}
|
|
MenuProps={MenuProps}
|
|
>
|
|
{names.map((name) => (
|
|
<MenuItem
|
|
key={name}
|
|
value={name}
|
|
style={getStyles(name, personName, theme)}
|
|
>
|
|
{name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Card>
|
|
</>
|
|
);
|
|
}
|