fix(striker-ui): add delete preset to IconButton

main
Tsu-ba-me 2 years ago
parent ea2997c4d6
commit 3376d5e4ef
  1. 17
      striker-ui/components/IconButton/IconButton.tsx
  2. 3
      striker-ui/types/IconButton.d.ts

@ -1,4 +1,5 @@
import { import {
Delete as MUIDeleteIcon,
Add as MUIAddIcon, Add as MUIAddIcon,
Close as MUICloseIcon, Close as MUICloseIcon,
Done as MUIDoneIcon, Done as MUIDoneIcon,
@ -21,6 +22,7 @@ import {
BORDER_RADIUS, BORDER_RADIUS,
DISABLED, DISABLED,
GREY, GREY,
RED,
} from '../../lib/consts/DEFAULT_THEME'; } from '../../lib/consts/DEFAULT_THEME';
type IconButtonProps = IconButtonOptionalProps & MUIIconButtonProps; type IconButtonProps = IconButtonOptionalProps & MUIIconButtonProps;
@ -39,6 +41,15 @@ const ContainedIconButton = styled(MUIIconButton)({
}, },
}); });
const RedContainedIconButton = styled(ContainedIconButton)({
backgroundColor: RED,
color: GREY,
'&:hover': {
backgroundColor: `${RED}F0`,
},
});
const NormalIconButton = styled(MUIIconButton)({ const NormalIconButton = styled(MUIIconButton)({
color: GREY, color: GREY,
}); });
@ -51,6 +62,10 @@ const MAP_TO_CLOSE_ICON: IconButtonMapToStateIconBundle = {
none: { iconType: MUICloseIcon }, none: { iconType: MUICloseIcon },
}; };
const MAP_TO_DELETE_ICON: IconButtonMapToStateIconBundle = {
none: { iconType: MUIDeleteIcon },
};
const MAP_TO_EDIT_ICON: IconButtonMapToStateIconBundle = { const MAP_TO_EDIT_ICON: IconButtonMapToStateIconBundle = {
false: { iconType: MUIEditIcon }, false: { iconType: MUIEditIcon },
true: { iconType: MUIDoneIcon, iconProps: { sx: { color: BLUE } } }, true: { iconType: MUIDoneIcon, iconProps: { sx: { color: BLUE } } },
@ -71,6 +86,7 @@ const MAP_TO_MAP_PRESET: Record<
> = { > = {
add: MAP_TO_ADD_ICON, add: MAP_TO_ADD_ICON,
close: MAP_TO_CLOSE_ICON, close: MAP_TO_CLOSE_ICON,
delete: MAP_TO_DELETE_ICON,
edit: MAP_TO_EDIT_ICON, edit: MAP_TO_EDIT_ICON,
play: MAP_TO_PLAY_ICON, play: MAP_TO_PLAY_ICON,
visibility: MAP_TO_VISIBILITY_ICON, visibility: MAP_TO_VISIBILITY_ICON,
@ -79,6 +95,7 @@ const MAP_TO_MAP_PRESET: Record<
const MAP_TO_VARIANT: Record<IconButtonVariant, CreatableComponent> = { const MAP_TO_VARIANT: Record<IconButtonVariant, CreatableComponent> = {
contained: ContainedIconButton, contained: ContainedIconButton,
normal: NormalIconButton, normal: NormalIconButton,
redcontained: RedContainedIconButton,
}; };
const IconButton: FC<IconButtonProps> = ({ const IconButton: FC<IconButtonProps> = ({

@ -3,6 +3,7 @@ type CreatableComponent = Parameters<typeof import('react').createElement>[0];
type IconButtonPresetMapToStateIconBundle = type IconButtonPresetMapToStateIconBundle =
| 'add' | 'add'
| 'close' | 'close'
| 'delete'
| 'edit' | 'edit'
| 'play' | 'play'
| 'visibility'; | 'visibility';
@ -14,7 +15,7 @@ type IconButtonStateIconBundle = {
type IconButtonMapToStateIconBundle = Record<string, IconButtonStateIconBundle>; type IconButtonMapToStateIconBundle = Record<string, IconButtonStateIconBundle>;
type IconButtonVariant = 'contained' | 'normal'; type IconButtonVariant = 'contained' | 'normal' | 'redcontained';
type IconButtonMouseEventHandler = type IconButtonMouseEventHandler =
import('@mui/material').IconButtonProps['onClick']; import('@mui/material').IconButtonProps['onClick'];

Loading…
Cancel
Save