You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.8 KiB
70 lines
1.8 KiB
import { Close as CloseIcon } from '@mui/icons-material'; |
|
import { |
|
IconButton as MUIIconButton, |
|
iconButtonClasses as muiIconButtonClasses, |
|
inputClasses, |
|
Select as MUISelect, |
|
selectClasses as muiSelectClasses, |
|
InputAdornment as MUIInputAdornment, |
|
inputAdornmentClasses as muiInputAdornmentClasses, |
|
} from '@mui/material'; |
|
import { FC, useMemo } from 'react'; |
|
|
|
import { GREY } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
const Select = <Value = string,>( |
|
...[props]: Parameters<FC<SelectProps<Value>>> |
|
) => { |
|
const { onClearIndicatorClick, ...muiSelectProps } = props; |
|
const { sx: selectSx, value, ...restMuiSelectProps } = muiSelectProps; |
|
|
|
const combinedSx = useMemo( |
|
() => ({ |
|
[`& .${muiSelectClasses.icon}`]: { |
|
color: GREY, |
|
}, |
|
|
|
[`& .${muiInputAdornmentClasses.root}`]: { |
|
marginRight: '.8em', |
|
}, |
|
|
|
[`& .${muiIconButtonClasses.root}`]: { |
|
color: GREY, |
|
visibility: 'hidden', |
|
}, |
|
|
|
[`&:hover .${muiInputAdornmentClasses.root} .${muiIconButtonClasses.root}, |
|
&.${inputClasses.focused} .${muiInputAdornmentClasses.root} .${muiIconButtonClasses.root}`]: |
|
{ |
|
visibility: 'visible', |
|
}, |
|
|
|
...selectSx, |
|
}), |
|
[selectSx], |
|
); |
|
|
|
const clearIndicatorElement = useMemo( |
|
() => |
|
String(value).length > 0 && |
|
onClearIndicatorClick && ( |
|
<MUIInputAdornment position="end"> |
|
<MUIIconButton onClick={onClearIndicatorClick}> |
|
<CloseIcon fontSize="small" /> |
|
</MUIIconButton> |
|
</MUIInputAdornment> |
|
), |
|
[onClearIndicatorClick, value], |
|
); |
|
|
|
return ( |
|
<MUISelect<Value> |
|
endAdornment={clearIndicatorElement} |
|
value={value} |
|
{...restMuiSelectProps} |
|
sx={combinedSx} |
|
/> |
|
); |
|
}; |
|
|
|
export default Select;
|
|
|