fix(striker-ui): add getGroupLabel, apply useMemo, simplify props passthrough in autocomplete

main
Tsu-ba-me 11 months ago
parent 9bc2f2988c
commit 1f5bf604e1
  1. 90
      striker-ui/components/Autocomplete.tsx

@ -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>

Loading…
Cancel
Save