| | |
| | | }; |
| | | |
| | | return ( |
| | | <Stack direction="row" spacing={2} alignItems="center"> |
| | | <Stack direction="row" spacing={1} alignItems="center"> |
| | | <Select |
| | | variant="outlined" |
| | | size="small" |
| | |
| | | size="small" |
| | | options={filterDeviceList} |
| | | getOptionLabel={(option) => option.value} |
| | | renderOption={(props, option) => ( |
| | | <li {...props}> |
| | | <Stack direction="row" justifyContent="space-between" width="100%"> |
| | | <Typography variant="body1" fontWeight="bold"> |
| | | {option.label} |
| | | </Typography> |
| | | <Typography variant="body2" color="text.secondary"> |
| | | {option.uuid} |
| | | </Typography> |
| | | </Stack> |
| | | </li> |
| | | )} |
| | | renderOption={(props, option) => { |
| | | const { key, ...otherProps } = props; |
| | | return ( |
| | | <li key={Number(key)} {...otherProps}> |
| | | <Stack direction="row" justifyContent="space-between" width="100%"> |
| | | <Typography variant="body1" fontWeight="bold"> |
| | | {option.label} |
| | | </Typography> |
| | | <Typography variant="body2" color="text.secondary"> |
| | | {option.uuid} |
| | | </Typography> |
| | | </Stack> |
| | | </li> |
| | | ) |
| | | }} |
| | | renderInput={(params) => ( |
| | | <TextField |
| | | {...params} |
| | |
| | | </> |
| | | ), |
| | | }} |
| | | sx={{ minWidth: 360 }} |
| | | sx={{ |
| | | minWidth: 360, |
| | | marginBottom: '7px', |
| | | }} |
| | | /> |
| | | )} |
| | | value={selectedOption} |