fix(striker-ui): separate types from Select component

main
Tsu-ba-me 2 years ago committed by digimer
parent 2cd28856df
commit 4cce7b06f4
  1. 102
      striker-ui/components/Select.tsx
  2. 5
      striker-ui/types/Select.d.ts

@ -1,82 +1,70 @@
import { FC } from 'react'; import { Close as CloseIcon } from '@mui/icons-material';
import { import {
IconButton as MUIIconButton, IconButton as MUIIconButton,
IconButtonProps as MUIIconButtonProps,
iconButtonClasses as muiIconButtonClasses, iconButtonClasses as muiIconButtonClasses,
inputClasses, inputClasses,
Select as MUISelect, Select as MUISelect,
selectClasses as muiSelectClasses, selectClasses as muiSelectClasses,
SelectProps as MUISelectProps,
InputAdornment as MUIInputAdornment, InputAdornment as MUIInputAdornment,
inputAdornmentClasses as muiInputAdornmentClasses, inputAdornmentClasses as muiInputAdornmentClasses,
} from '@mui/material'; } from '@mui/material';
import { Close as CloseIcon } from '@mui/icons-material'; import { FC, useMemo } from 'react';
import { GREY } from '../lib/consts/DEFAULT_THEME'; import { GREY } from '../lib/consts/DEFAULT_THEME';
type SelectOptionalProps = { const Select: FC<SelectProps> = ({
onClearIndicatorClick?: MUIIconButtonProps['onClick'] | null; onClearIndicatorClick,
}; ...muiSelectProps
}) => {
type SelectProps = MUISelectProps & SelectOptionalProps; const { sx: selectSx, value, ...restMuiSelectProps } = muiSelectProps;
const SELECT_DEFAULT_PROPS: Required<SelectOptionalProps> = { const combinedSx = useMemo(
onClearIndicatorClick: null, () => ({
}; [`& .${muiSelectClasses.icon}`]: {
color: GREY,
const Select: FC<SelectProps> = (selectProps) => { },
const {
onClearIndicatorClick = SELECT_DEFAULT_PROPS.onClearIndicatorClick,
...muiSelectProps
} = selectProps;
const { children, sx, value } = muiSelectProps;
const clearIndicator: JSX.Element | undefined =
String(value).length > 0 && onClearIndicatorClick ? (
<MUIInputAdornment position="end">
<MUIIconButton onClick={onClearIndicatorClick}>
<CloseIcon fontSize="small" />
</MUIIconButton>
</MUIInputAdornment>
) : undefined;
const combinedSx = {
[`& .${muiSelectClasses.icon}`]: {
color: GREY,
},
[`& .${muiInputAdornmentClasses.root}`]: { [`& .${muiInputAdornmentClasses.root}`]: {
marginRight: '.8em', marginRight: '.8em',
}, },
[`& .${muiIconButtonClasses.root}`]: { [`& .${muiIconButtonClasses.root}`]: {
color: GREY, color: GREY,
visibility: 'hidden', visibility: 'hidden',
}, },
[`&:hover .${muiInputAdornmentClasses.root} .${muiIconButtonClasses.root}, [`&:hover .${muiInputAdornmentClasses.root} .${muiIconButtonClasses.root},
&.${inputClasses.focused} .${muiInputAdornmentClasses.root} .${muiIconButtonClasses.root}`]: &.${inputClasses.focused} .${muiInputAdornmentClasses.root} .${muiIconButtonClasses.root}`]:
{ {
visibility: 'visible', visibility: 'visible',
}, },
...selectSx,
}),
[selectSx],
);
...sx, const clearIndicatorElement = useMemo(
}; () =>
String(value).length > 0 &&
onClearIndicatorClick && (
<MUIInputAdornment position="end">
<MUIIconButton onClick={onClearIndicatorClick}>
<CloseIcon fontSize="small" />
</MUIIconButton>
</MUIInputAdornment>
),
[onClearIndicatorClick, value],
);
return ( return (
<MUISelect <MUISelect
{...{ endAdornment={clearIndicatorElement}
endAdornment: clearIndicator, value={value}
...muiSelectProps, {...restMuiSelectProps}
sx: combinedSx, sx={combinedSx}
}} />
>
{children}
</MUISelect>
); );
}; };
Select.defaultProps = SELECT_DEFAULT_PROPS;
export type { SelectProps };
export default Select; export default Select;

@ -0,0 +1,5 @@
type SelectOptionalProps = {
onClearIndicatorClick?: import('@mui/material').IconButtonProps['onClick'];
};
type SelectProps = import('@mui/material').SelectProps & SelectOptionalProps;
Loading…
Cancel
Save