90 lines
2.1 KiB
JavaScript
90 lines
2.1 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import { useTheme } from '@mui/material/styles';
|
||
|
|
import OutlinedInput from '@mui/material/OutlinedInput';
|
||
|
|
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.includes(name)
|
||
|
|
? theme.typography.fontWeightMedium
|
||
|
|
: theme.typography.fontWeightRegular,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function MultipleSelectPlaceholder() {
|
||
|
|
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 (
|
||
|
|
<div>
|
||
|
|
<FormControl sx={{ m: 1, width: 300, mt: 3 }}>
|
||
|
|
<Select
|
||
|
|
multiple
|
||
|
|
displayEmpty
|
||
|
|
value={personName}
|
||
|
|
onChange={handleChange}
|
||
|
|
input={<OutlinedInput />}
|
||
|
|
renderValue={(selected) => {
|
||
|
|
if (selected.length === 0) {
|
||
|
|
return <em>Placeholder</em>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return selected.join(', ');
|
||
|
|
}}
|
||
|
|
MenuProps={MenuProps}
|
||
|
|
inputProps={{ 'aria-label': 'Without label' }}
|
||
|
|
>
|
||
|
|
<MenuItem disabled value="">
|
||
|
|
<em>Placeholder</em>
|
||
|
|
</MenuItem>
|
||
|
|
{names.map((name) => (
|
||
|
|
<MenuItem
|
||
|
|
key={name}
|
||
|
|
value={name}
|
||
|
|
style={getStyles(name, personName, theme)}
|
||
|
|
>
|
||
|
|
{name}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</FormControl>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|