diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js index c17c7c9..01a605b 100644 --- a/src/components/QueueSelector/QueueSelector.js +++ b/src/components/QueueSelector/QueueSelector.js @@ -6,46 +6,50 @@ import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) { + + const handleChange = (event, newValue) => { + setSelectedQueues(newValue) + }; + + const optionRenderer = (option, { selected }) => ( + <> + } + checkedIcon={} + style={{ marginRight: 8 }} + checked={selected} + /> + {`${option.name} (${option.number_of_items})`} + + ); + return( ( + + + Active Queues: + + {params.InputProps.startAdornment} + + ), + }} + /> + )} + options={queues} - onChange={(event, newValue) => { - setSelectedQueues(newValue) - }} - renderInput={(params) => { - return( - - - Active Queues: - - {params.InputProps.startAdornment} - - ), - }} - /> - ); - }} + onChange={handleChange} getOptionLabel={(option) => `${option.name} (${option.number_of_items})`} - renderOption={(option, { selected }) => ( - <> - } - checkedIcon={} - style={{ marginRight: 8 }} - checked={selected} - /> - {`${option.name} (${option.number_of_items})`} - - )} + renderOption={optionRenderer} getOptionSelected={ (option, value) => option.name === value.name } disableCloseOnSelect disableListWrap