60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
import * as React from 'react';
|
|
import TextField from '@mui/material/TextField';
|
|
import Chip from '@mui/material/Chip';
|
|
import Autocomplete from '@mui/material/Autocomplete';
|
|
|
|
export default function GameAdder(props) {
|
|
|
|
const [value, setValue] = React.useState([]);
|
|
|
|
const emptyUuid = "00000000-0000-0000-0000-000000000000";
|
|
|
|
return (
|
|
<Autocomplete
|
|
multiple
|
|
id="tags-filled"
|
|
options={props.games}
|
|
value={value}
|
|
getOptionLabel={(option) => option.name}
|
|
freeSolo
|
|
selectOnFocus
|
|
renderTags={(value, getTagProps) =>
|
|
value.map((option, index) => (
|
|
<Chip variant="outlined" label={option.name} {...getTagProps({ index })} />
|
|
))
|
|
}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
variant="filled"
|
|
label="What games do you like to play?"
|
|
placeholder="monopoly"
|
|
/>
|
|
)}
|
|
onChange={(event, newValue) => {
|
|
newValue = newValue.map(option => {
|
|
if (typeof option === 'string') {
|
|
var match = props.games.find(g => g.name.toLowerCase() === option.toLowerCase());
|
|
if(match !== undefined) {
|
|
return match
|
|
} else {
|
|
return {id: emptyUuid, name: option};
|
|
}
|
|
}
|
|
else {
|
|
return option;
|
|
}
|
|
});
|
|
|
|
newValue = newValue.filter((value, index, self) =>
|
|
index === self.findIndex((t) => (
|
|
t.id === value.id && t.name === value.name
|
|
))
|
|
);
|
|
setValue(newValue);
|
|
props.onChange(newValue);
|
|
}}
|
|
|
|
/>
|
|
);
|
|
} |