diff --git a/striker-ui/components/IconButton/IconButton.tsx b/striker-ui/components/IconButton/IconButton.tsx index 1eae04e5..11ef960b 100644 --- a/striker-ui/components/IconButton/IconButton.tsx +++ b/striker-ui/components/IconButton/IconButton.tsx @@ -14,6 +14,7 @@ import { createElement, FC, ReactNode, useMemo } from 'react'; import { BLACK, + BLUE, BORDER_RADIUS, DISABLED, GREY, @@ -39,19 +40,19 @@ const NormalIconButton = styled(MUIIconButton)({ color: GREY, }); -const MAP_TO_VISIBILITY_ICON: IconButtonMapToStateIcon = { - false: MUIVisibilityIcon, - true: MUIVisibilityOffIcon, +const MAP_TO_VISIBILITY_ICON: IconButtonMapToStateIconBundle = { + false: { iconType: MUIVisibilityIcon }, + true: { iconType: MUIVisibilityOffIcon }, }; -const MAP_TO_EDIT_ICON: IconButtonMapToStateIcon = { - false: MUIEditIcon, - true: MUIDoneIcon, +const MAP_TO_EDIT_ICON: IconButtonMapToStateIconBundle = { + false: { iconType: MUIEditIcon }, + true: { iconType: MUIDoneIcon, iconProps: { sx: { color: BLUE } } }, }; const MAP_TO_MAP_PRESET: Record< - IconButtonPresetMapToStateIcon, - IconButtonMapToStateIcon + IconButtonPresetMapToStateIconBundle, + IconButtonMapToStateIconBundle > = { edit: MAP_TO_EDIT_ICON, visibility: MAP_TO_VISIBILITY_ICON, @@ -72,28 +73,36 @@ const IconButton: FC = ({ variant = 'contained', ...restIconButtonProps }) => { - const mapToIcon = useMemo( + const mapToIcon = useMemo( () => externalMapToIcon ?? (mapPreset && MAP_TO_MAP_PRESET[mapPreset]), [externalMapToIcon, mapPreset], ); + const defaultIconBundle = useMemo>( + () => ({ iconType: defaultIcon }), + [defaultIcon], + ); + const iconButtonContent = useMemo(() => { let result: ReactNode; if (mapToIcon) { - const iconElementType: CreatableComponent | undefined = state - ? mapToIcon[state] ?? defaultIcon - : defaultIcon; - - if (iconElementType) { - result = createElement(iconElementType, iconProps); + const { iconType, iconProps: presetIconProps } = state + ? mapToIcon[state] ?? defaultIconBundle + : defaultIconBundle; + + if (iconType) { + result = createElement(iconType, { + ...presetIconProps, + ...iconProps, + }); } } else { result = children; } return result; - }, [children, mapToIcon, state, defaultIcon, iconProps]); + }, [mapToIcon, state, defaultIconBundle, iconProps, children]); const iconButtonElementType = useMemo( () => MAP_TO_VARIANT[variant], [variant], diff --git a/striker-ui/types/IconButton.d.ts b/striker-ui/types/IconButton.d.ts index af8ecf5a..7009aa4f 100644 --- a/striker-ui/types/IconButton.d.ts +++ b/striker-ui/types/IconButton.d.ts @@ -1,16 +1,21 @@ type CreatableComponent = Parameters[0]; -type IconButtonPresetMapToStateIcon = 'edit' | 'visibility'; +type IconButtonPresetMapToStateIconBundle = 'edit' | 'visibility'; -type IconButtonMapToStateIcon = Record; +type IconButtonStateIconBundle = { + iconType: CreatableComponent; + iconProps?: import('@mui/material').SvgIconProps; +}; + +type IconButtonMapToStateIconBundle = Record; type IconButtonVariant = 'contained' | 'normal'; type IconButtonOptionalProps = { defaultIcon?: CreatableComponent; iconProps?: import('@mui/material').SvgIconProps; - mapPreset?: IconButtonPresetMapToStateIcon; - mapToIcon?: IconButtonMapToStateIcon; + mapPreset?: IconButtonPresetMapToStateIconBundle; + mapToIcon?: IconButtonMapToStateIconBundle; state?: string; variant?: IconButtonVariant; };