|
|
@ -5,11 +5,14 @@ import { |
|
|
|
AutocompleteRenderInputParams as MUIAutocompleteRenderInputParams, |
|
|
|
AutocompleteRenderInputParams as MUIAutocompleteRenderInputParams, |
|
|
|
Box, |
|
|
|
Box, |
|
|
|
Grow as MUIGrow, |
|
|
|
Grow as MUIGrow, |
|
|
|
|
|
|
|
ListSubheader, |
|
|
|
outlinedInputClasses as muiOutlinedInputClasses, |
|
|
|
outlinedInputClasses as muiOutlinedInputClasses, |
|
|
|
Paper as MUIPaper, |
|
|
|
Paper as MUIPaper, |
|
|
|
PaperProps as MUIPaperProps, |
|
|
|
PaperProps as MUIPaperProps, |
|
|
|
svgIconClasses as muiSvgIconClasses, |
|
|
|
svgIconClasses as muiSvgIconClasses, |
|
|
|
|
|
|
|
styled, |
|
|
|
} from '@mui/material'; |
|
|
|
} from '@mui/material'; |
|
|
|
|
|
|
|
import { useMemo } from 'react'; |
|
|
|
|
|
|
|
|
|
|
|
import { GREY, TEXT } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
import { GREY, TEXT } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
|
|
|
|
|
|
|
@ -24,6 +27,7 @@ type AutocompleteOptionalProps = { |
|
|
|
inputWithLabelProps: OutlinedInputWithLabelProps, |
|
|
|
inputWithLabelProps: OutlinedInputWithLabelProps, |
|
|
|
renderInputParams?: MUIAutocompleteRenderInputParams, |
|
|
|
renderInputParams?: MUIAutocompleteRenderInputParams, |
|
|
|
) => void; |
|
|
|
) => void; |
|
|
|
|
|
|
|
getGroupLabel?: (group: string) => React.ReactNode; |
|
|
|
messageBoxProps?: Partial<MessageBoxProps>; |
|
|
|
messageBoxProps?: Partial<MessageBoxProps>; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
@ -49,6 +53,12 @@ const GrowPaper = (paperProps: MUIPaperProps): JSX.Element => ( |
|
|
|
</MUIGrow> |
|
|
|
</MUIGrow> |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const GroupChildren = styled('ul')({ |
|
|
|
|
|
|
|
padding: 0, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const GroupHeader = ListSubheader; |
|
|
|
|
|
|
|
|
|
|
|
const Autocomplete = < |
|
|
|
const Autocomplete = < |
|
|
|
T, |
|
|
|
T, |
|
|
|
Multiple extends boolean | undefined = undefined, |
|
|
|
Multiple extends boolean | undefined = undefined, |
|
|
@ -60,18 +70,24 @@ const Autocomplete = < |
|
|
|
const { |
|
|
|
const { |
|
|
|
componentsProps, |
|
|
|
componentsProps, |
|
|
|
extendRenderInput, |
|
|
|
extendRenderInput, |
|
|
|
|
|
|
|
getGroupLabel, |
|
|
|
label, |
|
|
|
label, |
|
|
|
messageBoxProps, |
|
|
|
messageBoxProps, |
|
|
|
|
|
|
|
renderGroup, |
|
|
|
renderInput, |
|
|
|
renderInput, |
|
|
|
sx, |
|
|
|
sx, |
|
|
|
...autocompleteRestProps |
|
|
|
...autocompleteRestProps |
|
|
|
} = autocompleteProps; |
|
|
|
} = autocompleteProps; |
|
|
|
const combinedComponentsProps: AutocompleteProps< |
|
|
|
|
|
|
|
|
|
|
|
const combinedComponentsProps = useMemo< |
|
|
|
|
|
|
|
AutocompleteProps< |
|
|
|
T, |
|
|
|
T, |
|
|
|
Multiple, |
|
|
|
Multiple, |
|
|
|
DisableClearable, |
|
|
|
DisableClearable, |
|
|
|
FreeSolo |
|
|
|
FreeSolo |
|
|
|
>['componentsProps'] = { |
|
|
|
>['componentsProps'] |
|
|
|
|
|
|
|
>( |
|
|
|
|
|
|
|
() => ({ |
|
|
|
paper: { |
|
|
|
paper: { |
|
|
|
sx: { |
|
|
|
sx: { |
|
|
|
backgroundColor: TEXT, |
|
|
|
backgroundColor: TEXT, |
|
|
@ -83,12 +99,43 @@ const Autocomplete = < |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
...componentsProps, |
|
|
|
...componentsProps, |
|
|
|
}; |
|
|
|
}), |
|
|
|
const combinedRenderInput = |
|
|
|
[componentsProps], |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const combinedRenderGroup = useMemo< |
|
|
|
|
|
|
|
AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderGroup'] |
|
|
|
|
|
|
|
>(() => { |
|
|
|
|
|
|
|
if (renderGroup) return renderGroup; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
|
|
getGroupLabel && |
|
|
|
|
|
|
|
((params) => ( |
|
|
|
|
|
|
|
<li key={params.key}> |
|
|
|
|
|
|
|
<GroupHeader |
|
|
|
|
|
|
|
component="div" |
|
|
|
|
|
|
|
className={muiAutocompleteClasses.groupLabel} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{getGroupLabel(params.group)} |
|
|
|
|
|
|
|
</GroupHeader> |
|
|
|
|
|
|
|
<GroupChildren className={muiAutocompleteClasses.groupUl}> |
|
|
|
|
|
|
|
{params.children} |
|
|
|
|
|
|
|
</GroupChildren> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
)) |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}, [getGroupLabel, renderGroup]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const combinedRenderInput = useMemo< |
|
|
|
|
|
|
|
Exclude< |
|
|
|
|
|
|
|
AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'], |
|
|
|
|
|
|
|
undefined |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
>( |
|
|
|
|
|
|
|
() => |
|
|
|
renderInput ?? |
|
|
|
renderInput ?? |
|
|
|
((renderInputParams) => { |
|
|
|
((params) => { |
|
|
|
const { fullWidth, InputProps, InputLabelProps, inputProps } = |
|
|
|
const { fullWidth, InputProps, InputLabelProps, inputProps } = params; |
|
|
|
renderInputParams; |
|
|
|
|
|
|
|
const inputWithLabelProps: OutlinedInputWithLabelProps = { |
|
|
|
const inputWithLabelProps: OutlinedInputWithLabelProps = { |
|
|
|
formControlProps: { |
|
|
|
formControlProps: { |
|
|
|
fullWidth, |
|
|
|
fullWidth, |
|
|
@ -104,11 +151,17 @@ const Autocomplete = < |
|
|
|
label, |
|
|
|
label, |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
extendRenderInput?.call(null, inputWithLabelProps, renderInputParams); |
|
|
|
extendRenderInput?.call(null, inputWithLabelProps, params); |
|
|
|
|
|
|
|
|
|
|
|
return <OutlinedInputWithLabel {...inputWithLabelProps} />; |
|
|
|
return <OutlinedInputWithLabel {...inputWithLabelProps} />; |
|
|
|
}); |
|
|
|
}), |
|
|
|
const combinedSx = { |
|
|
|
[extendRenderInput, label, renderInput], |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const combinedSx = useMemo< |
|
|
|
|
|
|
|
AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['sx'] |
|
|
|
|
|
|
|
>( |
|
|
|
|
|
|
|
() => ({ |
|
|
|
[`& .${muiOutlinedInputClasses.root} .${muiAutocompleteClasses.endAdornment}`]: |
|
|
|
[`& .${muiOutlinedInputClasses.root} .${muiAutocompleteClasses.endAdornment}`]: |
|
|
|
{ |
|
|
|
{ |
|
|
|
right: `7px`, |
|
|
|
right: `7px`, |
|
|
@ -119,18 +172,19 @@ const Autocomplete = < |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
...sx, |
|
|
|
...sx, |
|
|
|
}; |
|
|
|
}), |
|
|
|
|
|
|
|
[sx], |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}> |
|
|
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}> |
|
|
|
<MUIAutocomplete |
|
|
|
<MUIAutocomplete |
|
|
|
{...{ |
|
|
|
PaperComponent={GrowPaper} |
|
|
|
PaperComponent: GrowPaper, |
|
|
|
{...autocompleteRestProps} |
|
|
|
...autocompleteRestProps, |
|
|
|
componentsProps={combinedComponentsProps} |
|
|
|
componentsProps: combinedComponentsProps, |
|
|
|
renderGroup={combinedRenderGroup} |
|
|
|
renderInput: combinedRenderInput, |
|
|
|
renderInput={combinedRenderInput} |
|
|
|
sx: combinedSx, |
|
|
|
sx={combinedSx} |
|
|
|
}} |
|
|
|
|
|
|
|
/> |
|
|
|
/> |
|
|
|
<InputMessageBox {...messageBoxProps} /> |
|
|
|
<InputMessageBox {...messageBoxProps} /> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|