fix(striker-ui): allow extend renderInput in Autocomplete

main
Tsu-ba-me 3 years ago
parent 86062d33a2
commit 6eb66c7df3
  1. 36
      striker-ui/components/Autocomplete.tsx

@ -2,6 +2,7 @@ import {
Autocomplete as MUIAutocomplete, Autocomplete as MUIAutocomplete,
autocompleteClasses as muiAutocompleteClasses, autocompleteClasses as muiAutocompleteClasses,
AutocompleteProps as MUIAutocompleteProps, AutocompleteProps as MUIAutocompleteProps,
AutocompleteRenderInputParams as MUIAutocompleteRenderInputParams,
Grow as MUIGrow, Grow as MUIGrow,
outlinedInputClasses as muiOutlinedInputClasses, outlinedInputClasses as muiOutlinedInputClasses,
Paper as MUIPaper, Paper as MUIPaper,
@ -11,17 +12,26 @@ import {
import { GREY, TEXT } from '../lib/consts/DEFAULT_THEME'; import { GREY, TEXT } from '../lib/consts/DEFAULT_THEME';
import OutlinedInputWithLabel from './OutlinedInputWithLabel'; import OutlinedInputWithLabel, {
OutlinedInputWithLabelProps,
} from './OutlinedInputWithLabel';
type AutocompleteOptionalProps = {
extendRenderInput?: (
inputWithLabelProps: OutlinedInputWithLabelProps,
renderInputParams?: MUIAutocompleteRenderInputParams,
) => void;
};
type AutocompleteProps< type AutocompleteProps<
T, T,
Multiple extends boolean | undefined, Multiple extends boolean | undefined,
DisableClearable extends boolean | undefined, DisableClearable extends boolean | undefined,
FreeSolo extends boolean | undefined, FreeSolo extends boolean | undefined,
> = { label: string } & Omit< > = AutocompleteOptionalProps & { label: string } & Omit<
MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
'renderInput' 'renderInput'
> & > &
Partial< Partial<
Pick< Pick<
MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
@ -44,7 +54,8 @@ const Autocomplete = <
>( >(
autocompleteProps: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, autocompleteProps: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
): JSX.Element => { ): JSX.Element => {
const { componentsProps, label, renderInput, sx } = autocompleteProps; const { componentsProps, extendRenderInput, label, renderInput, sx } =
autocompleteProps;
const combinedComponentsProps: AutocompleteProps< const combinedComponentsProps: AutocompleteProps<
T, T,
Multiple, Multiple,
@ -61,9 +72,10 @@ const Autocomplete = <
}; };
const combinedRenderInput = const combinedRenderInput =
renderInput ?? renderInput ??
(({ fullWidth, InputProps, InputLabelProps, inputProps }) => ( ((renderInputParams) => {
<OutlinedInputWithLabel const { fullWidth, InputProps, InputLabelProps, inputProps } =
{...{ renderInputParams;
const inputWithLabelProps: OutlinedInputWithLabelProps = {
formControlProps: { formControlProps: {
fullWidth, fullWidth,
ref: InputProps.ref, ref: InputProps.ref,
@ -76,9 +88,13 @@ const Autocomplete = <
startAdornment: InputProps.startAdornment, startAdornment: InputProps.startAdornment,
}, },
label, label,
}} };
/>
)); extendRenderInput?.call(null, inputWithLabelProps, renderInputParams);
// eslint-disable-next-line react/jsx-props-no-spreading
return <OutlinedInputWithLabel {...inputWithLabelProps} />;
});
const combinedSx = { const combinedSx = {
[`& .${muiOutlinedInputClasses.root} .${muiAutocompleteClasses.endAdornment}`]: [`& .${muiOutlinedInputClasses.root} .${muiAutocompleteClasses.endAdornment}`]:
{ {

Loading…
Cancel
Save